Live Code Editor

Try it yourself..

Building a Responsive and Attractive Calculator with HTML, CSS, and JavaScript

Creating a calculator is a great project to enhance your front-end development skills. In this article, we will build a responsive and attractive calculator using HTML, CSS, and JavaScript. We'll cover the following steps:

Setting up the HTML structure.

Styling the calculator with CSS for a modern look.

Implementing JavaScript to handle the calculator logic.

Making the design responsive.

HTML

<div class="calculator">
        <input type="text" class="calculator-screen" id="calculator-screen" disabled>
        <div class="calculator-history" id="calculator-history"></div>
        <div class="calculator-keys">
            <button type="button" class="operator" value="+">+</button>
            <button type="button" class="operator" value="-">-</button>
            <button type="button" class="operator" value="*">&times;</button>
            <button type="button" class="operator" value="/">&divide;</button>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f3f4f6;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

.calculator {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

.calculator-screen {
    width: 100%;
    height: 60px;
    background-color: #252525;
    color: white;
    border: none;
    padding: 10px;
    font-size: 2em;
    text-align: right;
    border-radius: 5px;
    margin-bottom: 10px;
}

.calculator-history {
    width: 100%;
    height: 50px;
    background-color: #f9f9f9;
    color: black;
    border: none;
    padding: 10px;
    font-size: 1em;
    text-align: right;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow-y: auto;
}

.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    width: 100%;
}

button {
    height: 60px;
    font-size: 1.5em;
    border: none;
    border-radius: 5px;
    background-color: #e0e0e0;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

button.operator {
    background-color: #ff9500;
    color: white;
}

button.equal-sign {
    background-color: #28a745;
    color: white;
    grid-column: span 2;
}

button.all-clear {
    background-color: #dc3545;
    color: white;
}

button:hover {
    background-color: #d4d4d4;
    transform: scale(1.05);
}

@media (max-width: 600px) {
    .calculator {
        padding: 15px;
    }

.calculator-screen, .calculator-history {
        height: 50px;
        font-size: 1.5em;
    }

button {
        height: 50px;
        font-size: 1.2em;
    }
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const calculatorScreen = document.getElementById('calculator-screen');
    const calculatorHistory = document.getElementById('calculator-history');
    const keys = document.querySelector('.calculator-keys');
    let currentInput = '0';
    let operator = '';
    let previousInput = '';
    let calculationHistory = [];
    let shouldResetScreen = false;

keys.addEventListener('click', function(event) {
        const { target } = event;
        const { value } = target;

if (!target.matches('button')) {
            return;
        }

switch (value) {
            case '+':
            case '-':
            case '*':
            case '/':
                handleOperator(value);
                break;
            case '=':
                calculate();
                break;
            case 'all-clear':
                clear();
                break;
            case '.':
                inputDecimal(value);
                break;
            default:
                inputNumber(value);
                break;
        }
        updateScreen();
    });

function handleOperator(nextOperator) {
        if (operator && shouldResetScreen) {
            operator = nextOperator;
            return;
        }

if (previousInput === '') {
            previousInput = currentInput;
        } else if (!shouldResetScreen) {
            calculate();
        }

operator = nextOperator;
        shouldResetScreen = true;
    }

function calculate() {
        if (operator === '' || shouldResetScreen) return;

const prev = parseFloat(previousInput);
        const current = parseFloat(currentInput);
        let result;

switch (operator) {
            case '+':
                result = prev + current;
                break;
            case '-':
                result = prev - current;
                break;
            case '*':
                result = prev * current;
                break;
            case '/':
                result = prev / current;
                break;
            default:
                return;
        }

currentInput = String(result);
        calculationHistory.push(`${previousInput} ${operator} ${current} = ${result}`);
        updateHistory();
        operator = '';
        previousInput = '';
        shouldResetScreen = true;
    }

function clear() {
        currentInput = '0';
        operator = '';
        previousInput = '';
        shouldResetScreen = false;
    }

function inputDecimal(dot) {
        if (shouldResetScreen) {
            currentInput = '0';
            shouldResetScreen = false;
        }

if (!currentInput.includes(dot)) {
            currentInput += dot;
        }
    }

function updateScreen() {
        calculatorScreen.value = currentInput;
    }

function updateHistory() {
        calculatorHistory.innerHTML = calculationHistory.join('<br>');
    }
});

Live Code Editor

Building a Responsive and Attractive Calculator with HTML, CSS, and JavaScript

HTML

CSS

JavaScript

Output