How to Make a Calculator Using HTML, CSS, and JavaScript

Building a calculator is one of the best projects for beginners learning web development. It teaches you the three core technologies HTML for structure, CSS for styling, and JavaScript for functionality all in one practical project.

In this guide, you’ll learn how to make a calculator using HTML, step by step. No prior experience is needed. Just follow along, and by the end, you’ll have a fully working calculator you can use and share.

What You’ll Build

We’re going to create a simple calculator that can:

Add, subtract, multiply, and divide
Clear the display
Handle decimal points
Work on both desktop and mobile devices

Here’s what the final calculator will look like:

Step 1: Set Up Your Project

First, create a folder on your computer called calculator-project. Inside this folder, create three files:

File Name	Purpose
`index.html`	The structure of the calculator
`style.css`	The visual design
`script.js`	The functionality

Separating HTML, CSS, and JavaScript makes your code organized, easier to read, and easier to update later.

Step 2: Build the HTML Structure

Open index.html and add this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
        <input type="text" class="display" id="display" readonly>
        <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 operator" 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 operator" 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 operator" data-value="-">−</button>
            
            <button class="btn" data-value="0">0</button>
            <button class="btn" data-value=".">.</button>
            <button class="btn equals" data-value="=">=</button>
            <button class="btn operator" data-value="+">+</button>
            
            <button class="btn clear" id="clear">C</button>
            <button class="btn backspace" id="backspace">⌫</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

The <input> element is the display screen where numbers appear.
The readonly attribute means users can’t type directly into the screen – they have to use buttons.
Each button has a data-value attribute that tells us what number or symbol it represents.
We’re using class names to style buttons differently. Operator buttons look different from number buttons, and the clear button looks different too.

Step 3: Style with CSS

Open style.css and add this code:

/* Reset and base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f0f4f8;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Calculator container */
.calculator {
    background: #1a2332;
    border-radius: 20px;
    padding: 20px;
    width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Display */
.display {
    width: 100%;
    height: 70px;
    background: #0b1a2b;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 36px;
    text-align: right;
    padding: 0 20px;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace;
}

/* Button grid */
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* All buttons */
.btn {
    padding: 18px;
    font-size: 22px;
    border: none;
    border-radius: 12px;
    background: #2a3a4a;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
}

.btn:hover {
    background: #3a4a5a;
    transform: scale(1.02);
}

.btn:active {
    transform: scale(0.95);
}

/* Operator buttons */
.operator {
    background: #3a5a7a;
}

.operator:hover {
    background: #4a6a8a;
}

/* Equals button */
.equals {
    background: #2563eb;
}

.equals:hover {
    background: #1d4ed8;
}

/* Clear button */
.clear {
    background: #dc2626;
}

.clear:hover {
    background: #b91c1c;
}

/* Backspace button */
.backspace {
    background: #6b7a8e;
}

.backspace:hover {
    background: #5a6a7e;
}

/* Make it responsive */
@media (max-width: 400px) {
    .calculator {
        width: 95%;
        padding: 15px;
    }
    
    .btn {
        padding: 14px;
        font-size: 18px;
    }
    
    .display {
        font-size: 28px;
        height: 60px;
    }
}

Step 4: Make It Work with JavaScript

Open script.js and add this code:

// Get references to the display and all buttons
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.btn');
const clearBtn = document.getElementById('clear');
const backspaceBtn = document.getElementById('backspace');

// Store the current expression
let currentInput = '';
let operator = '';
let previousInput = '';
let resultDisplayed = false;

// Add click event to every button
buttons.forEach(button => {
    button.addEventListener('click', function() {
        const value = this.dataset.value;
        handleInput(value);
    });
});

// Main input handler
function handleInput(value) {
    if (value === '=') {
        calculate();
        return;
    }
    
    if (value === '+' || value === '-' || value === '*' || value === '/') {
        handleOperator(value);
        return;
    }
    
    if (value === '.') {
        handleDecimal();
        return;
    }
    
    handleNumber(value);
}

// Handle number input
function handleNumber(value) {
    if (resultDisplayed) {
        currentInput = '';
        resultDisplayed = false;
    }
    currentInput += value;
    updateDisplay(currentInput);
}

// Handle operator input
function handleOperator(op) {
    if (currentInput === '') return;
    if (previousInput !== '') {
        calculate();
    }
    operator = op;
    previousInput = currentInput;
    currentInput = '';
}

// Handle decimal point
function handleDecimal() {
    if (resultDisplayed) {
        currentInput = '0';
        resultDisplayed = false;
    }
    if (!currentInput.includes('.')) {
        currentInput += '.';
        updateDisplay(currentInput);
    }
}

// Perform the calculation
function calculate() {
    if (previousInput === '' || currentInput === '') return;
    
    const num1 = parseFloat(previousInput);
    const num2 = parseFloat(currentInput);
    let result = 0;
    
    switch(operator) {
        case '+': result = num1 + num2; break;
        case '-': result = num1 - num2; break;
        case '*': result = num1 * num2; break;
        case '/': 
            if (num2 === 0) {
                updateDisplay('Error');
                clearAll();
                return;
            }
            result = num1 / num2; 
            break;
        default: return;
    }
    
    // Handle floating point precision
    result = parseFloat(result.toFixed(10));
    updateDisplay(result);
    currentInput = String(result);
    previousInput = '';
    operator = '';
    resultDisplayed = true;
}

// Clear everything
function clearAll() {
    currentInput = '';
    previousInput = '';
    operator = '';
    resultDisplayed = false;
    updateDisplay('0');
}

// Backspace functionality
function backspace() {
    if (resultDisplayed) {
        clearAll();
        return;
    }
    currentInput = currentInput.slice(0, -1);
    updateDisplay(currentInput || '0');
}

// Update display
function updateDisplay(value) {
    display.value = value;
}

// Clear button
clearBtn.addEventListener('click', clearAll);

// Backspace button
backspaceBtn.addEventListener('click', backspace);

// Keyboard support
document.addEventListener('keydown', function(e) {
    const key = e.key;
    if (key >= '0' && key <= '9') {
        handleInput(key);
    } else if (key === '.') {
        handleInput('.');
    } else if (key === '+' || key === '-' || key === '*' || key === '/') {
        handleInput(key);
    } else if (key === 'Enter' || key === '=') {
        e.preventDefault();
        handleInput('=');
    } else if (key === 'Backspace') {
        backspace();
    } else if (key === 'Escape' || key === 'Delete') {
        clearAll();
    }
});

Step 5: Test Your Calculator

Open index.html in your browser and try:

Adding numbers: 2 + 3 = 5
Subtracting: 10 - 4 = 6
Multiplying: 3 × 4 = 12
Dividing: 15 ÷ 3 = 5
Decimals: 5.5 + 4.5 = 10
Division by zero: Shows “Error”
Clear: Resets everything
Backspace: Removes the last digit

Congratulations! You’ve built a fully working calculator using HTML, CSS, and JavaScript. This is a big achievement for a beginner.

The skills you learned here working with the DOM, handling events, and building interactive interfaces are the foundation for more advanced projects.

Want to go further? Try building a BMI calculator or a unit converter using the same three technologies. The more you practice, the better you’ll get.

How to Make a Calculator Using HTML, CSS, and JavaScript – A Beginner’s Guide