Create your first web app using HTML , CSS and Vanilla JS

Create your first web app using HTML , CSS and Vanilla JS

ยท

3 min read

If you are curious to create your first web application , then this blog is for you.

Note : This blog assumes that you have some basic understanding of websites and web applications.

Lets get started.

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 ?

image.png

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

image.png

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.

image.png

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>.

image.png

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 ๐Ÿ‘‡

image.png

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 : developer.mozilla.org/en-US/docs/Web/API/Do..

image.png

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 : developer.mozilla.org/en-US/docs/Web/API/Ev..

image.png

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.

image.png

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 : github.com/Devananth/Blogs

ย