Skip to main content

Simple Calculator

This script uses javascript to create a simple calculator. No external API connection required.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .calculator {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            width: 300px;
        }

        .calculator .display {
            width: 100%;
            height: 50px;
            background: #f7f7f7;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
            text-align: right;
            padding: 10px;
            font-size: 1.5em;
            box-sizing: border-box;
        }

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

        .calculator button {
            height: 50px;
            font-size: 1.2em;
            background: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .calculator button:hover {
            background: #0056b3;
        }

        .calculator button.clear {
            background: #FF5722;
        }

        .calculator button.clear:hover {
            background: #e64a19;
        }

        .calculator button.equal {
            background: #4CAF50;
            grid-column: span 4;
        }

        .calculator button.equal:hover {
            background: #388e3c;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" id="display" readonly>
        <div class="buttons">
            <button onclick="appendNumber('7')">7</button>
            <button onclick="appendNumber('8')">8</button>
            <button onclick="appendNumber('9')">9</button>
            <button onclick="clearDisplay()" class="clear">C</button>
            <button onclick="appendNumber('4')">4</button>
            <button onclick="appendNumber('5')">5</button>
            <button onclick="appendNumber('6')">6</button>
            <button onclick="appendOperator('*')">*</button>
            <button onclick="appendNumber('1')">1</button>
            <button onclick="appendNumber('2')">2</button>
            <button onclick="appendNumber('3')">3</button>
            <button onclick="appendOperator('-')">-</button>
            <button onclick="appendNumber('0')">0</button>
            <button onclick="appendOperator('.')">.</button>
            <button onclick="appendOperator('+')">+</button>
            <button onclick="appendOperator('/')">/</button>
            <button onclick="calculateResult()" class="equal">=</button>
        </div>
    </div>

    <script>
    // Get reference to the calculator's display input element
    const display = document.getElementById('display');

    /**
     * Appends a number to the calculator display
     * @param {number} number - The number to append
     */
    function appendNumber(number) {
        display.value += number;
    }

    /**
     * Appends an operator to the calculator display
     * Prevents adding multiple operators consecutively
     * @param {string} operator - The mathematical operator to append (+, -, *, /, .)
     */
    function appendOperator(operator) {
        const lastChar = display.value.slice(-1);
        // Check if last character is already an operator to prevent double operators
        if ('+-*/.'.includes(lastChar)) return;
        display.value += operator;
    }

    /**
     * Calculates and displays the result of the mathematical expression
     * Uses eval() to compute the result
     * Displays 'Error' if the expression is invalid
     */
    function calculateResult() {
        try {
            display.value = eval(display.value);
        } catch (error) {
            display.value = 'Error';
        }
    }

    /**
     * Clears the calculator display
     */
    function clearDisplay() {
        display.value = '';
    }
</script>

</body>
</html>