Introduction
A calculator is a perfect beginner project to practice JavaScript and hone your programming skills. In this blog, we’ll create a basic calculator using HTML, CSS, and JavaScript. By the end, you’ll have a fully functional calculator that can perform simple arithmetic operations like addition, subtraction, multiplication, and division.
What You'll Learn
- Structuring a basic calculator layout with HTML.
- Styling the calculator with CSS.
- Adding functionality using JavaScript.
Calculator Preview:
1. Setting Up the HTML Structure
First, create the basic structure of the calculator with buttons for numbers and operations.
Example
<!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">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="btn" data-value="7">7</button>
<button class="btn" data-value="8">8</button>
<button class="btn" data-value="9">9</button>
<button class="btn" data-value="/">÷</button>
<button class="btn" data-value="4">4</button>
<button class="btn" data-value="5">5</button>
<button class="btn" data-value="6">6</button>
<button class="btn" data-value="*">×</button>
<button class="btn" data-value="1">1</button>
<button class="btn" data-value="2">2</button>
<button class="btn" data-value="3">3</button>
<button class="btn" data-value="-">−</button>
<button class="btn" data-value="0">0</button>
<button class="btn" data-value=".">.</button>
<button class="btn" data-value="C">C</button>
<button class="btn" data-value="+">+</button>
<button class="btn equals" data-value="=">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. Styling the Calculator with CSS
Let’s make the calculator look nice and tidy.
Example
/* styles.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.calculator {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.display {
background: #222;
color: #fff;
text-align: right;
padding: 20px;
font-size: 2em;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.btn {
padding: 20px;
border: 1px solid #ddd;
font-size: 1.2em;
cursor: pointer;
background: #f9f9f9;
transition: background 0.2s;
}
.btn:hover {
background: #eee;
}
.equals {
grid-column: span 4;
background: #ff5722;
color: #fff;
}
3. Adding Functionality with JavaScript
Now, we’ll add JavaScript to handle user input and perform calculations.
Example
// script.js
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.btn');
let currentInput = '';
let previousInput = '';
let operator = '';
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.getAttribute('data-value');
if (value === 'C') {
// Clear the calculator
currentInput = '';
previousInput = '';
operator = '';
display.innerText = '0';
} else if (value === '=') {
// Perform the calculation
if (currentInput && previousInput && operator) {
currentInput = eval(`${previousInput} ${operator} ${currentInput}`);
display.innerText = currentInput;
previousInput = '';
operator = '';
}
} else if (['+', '-', '*', '/'].includes(value)) {
// Store the operator
operator = value;
previousInput = currentInput;
currentInput = '';
} else {
// Append the number or decimal point
currentInput += value;
display.innerText = currentInput;
}
});
});
4. How It Works
- Input Handling: The JavaScript listens for button clicks and updates the display based on the button’s value.
- Arithmetic Operations: When an operator button (
+,-,*,/) is clicked, it stores the operator and the current input for calculation. - Result Calculation: Clicking
=evaluates the expression using JavaScript’seval()function and displays the result. - Clearing: The
Cbutton resets the calculator.
5. Challenges for You
Want to take it a step further? Try these:
- Add more operations: Implement modulo (%) and square root (√).
- Error handling: Prevent division by zero.
- Keyboard support: Allow users to input values using their keyboard.
Conclusion
Building a calculator is an excellent way to practice JavaScript and understand event handling, DOM manipulation, and basic arithmetic operations. With this foundation, you can enhance the calculator further by adding features or improving its design.
