How to make a Calculator using HTML, CSS, and Vanilla JavaScript?
Create a basic calculator with vanilla JS
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
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
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
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
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
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
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
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.
