Steps involved in creating a web app

Every applications in the tech industry is created by applying these steps:

Input => Process => Output

This is the core idea of making any application in the tech industry.

Firstly you will be getting input from the client and you will process those inputs according to your logic then you would deliver the output to the client.

What we will be building in this blog ?

This is a simple web app which gets two inputs from the client and performs the calculation according to operators clicked by the client and displays the result to the client. Let's name it as a Calculation app

Breaking down the idea

Input

First we need to get two values(ie.operands) from the client to perform the calculation. By using input tag we will be getting inputs from the client.

Next after getting required operands , what we need is operators to perform calculation. So we will be displaying the operators. So that when the user clicks on the operator it will display the calculated result.

After receiving all the required inputs to perform a calculation , we will display the output to the client. But where ? Inorder to , display the result we will create a <div>.

Now we have completed all the HTML parts that are necessary get the required inputs from the user. And add some stylings using CSS to make the app look good.

Here is how the my app looks after doing some styling 👇

Now if the client enters the necessary values and click on the operators the app does not show any output , Why ? Because we have'nt done any processing part yet.

Processing

Now for processing the inputs entered by the user we will be using Javascript language.

Firstly , we need to save the HTML elements in a JS variable . So that it will be easy for us to process. So inorder to select the HTML elements there are many ways , I will be using querySelector() for selecting HTML elements.

Incase if you are not aware of querySelector() , check this out : Read here

Now , we need to start implementing our logic

If the user clicks add button , then we need to perform addition operation. How can we do that ? By adding eventListeners() to the buttons. We will add click event to the buttons so that when the client clicks the button respective eventHandler is called and respective calculation is done inside the eventHandler.

And we need make sure that both the operands are given correctly else we will display an error.

If you are not aware of eventListeners() , check this out : Read here

In the above code , we have added eventListener() for add button. So when the client clicks the add button. The respective eventHandler will be called and then we will check whether the operands are valid or not . If it is valid then we will perform addition operation else we will display an error. Similarly , do this for all the operators.

Output

Now after done with processing , we need display the output to the client . This can also be done in many ways. Here , we will be using innerText to store result in the HTML element.

That's it ! Congratulate yourself for taking the first step and creating the simple web app.

In case , if you're stuck at some where feel free to check out my repository : Repo