Creating a calculator is one of the best ways to learn and apply fundamental web development skills. In this project, we combine the power of HTML, CSS, and JavaScript to build a stylish and fully functional calculator that handles basic arithmetic operations like addition, subtraction, multiplication, and division. Let’s break it down!
HTML Structure
The HTML provides the core layout of the calculator. The calculator is wrapped inside a <div> with the class calculator, which contains a display section and a button grid. The display uses a disabled input field to show user-entered values and results. Each calculator button is an <input type="button">, with numbers, operators, and special functions like AC (clear), DEL (delete), and = (calculate). The use of placeholder text in the display gives users a default value of “0” until they input something.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator">
<div class="display">
<input type="text" placeholder="0" id="input" disabled />
</div>
<div class="buttons">
<!-- Full Erase -->
<input type="button" value="AC" id="clear" />
<!-- Erase Single Value -->
<input type="button" value="DEL" id="erase" />
<input type="button" value="/" class="input-button" />
<input type="button" value="*" class="input-button" />
<input type="button" value="7" class="input-button" />
<input type="button" value="8" class="input-button" />
<input type="button" value="9" class="input-button" />
<input type="button" value="-" class="input-button" />
<input type="button" value="6" class="input-button" />
<input type="button" value="5" class="input-button" />
<input type="button" value="4" class="input-button" />
<input type="button" value="+" class="input-button" />
<input type="button" value="1" class="input-button" />
<input type="button" value="2" class="input-button" />
<input type="button" value="3" class="input-button" />
<input type="button" value="=" id="equal" />
<input type="button" value="0" class="input-button" />
<input type="button" value="." class="input-button" />
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS Styling
The CSS gives the calculator its sleek and modern appearance. A linear gradient splits the background into two bold colors, while the calculator body uses a dark card-style design with padding and rounded corners. The display is styled to align text to the right, mimicking real calculator behavior. Grid layout is used to arrange the buttons neatly into rows and columns, with special styling for the = and 0 buttons to span multiple rows or columns. Subtle shadows and hover effects improve visual feedback and enhance user interaction.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto Mono", monospace;
}
body {
height: 100vh;
background: linear-gradient(to bottom, #04dc8e 50%, #090c31 50%);
}
.calculator {
width: 400px;
background-color: #15173c;
padding: 50px 30px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 8px;
box-shadow: 0 20px 50px rgba(0, 5, 24, 0.4);
}
.display {
width: 100%;
}
.display input {
width: 100%;
padding: 15px 10px;
text-align: right;
border: none;
background-color: transparent;
color: #ffffff;
font-size: 35px;
}
.display input::placeholder {
color: #9490ac;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
margin-top: 40px;
}
.buttons input[type="button"] {
font-size: 20px;
padding: 17px;
border: none;
background-color: transparent;
color: #ffffff;
cursor: pointer;
border-radius: 5px;
}
.buttons input[type="button"]:hover {
box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
grid-row: span 2;
background-color: #04dc8e;
}
input[type="button"][value="0"] {
grid-column: span 2;
}
JavaScript Logic
The JavaScript brings the calculator to life. When the page loads, the input field is cleared. Each calculator button listens for click events and appends its value to the display. The = button triggers the eval() function, which computes the result. The script checks if the result is an integer or a decimal and formats it accordingly. There are also dedicated functions to clear the input (AC) and delete the last character (DEL). To avoid unintended chaining after a result, the script resets the display when a new input starts after pressing =.
let equal_pressed = 0;
let button_input = document.querySelectorAll(".input-button");
let input = document.getElementById("input");
let equal = document.getElementById("equal");
let clear = document.getElementById("clear");
let erase = document.getElementById("erase");
window.onload = () => {
input.value = "";
};
button_input.forEach((button_class) => {
button_class.addEventListener("click", () => {
if (equal_pressed == 1) {
input.value = "";
equal_pressed = 0;
}
input.value += button_class.value;
});
});
equal.addEventListener("click", () => {
equal_pressed = 1;
let inp_val = input.value;
try {
let solution = eval(inp_val);
if (Number.isInteger(solution)) {
input.value = solution;
} else {
input.value = solution.toFixed(2);
}
} catch (err) {
alert("Invalid Input");
}
});
clear.addEventListener("click", () => {
input.value = "";
});
erase.addEventListener("click", () => {
input.value = input.value.substr(0, input.value.length - 1);
});
Â
