Creating a calculator can be a challenging and intricate task, and it is something that many web developers aspire to accomplish during their journey in web development. However, it is possible to create a functional calculator by utilizing HTML, CSS, and JavaScript.
Today in this blog you will learn to create a Responsive Calculator in HTML CSS & JavaScript. This calculator will do every calculation like division, multiplication, addition, subtraction, and many more. Recently I created a Website with Login & Signup Form I believe you will also help to enhance your web development skills.
Video Tutorial of Calculator in HTML CSS & JavaScript
As you saw in the video tutorial on the Calculator. This calculator did all the mathematical equations also it has some validation features like the operator buttons did not work until you type numbers.
I would highly recommend you watch the full video tutorial of this calculator. In the video tutorial, I tried to make you understand every line of code by commenting.
Steps for Creating a Calculator in HTML CSS & JavaScript
To create a working calculator HTML, CSS, and vanilla JavaScript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download all the source code files of the Calculator, by clicking on the given download button.
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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>Calculator in HTML CSS & JavaScript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<input type="text" class="display" />
<div class="buttons">
<button class="operator" data-value="AC">AC</button>
<button class="operator" data-value="DEL">DEL</button>
<button class="operator" data-value="%">%</button>
<button class="operator" data-value="/">/</button>
<button data-value="7">7</button>
<button data-value="8">8</button>
<button data-value="9">9</button>
<button class="operator" data-value="*">*</button>
<button data-value="4">4</button>
<button data-value="5">5</button>
<button data-value="6">6</button>
<button class="operator" data-value="-">-</button>
<button data-value="1">1</button>
<button data-value="2">2</button>
<button data-value="3">3</button>
<button class="operator" data-value="+">+</button>
<button data-value="0">0</button>
<button data-value="00">00</button>
<button data-value=".">.</button>
<button class="operator" data-value="=">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Second, paste the following codes into your style.css file.
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #e0e3eb;
}
.container {
position: relative;
max-width: 300px;
width: 100%;
border-radius: 12px;
padding: 10px 20px 20px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.display {
height: 80px;
width: 100%;
outline: none;
border: none;
text-align: right;
margin-bottom: 10px;
font-size: 25px;
color: #000e1a;
pointer-events: none;
}
.buttons {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
}
.buttons button {
padding: 10px;
border-radius: 6px;
border: none;
font-size: 20px;
cursor: pointer;
background-color: #eee;
}
.buttons button:active {
transform: scale(0.99);
}
.operator {
color: #2f9fff;
}
Third, paste the following codes into your script.js file.
const display = document.querySelector(".display");
const buttons = document.querySelectorAll("button");
const specialChars = ["%", "*", "/", "-", "+", "="];
let output = "";
//Define function to calculate based on button clicked.
const calculate = (btnValue) => {
display.focus();
if (btnValue === "=" && output !== "") {
//If output has '%', replace with '/100' before evaluating.
output = eval(output.replace("%", "/100"));
} else if (btnValue === "AC") {
output = "";
} else if (btnValue === "DEL") {
//If DEL button is clicked, remove the last character from the output.
output = output.toString().slice(0, -1);
} else {
//If output is empty and button is specialChars then return
if (output === "" && specialChars.includes(btnValue)) return;
output += btnValue;
}
display.value = output;
};
//Add event listener to buttons, call calculate() on click.
buttons.forEach((button) => {
//Button click listener calls calculate() with dataset value as argument.
button.addEventListener("click", (e) => calculate(e.target.dataset.value));
});
That’s all, now you’ve successfully created a Calculator. If you face any difficulties while creating your calculator or your code is not working as expected, you can download the source code files for this calculator for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
