Skip to main content

Calculator

In this tutorial, we will create a calculator app step by step, explaining the reasoning behind each step.

Step 1​

When creating our component, we need to define what we will need first.

We want to implement a calculator that adds up values from two numeral fields and displays the result in a third field. So we will need:

  • numeric field #1
  • numeric field #2
  • result field
  • button that will start the calculation

Step 2​

Now that we have our basic dependencies defined, let's go further and define a dependency map.

The dependency map ties our classes to the DOM nodes. Based on it, our final class will be able to instantiate all its dependencies, inject proper nodes into them and then wire everything up.

Step 3​

Now that we have a dependency map, we can define our main class that wires everything up and instantiate it.

Final result​

Now the calculator works.

The only thing we added here is the instantiation of our Calculator through the create method.

As you can see, the final result is that all subcomponents are properly encapsulated, cleanly organized, and easily testable.