Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Simple Calculator" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Simple Calculator" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Simple Calculator [Source Code]
To get the following HTML, CSS & JS code for the Simple Calculator project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
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>Simple Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="output">
<input type="text" class="text" value="" placeholder="0">
</div>
<div>
<input type="button" value="AC" class="op AC">
<input type="button" value="DEL" class="op DEL">
<input type="button" value="%" class="op val">
<input type="button" value="/" class="op val">
</div>
<div>
<input type="button" value="7" class="val">
<input type="button" value="8" class="val">
<input type="button" value="9" class="val">
<input type="button" value="*" class="op val">
</div>
<div>
<input type="button" value="4" class="val">
<input type="button" value="5" class="val">
<input type="button" value="6" class="val">
<input type="button" value="-" class="op val">
</div>
<div>
<input type="button" value="1" class="val">
<input type="button" value="2" class="val">
<input type="button" value="3" class="val">
<input type="button" value="+" class="op val">
</div>
<div>
<input type="button" value="." class="op val">
<input type="button" value="0" class="val">
<input type="button" value="=" class="equal op">
</div>
</div>
<!-- val === value & op === operator -->
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: blueviolet;
}
input {
outline: none;
border: none;
}
.calculator,
input {
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15),
-1px -1px 10px rgba(0, 0, 0, 0.15);
}
.calculator {
width: 430px;
background-color: white;
padding: 25px;
border-radius: 10px;
}
input:not(.text) {
border-radius: 50%;
width: 70px;
height: 70px;
margin: 10px;
font-size: 24px;
font-weight: 500;
transition: all 0.2s ease-in-out;
}
input:hover:not(.text, .op) {
background-color: black;
color: white;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.op {
color: blueviolet;
}
.op:hover {
background-color: black;
color: blueviolet;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.output .text {
width: 100%;
height: 70px;
padding: 0 20px 0 0;
margin-bottom: 15px;
text-align: right;
font-size: 30px;
border-radius: 50px;
}
.calculator .equal {
width: 155px;
border-radius: 20%;
}
JavaScript
const outputEl = document.querySelector(".text");
const valEl = document.querySelectorAll(".val");
const ClearEl = document.querySelector(".AC");
const deleteEl = document.querySelector(".DEL");
const equalEl = document.querySelector(".equal");
// It adds every value and display at the output
valEl.forEach((val)=>{
val.addEventListener("click",()=>{
outputEl.value += val.value ;
})
})
// It clears all the digits in the output
ClearEl.addEventListener("click",()=>{
outputEl.value = "";
})
// It deletes the last digit in the output
deleteEl.addEventListener("click",()=>{
outputEl.value = outputEl.value.slice(0,-1);
})
// If there is no error, it evaluates the output value or else it shows syntax error as a alert message.
equalEl.addEventListener("click",()=>{
try{
outputEl.value = eval(outputEl.value);
}catch(e){
alert(e);
}
})
Generating Download Link...