I am a simple calculator built using HTML, JavaScript, and CSS. My HTML defines the layout of buttons and an input box where calculations are displayed. Each button has a function some for numbers, some for operations like addition or subtraction, and others for clearing input (AC) or deleting the last character (DEL).
My functionality comes alive through JavaScript. I use an input box to show the user’s input and results. When a button is clicked, JavaScript listens and processes the action. For example, clicking the = button evaluates the mathematical expression entered and displays the result. If AC is pressed, I clear everything, and DEL removes the last character of the input. Each button click updates the input box so the user sees what’s happening in real time.
Build Your Own Calculator in JavaScript
Creating a calculator is a classic beginner project that helps you learn the basics of HTML, CSS, and JavaScript. In this blog, we’ll guide you through building an interactive calculator with buttons for numbers, operators, and special functions like delete (DEL) and clear (AC). Let’s dive in!
HTML Structure
The calculator’s structure is defined in HTML. We create an input box for displaying calculations and buttons for interaction.
Here the code:
code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" placeholder="0" id="inputbox" />
<div>
<button class="operator">AC</button>
<button class="operator">DEL</button>
<button class="operator">%</button>
<button class="operator">/</button>
</div>
<div>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operator">*</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator">-</button>
</div>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operator">+</button>
</div>
<div>
<button>0</button>
<button>00</button>
<button>.</button>
<button class="equalbtn">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css:
Here’s how you can create the styling in your styles.css file to achieve the design in code:
code/* General reset */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1e1e2f; /* Dark background */
font-family: 'Arial', sans-serif;
}
/* Calculator container */
.calculator {
background: rgba(255, 255, 255, 0.05); /* Transparent effect */
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); /* Frosted glass shadow */
width: 320px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Input box */
#inputbox {
background: transparent;
border: none;
border-bottom: 2px solid #fff;
color: #fff;
font-size: 2rem;
text-align: right;
padding: 10px;
margin-bottom: 20px;
outline: none;
caret-color: transparent;
}
/* Buttons grid */
.calculator div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* Button styles */
button {
width: 70px;
height: 70px;
margin: 5px;
border: none;
border-radius: 50%;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease-in-out;
}
/* Operator buttons (e.g., AC, DEL, %, /) */
.operator {
background-color: #34c759; /* Green buttons */
color: #fff;
}
.operator:hover {
background-color: #2fa84a; /* Darker green on hover */
}
/* Equal button */
.equalbtn {
background-color: #ff9500; /* Orange button */
color: #fff;
}
.equalbtn:hover {
background-color: #e08400; /* Darker orange on hover */
}
/* Number buttons */
button:not(.operator):not(.equalbtn) {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
}
button:not(.operator):not(.equalbtn):hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* Button press effect */
button:active {
transform: scale(0.95);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
JavaScript Functionality:
The JavaScript handles button clicks and performs calculations. Here’s the code:
codelet input = document.getElementById('inputbox');
let buttons = document.querySelectorAll('button');
let string = "";
let arr = Array.from(buttons);
arr.forEach(button => {
button.addEventListener('click', (e) => {
if (e.target.innerHTML == '=') {
string = eval(string);
input.value = string;
} else if (e.target.innerHTML == 'AC') {
string = "";
input.value = string;
} else if (e.target.innerHTML == 'DEL') {
string = string.substring(0, string.length - 1);
input.value = string;
} else {
string += e.target.innerHTML;
input.value = string;
}
});
});
How It Works
- Input Handling: Each button click updates the
stringvariable and displays it in the input box. - Evaluation: When the
=button is clicked, theeval()function evaluates the mathematical expression. - Clear and Delete:
- The
ACbutton clears the entire input. - The
DELbutton removes the last character usingsubstring().
- The
Conclusion
Building a calculator teaches you essential web development skills. With HTML, you learn structuring; JavaScript adds interactivity; CSS styles the interface. Try customizing the calculator by adding more features like memory storage or scientific operations.