In this article, you'll learn how to build a simple functional calculator using HTML, CSS and JavaScript. This tutorial covers all the basics, from creating the calculator's user interface to adding its functionality. By the end of this tutorial, you'll have a working calculator that you can use on your own website or share with others.
Its a good project to practice your JavaScript skills. I have used simple javascript to make this calculator.
So basically, to calculate the values present in screen of calculator, i have just used the eval() method of javascript. The screen of calculator is input tag with type text.
In this calculator I have included :
- Number buttons(1 to 9, 0, 00, .).
- AC button(All clear button to empty the display).
- DE button to delete the last digit.
- Other buttons for calculations like +, -, *, /, % .
Video Tutorial on JavaScript Calculator.
Calculator in JavaScript.
- Create one folder.
- Open that folder in you code editor,
- Create two files in that folder named index.html and index.css
Step 1: Create basic HTML structure and create a calculator screen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="input_box">
<input type="text" class="calculator_screen">
</div>
<!-- Calculator Buttons below -->
</div>
</div>
</body>
</html>
CSS
.box .input_box{
background-color: #d2d2d21a;
margin: 20px;
border-radius: 15px;
}
.box .input_box input{
width: 90%;
height: 120px;
background-color: transparent;
text-align: end;
font-size: 35px;
border: none;
outline: none;
}
Output :
Step 2: Add buttons to calculator.
Now let's add buttons to calculator.
Firstly, we'll add all-clear button (AC), delete button (DE), % button and division button (/). we apply styles to this button by their tag name (which is button tag).
We'll add same class value(class="button") to those button tags which value or inner HTML we want to display in calculator screen, when click on it. So, by same class value, we can select all through foreach method of JavaScript.
Means AC (All clear button) button is use to clear the screen when click on it, not to display its value or inner HTML on screen so we have added different class to those buttons.
Also read: Rotating button border animation.
HTML
<div class="button_box">
<button type="button" class="allclear_button" style="font-weight: bold;">AC</button>
<button type="button" class="delete_button" style="font-weight: bold;">DE</button>
<button type="button" class="button" style="font-weight: bold;">%</button>
<button type="button" class="button" style="font-weight: bold;">/</button>
</div>
<div class="button_box">
<button type="button" class="button">7</button>
<button type="button" class="button">8</button>
<button type="button" class="button">9</button>
<button type="button" class="button" style="font-weight: bold;">*</button>
</div>
<div class="button_box">
<button type="button" class="button">4</button>
<button type="button" class="button">5</button>
<button type="button" class="button">6</button>
<button type="button" class="button" style="font-weight: bold;">-</button>
</div>
<div class="button_box">
<button type="button" class="button">1</button>
<button type="button" class="button">2</button>
<button type="button" class="button">3</button>
<button type="button" class="button" style="font-weight: bold;">+</button>
</div>
<div class="button_box">
<button type="button" class="button">0</button>
<button type="button" class="button">00</button>
<button type="button" class="button">.</button>
<button type="button" class="equal" style="background-color: #000; color: #fff; font-weight: bold;">=</button>
</div>
CSS
.box .button_box{
width: 100%;
}
.box .button_box button{
width: 75px;
height: 75px;
cursor: pointer;
font-size: 30px;
margin: 8px;
border: none;
border-radius: 20px;
box-shadow: 0px 18px 26px -25px rgb(65 36 228);
transition: 0.1s;
}
.box .button_box button:active{
box-shadow: none;
}
Output:
The design part is done. Now let's add functionality to calculator to calculate.
Step 3: Add JavaScript for calculator functionality.
First of all, define variable for all clear button, delete button, equal to button, calculator screen, buttons.
We'll add queryselectorAll to button class. So, it gives all the elements which have class="button".
Later we add foreach method to target each element which have button class name (class="button"). so that we can add value of that button in calculator screen on a click.
JavaScript
let button = document.querySelectorAll(".button");
let calculator_screen = document.querySelector(".calculator_screen");
let allclear_button = document.querySelector(".allclear_button");
let delete_button = document.querySelector(".delete_button");
let equal = document.querySelector(".equal");
Now let's first add functionality to empty or blank the calculator screen onclick on all clear button (AC button).
JavaScript
allclear_button.onclick = function(){
calculator_screen.value = "";
}
Adding functionality to delete the last digit in screen, when click on delete button (DE button) in calculator.
JavaScript
delete_button.onclick = function(){
calculator_screen.value = calculator_screen.value.substring(0 , calculator_screen.value.length - 1);
}
Now let's add functionality to add value in screen when user click on buttons (class="button") in calculator.
As we have added same class name in button tag (class="button"). By using foreach method of JavaScript. we can target each element, which have class name button. So, when user click on element which have button class, then we make the calculator screen value equal to that element value or inner HTML which is clicked.
But when click on button we'll add if condition that checks, if there is a '=' sign or not.
If there is "=" sign in screen and user click on another button to add value to screen, it will remove the "=" sign and add that value.
Because we going to display the answer of calculations with = sign. So, after the answer shown, if user directly type another value before clearing the screen, the value adds after the answer, and when user click on equal to button for answer, it will make error or answer won't appear, because there is unwanted "=" sign.
JavaScript
button.forEach(button => {
button.onclick = function(){
if(calculator_screen.value.substring(0 , 1) == "="){
calculator_screen.value = "";
calculator_screen.value += button.innerHTML;
}else{
calculator_screen.value += button.innerHTML;
}
}
});
Adding functionality to get answer. To make calculations. We'll use eval() method of javascript. And We'll show answer with "=" sign.
JavaScript
equal.onclick = function(){
let answer = eval(calculator_screen.value);
calculator_screen.value = "= " + answer;
}
Here the simple calculator is ready. You can see demo in above youtube video.
You may like:
- How to create a word counter using JavaScript.
- How to create a tags input box with tags input limit using HTML CSS and JavaScript.
Final code:
That's how you can create a simple calculator using html CSS and JavaScript. If you have any question or suggestion you can write them in the comment section.
Share your thoughts.