How to make a Calculator using HTML, CSS, and Vanilla JavaScript?

HTML code with syntax highlighting

Welcome guys, today I am going to tell you, how to make a calculator app in HTML, CSS, and vanilla JS. It is an easy project and an absolute necessity as it will help you understand how to link your HTML to JS and also make your HTML DOM change and interact with your user. We will start by making a folder structure for our project as it is a good practice to keep our code separate so that it will be easy for us to debug it later, and it also increases the usability of our code. Then will make the HTML markup for the website and add some CSS styling after which, we will give our website interactivity using JS, and then we are done. EASY RIGHT?? So let's begin😉.

1:) Creating the markup for our project

i:)The folder structure

This is the folder structure you need to have
This is the folder structure you need to have

I would recommend you to use VSCode for development but any code editor will work(including notepad🤣). You just need to make sure that the files have the same extensions as I have. For HTML(fileName.html), for CSS(fileName.css) and finally for JS(fileName.js). Now as we have cleared the basics and are on the same page, let's start coding the real thing.

ii:)The boilerplate and containers

HTML Boilerplate and the container divs
HTML Boilerplate and the container divs

Now, start by making the HTML boilerplate code as I have given in the image and also add the container divs which will let you know how you have to style the divs accordingly. After this, we will add some buttons to the markup and then will move toward the styling of our project.

iii:) Placement of keys

Placement of the buttons in the markup
Placement of the buttons

Now we have completed our work with HTML markup and are ready to do some styling. In the above image, I have made some buttons for the controls of the calculator. I have given the class of “func” to operators, “num” to digits, and the others accordingly. I would also use the id of a button to determine its value in JS, although you can use other approaches like giving them the “value” attribute or the “key-data” attribute or anything which you can use as a value in JS. I have also not used bootstrap’s classes since I would use the CSS grid layout for styling.

2:) Creating the stylesheet of our project

i:) Appling the basic styles to the body and container

style of the body and container

So here we are guys, this is the styling that will be applied to the body and the container of our calculator. I have made use of the flexbox property of CSS to center the calculator on the body. I have also done the same thing to our container to give the display and keys proper position without any hassle. This way you can make great responsive designs with minimal effort.

ii:) Styling the display and keys by giving it CSS grid property

Here, in the above image, I gave styling to the display, keys, and buttons. In the keys div, I have given it a display property of grid which takes care of positioning all the keys in a table-like grid without any extra code. It is a built-in CSS feature that works as an HTML table layout. The layout is almost finished just we have to style the individual buttons but that I leave for you to do. I have given some basic style to all of my buttons which you can take if you want but I would recommend writing your CSS as it will enable you to personalize your project and would help in standing out from the crowd. Now let’s move on to the JS to give the calculator the functionality to calculate.

3:)Making the JavaScript of our project

i:)declaring the variables

Taking inputs from the HTML DOM

Firstly we have to make the variables that will help us to manipulate and take inputs from our HTML DOM. You can catch an element by its id name, class name, or tag name. Next, we will loop over all the buttons and listen to the inputs given by the buttons. In this step, you will also calculate and display the results.

ii:) Iterating over the buttons and calling calculate

The button variable we got is an object of all the buttons so I have to typecast it to an array so that I can use forEach loop to iterate all the buttons and check which is clicked. “elem” is the loop variable that will get the value of all the button and the event listener will listen to the click event and if clicked, will send the button to calculate function which we will check next.

iii:) The function which calculates and displays the value

Function to calculate and display value

This is it, guys! this is where all the magic begins. This function would take the click button as “lexical this” and would store its “id” in the digit variable. If it is “C” then the innerText of the display would be set to “”, if it is “AC” then the function would pop out the last digit from the innerText of “display”. I have used the “eval()” function which is a built-in JavaScript function that performs mathematical operations on a string.

You can also convert the string to a number and perform mathematical calculations. I did not want to go into that trouble so I took this route.

I have also limited the number of digits in the display to a maximum of 13 digits so that I can control the accuracy but it is completely optional

4:) Working calculator

Preview of the calculator which we have made in this tutorial
Working calculator

So guys, after all this hard work, we have successfully created our very own working calculator with plain old HTML, CSS, and JS. Be proud as you have done something remarkable, something which could make you a great WebDev in the future. Enjoy and remember to follow me to get these kinds of tutorials which I publish on this blog every Sunday.

--

--

--

Hi, I am Harsh and I write about coding and learning techniques. I am a student myself and would love to tell everyone my secrets for coding and learning.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Login Persistence using localStorage and useEffect

How to Perform Testing While Creating a React Application

You.i Engine One: Platform Specific Video Players

How to remove last character in string (Javascript)

Why GraphCMS?

Creating a Dynamic Theme Toggle using Vue.js

How to write a ‘Good’ unit test in Angular

NodeJS 8 from Scratch — Part 5

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Harsh Prateek

Harsh Prateek

Hi, I am Harsh and I write about coding and learning techniques. I am a student myself and would love to tell everyone my secrets for coding and learning.

More from Medium

A simple website with HTML & CSS

Get Started with React — Say ‘Hello World’

My Front-End Path

Language before Frameworks