Feature Coming Soon!
The newsletter functionality is under development.
Calculator Using HTML, CSS & JavaScript
5 min read
Project Overview
This project demonstrates a simple yet fully functional calculator built using HTML, CSS, and JavaScript. It provides basic arithmetic operations (addition, subtraction, multiplication, and division) through a user-friendly interface. This calculator is designed to be intuitive, allowing users to input two numbers and select an operation to get an instant result.
The design features a clean layout with distinct input fields for numbers, a dropdown for selecting the operation, and a prominent "Calculate" button. The result is displayed clearly at the top. The core of the functionality lies in JavaScript, which captures user inputs, performs the selected calculation, and updates the display. CSS is used to style the calculator, ensuring it is visually appealing and responsive across different devices. This project serves as an excellent foundation for understanding basic web form handling and arithmetic logic in JavaScript.
HTML Structure
The HTML structure for this calculator is straightforward and semantic. It is contained within a `div` with the class `calculator`. Inside, there's a `div` for `input-fields` which holds the display for the `result` (an `h1` with `id="result"`), a `select` dropdown for `operator` selection (`id="operator"`), and two `input` fields of `type="number"` (`id="number1"` and `id="number2"`) for the user to enter their values. Each input and select element has `aria-label` for accessibility. Below the input fields, a `div` with `button-container` holds a `button` with `id="calculate"` to trigger the calculation. Finally, a `script` tag links to an external JavaScript file (`app.js`) to handle the calculator's logic. This structure provides a clear and accessible interface for the calculator.
<!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="input-fields">
<h1 id="result" class="result-display">Result</h1>
<select id="operator" class="operation-select" aria-label="Select operation">
<option value="add">+ (Add)</option>
<option value="subtract">- (Subtract)</option>
<option value="divide">/ (Divide)</option>
<option value="multiply">* (Multiply)</option>
</select>
<input
type="number"
id="number1"
class="input-number"
placeholder="First number"
aria-label="First number"
/>
<input
type="number"
id="number2"
class="input-number"
placeholder="Second number"
aria-label="Second number"
/>
</div>
<div class="button-container">
<button id="calculate" class="calculate-btn">Calculate</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS Styling
The CSS for this calculator project provides a clean and functional design. The `body` is styled to center the calculator on the screen with a `crimson` background and white text. The `.main` class (which appears to be a typo for `.calculator` based on the HTML) provides basic padding and text alignment. Input fields are styled to be block-level elements, with `border: none`, `border-radius`, and `padding`. The `select` dropdown for operators has similar styling. The `button` is given a transparent background, white text, a white `border`, and a `cursor: pointer` for interactivity. This styling ensures the calculator is easy to use and visually appealing.
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: crimson;
color: white;
font-family: sans-serif;
}
.main {
padding: 5px 0;
text-align: center;
}
input {
display: flex;
flex-direction: column;
}
.inputs input {
border: none;
border-radius: 5px;
padding: 1rem 10rem;
outline: none;
margin-bottom: 10px;
}
#selectOp {
margin-bottom: 10px;
padding: 10px;
outline: none;
}
#btn {
border: none;
background: transparent;
color: white;
padding: 10px 20px;
border: 2px solid white;
margin-top: 10px;
cursor: pointer;
}
JavaScript
The JavaScript for this project implements the core arithmetic logic of the calculator. An event listener is attached to the "Calculate" button (identified by `id="btn"`). When this button is clicked, the script retrieves the values from the two number input fields (`.num1` and `.num2`) and the selected operator from the dropdown (`#selectOp`). A `switch` statement is then used to perform the appropriate arithmetic operation based on the selected `oprator` value. The `Number()` constructor is used to ensure the input values are treated as numbers before calculation. Finally, the calculated `result` is displayed by updating the `innerHTML` of the element with the class `result`.
document.getElementById("btn").addEventListener("click", function () {
let num1 = document.querySelector(".num1").value;
let num2 = document.querySelector(".num2").value;
let result = document.querySelector(".result");
let oprator = document.getElementById("selectOp").value;
switch (oprator) {
case "plus":
result.innerHTML = Number(num1) + Number(num2);
break;
case "min":
result.innerHTML = Number(num1) - Number(num2);
break;
case "dev":
result.innerHTML = Number(num1) / Number(num2);
break;
case "multi":
result.innerHTML = Number(num1) * Number(num2);
}
});
Live Demo: Simple Calculator
Watch a live demonstration of the Calculator below.
Final Thoughts
This Simple Calculator project provides a fundamental example of building interactive web applications using HTML for structure, CSS for styling, and JavaScript for dynamic functionality. It demonstrates how to capture user input, perform basic computations, and display results, making it a great starting point for understanding client-side scripting. The clear separation of concerns makes the code easy to read, understand, and extend.
You can easily customize this component by:
- Adding more complex operations (e.g., modulo, exponentiation, square root).
- Implementing a single input field and a sequence of button presses (like a traditional calculator).
- Improving error handling (e.g., division by zero, non-numeric input).
- Enhancing the UI with more sophisticated button layouts, themes, or animations.
- Adding memory functions (e.g., M+, M-, MR, MC).
Pro Tip
For more advanced calculator functionality, consider using event delegation on the button container. Instead of attaching a click listener to each button, attach one to their common parent. This can improve performance, especially if you have many buttons, as it reduces the number of event listeners in memory.
Ready to Use This Project?
Click the button below to download the full source code. Download will be ready in 10 seconds.