What You'll Learn
- How to structure HTML for a calculator layout
- CSS Grid for button arrangement
- JavaScript event handling and DOM manipulation
- Working with strings and mathematical operations
- Implementing clear, delete, and equals functions
- Making a responsive, mobile-friendly design
Step-by-Step Tutorial
1 Create the HTML Structure
Start by creating the basic HTML structure for the calculator. We need a display area and buttons for numbers and operations.
<div class="calculator">
<div class="calculator-display" id="display">0</div>
<div class="calculator-buttons">
<button class="calc-btn clear" onclick="clearDisplay()">AC</button>
<button class="calc-btn operator" onclick="deleteLast()">DEL</button>
<!-- Add more buttons... -->
</div>
</div>
2 Style with CSS
Use CSS Grid to arrange buttons and create an attractive dark theme design.
.calculator {
background: linear-gradient(145deg, #1e293b, #0f172a);
padding: 1.5rem;
border-radius: 16px;
max-width: 400px;
}
.calculator-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.calc-btn {
padding: 1.5rem;
font-size: 1.3rem;
border-radius: 12px;
cursor: pointer;
}
3 Add JavaScript Functionality
Create functions to handle number input, operations, and calculations.
let currentInput = '0';
function appendNumber(num) {
if (currentInput === '0') {
currentInput = num;
} else {
currentInput += num;
}
updateDisplay();
}
function appendOperator(op) {
currentInput += ' ' + op + ' ';
updateDisplay();
}
function calculate() {
try {
currentInput = eval(currentInput).toString();
updateDisplay();
} catch {
currentInput = 'Error';
updateDisplay();
}
}
4 Implement Clear and Delete
Add functions to clear the display and delete the last character.
function clearDisplay() {
currentInput = '0';
updateDisplay();
}
function deleteLast() {
if (currentInput.length > 1) {
currentInput = currentInput.slice(0, -1);
} else {
currentInput = '0';
}
updateDisplay();
}
function updateDisplay() {
document.getElementById('display').textContent = currentInput;
}
5 Test Your Calculator
Open your HTML file in a browser and test all functions:
- Try basic addition, subtraction, multiplication, division
- Test decimal numbers
- Verify the AC (clear) button resets to 0
- Check that DEL removes the last character
- Make sure it works on mobile devices
Complete Source Code
Copy and paste this complete code to create your calculator
<!DOCTYPE html>
<html>
<head>
<title>My Calculator</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.calculator {
background: linear-gradient(145deg, #1e293b, #0f172a);
padding: 1.5rem;
border-radius: 16px;
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.calculator-display {
background: #0f172a;
color: #10b981;
font-size: 2rem;
padding: 1.5rem;
border-radius: 12px;
text-align: right;
margin-bottom: 1rem;
min-height: 80px;
font-family: 'Courier New';
}
.calculator-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.calc-btn {
background: #475569;
border: none;
padding: 1.5rem;
font-size: 1.3rem;
border-radius: 12px;
cursor: pointer;
color: white;
font-weight: 600;
}
.calc-btn:hover { background: #64748b; }
.calc-btn.operator { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.calc-btn.equals { background: #10b981; grid-column: span 2; }
.calc-btn.clear { background: #ef4444; }
</style>
</head>
<body>
<div class="calculator">
<div class="calculator-display" id="display">0</div>
<div class="calculator-buttons">
<button class="calc-btn clear" onclick="clearDisplay()">AC</button>
<button class="calc-btn operator" onclick="deleteLast()">DEL</button>
<button class="calc-btn operator" onclick="appendOperator('/')">÷</button>
<button class="calc-btn operator" onclick="appendOperator('*')">×</button>
<button class="calc-btn" onclick="appendNumber('7')">7</button>
<button class="calc-btn" onclick="appendNumber('8')">8</button>
<button class="calc-btn" onclick="appendNumber('9')">9</button>
<button class="calc-btn operator" onclick="appendOperator('-')">−</button>
<button class="calc-btn" onclick="appendNumber('4')">4</button>
<button class="calc-btn" onclick="appendNumber('5')">5</button>
<button class="calc-btn" onclick="appendNumber('6')">6</button>
<button class="calc-btn operator" onclick="appendOperator('+')">+</button>
<button class="calc-btn" onclick="appendNumber('1')">1</button>
<button class="calc-btn" onclick="appendNumber('2')">2</button>
<button class="calc-btn" onclick="appendNumber('3')">3</button>
<button class="calc-btn equals" onclick="calculate()">=</button>
<button class="calc-btn" onclick="appendNumber('0')" style="grid-column: span 2;">0</button>
<button class="calc-btn" onclick="appendNumber('.')">.</button>
</div>
</div>
<script>
let currentInput = '0';
function updateDisplay() {
document.getElementById('display').textContent = currentInput;
}
function appendNumber(num) {
if (currentInput === '0') {
currentInput = num;
} else {
currentInput += num;
}
updateDisplay();
}
function appendOperator(op) {
currentInput += ' ' + op + ' ';
updateDisplay();
}
function clearDisplay() {
currentInput = '0';
updateDisplay();
}
function deleteLast() {
if (currentInput.length > 1) {
currentInput = currentInput.slice(0, -1);
} else {
currentInput = '0';
}
updateDisplay();
}
function calculate() {
try {
currentInput = eval(currentInput).toString();
updateDisplay();
} catch {
currentInput = 'Error';
updateDisplay();
setTimeout(() => {
currentInput = '0';
updateDisplay();
}, 1500);
}
}
</script>
</body>
</html>
Next Steps
- Add keyboard support so users can type numbers
- Implement memory functions (M+, M-, MR, MC)
- Add scientific calculator features (sin, cos, sqrt)
- Create a history feature to show past calculations
- Add theme switcher for light/dark mode
- Make it installable as a Progressive Web App (PWA)