Building a Simple Calculator App with HTML, CSS, and JavaScript

Creating a simple calculator app is an excellent project for beginners to learn the basics of web development. This article will guide you through building a basic calculator using HTML for structure, CSS for styling, and JavaScript for functionality.

Step 1: Setting Up the HTML

First, we’ll create the structure of our calculator using HTML. Create an index.html file with the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Supportbook.com Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="calculator-screen" value="" disabled />
        <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>

            <button type="button" value="7">7</button>
            <button type="button" value="8">8</button>
            <button type="button" value="9">9</button>

            <button type="button" value="4">4</button>
            <button type="button" value="5">5</button>
            <button type="button" value="6">6</button>

            <button type="button" value="1">1</button>
            <button type="button" value="2">2</button>
            <button type="button" value="3">3</button>

            <button type="button" value="0">0</button>
            <button type="button" value=".">.</button>
            <button type="button" class="all-clear" value="all-clear">AC</button>

            <button type="button" class="equal-sign operator" value="=">=</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

This code sets up the basic structure of our calculator with an input field for the display and buttons for numbers, operators, and control actions.

Step 2: Styling with CSS

Next, we’ll style our calculator to make it look more appealing. Create a styles.css file and add the following CSS:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f9;
}

.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.calculator-screen {
    width: 100%;
    height: 40px;
    border: none;
    background-color: #252525;
    color: #fff;
    text-align: right;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 24px;
    margin-bottom: 10px;
}

.calculator-keys button {
    width: 75px;
    height: 75px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    background-color: #e0e1e6;
    font-size: 24px;
}

.calculator-keys .operator {
    background-color: #ff9500;
    color: #fff;
}

.calculator-keys .all-clear {
    background-color: #ff3b30;
    color: #fff;
}

.calculator-keys .equal-sign {
    background-color: #4cd964;
    color: #fff;
}

This CSS centers the calculator on the page, styles the buttons, and provides a nice look and feel to the calculator.

Step 3: Adding Functionality with JavaScript

Finally, let’s add the functionality using JavaScript. Create a script.js file and add the following code:

document.addEventListener('DOMContentLoaded', function () {
    const calculator = {
        displayValue: '0',
        firstOperand: null,
        waitingForSecondOperand: false,
        operator: null,
    };

    function updateDisplay() {
        const display = document.querySelector('.calculator-screen');
        display.value = calculator.displayValue;
    }

    updateDisplay();

    const keys = document.querySelector('.calculator-keys');
    keys.addEventListener('click', (event) => {
        const { target } = event;
        const { value } = target;

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

        switch (value) {
            case '+':
            case '-':
            case '*':
            case '/':
            case '=':
                handleOperator(value);
                break;
            case '.':
                inputDecimal(value);
                break;
            case 'all-clear':
                resetCalculator();
                break;
            default:
                if (Number.isInteger(parseFloat(value))) {
                    inputDigit(value);
                }
        }

        updateDisplay();
    });

    function inputDigit(digit) {
        const { displayValue, waitingForSecondOperand } = calculator;

        if (waitingForSecondOperand === true) {
            calculator.displayValue = digit;
            calculator.waitingForSecondOperand = false;
        } else {
            calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
        }
    }

    function inputDecimal(dot) {
        if (calculator.waitingForSecondOperand === true) {
            calculator.displayValue = '0.';
            calculator.waitingForSecondOperand = false;
            return;
        }

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

    function handleOperator(nextOperator) {
        const { firstOperand, displayValue, operator } = calculator;
        const inputValue = parseFloat(displayValue);

        if (operator && calculator.waitingForSecondOperand) {
            calculator.operator = nextOperator;
            return;
        }

        if (firstOperand == null) {
            calculator.firstOperand = inputValue;
        } else if (operator) {
            const currentValue = firstOperand || 0;
            const result = performCalculation[operator](currentValue, inputValue);

            calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
            calculator.firstOperand = result;
        }

        calculator.waitingForSecondOperand = true;
        calculator.operator = nextOperator;
    }

    const performCalculation = {
        '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
        '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
        '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
        '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
        '=': (firstOperand, secondOperand) => secondOperand,
    };

    function resetCalculator() {
        calculator.displayValue = '0';
        calculator.firstOperand = null;
        calculator.waitingForSecondOperand = false;
        calculator.operator = null;
    }
});

This JavaScript code handles the calculator’s functionality, including digit and operator inputs, decimal points, and the all-clear function. It updates the display based on user interactions.

Putting It All Together

By combining the HTML, CSS, and JavaScript files, you now have a fully functional calculator. Open index.html in your browser to see the calculator in action. This project is a great way to practice web development skills and understand how different technologies work together to create interactive applications.

Feel free to expand and customize the calculator further, adding more features or improving the design. Happy coding!