JavaScript Calculator App (original) (raw)

Last Updated : 23 Jul, 2025

To build a simple calculator using JavaScript, we need to handle basic arithmetic operations such as addition, subtraction, multiplication, and division. JavaScript, along with HTML and CSS, is commonly used to create interactive web-based calculators.

What We Are Going to Create

We will build a simple and functional calculator that will feature

Project Preview

Screenshot-2025-03-08-152454

JavaScript Calculator App

Calculator - HTML Structure & CSS Styles

HTML `

C / * - 
        <button class="button" onclick="appendNumber('7')">7</button>
        <button class="button" onclick="appendNumber('8')">8</button>
        <button class="button" onclick="appendNumber('9')">9</button>
        <button class="button operator" onclick="appendOperation('+')">+</button>

        <button class="button" onclick="appendNumber('4')">4</button>
        <button class="button" onclick="appendNumber('5')">5</button>
        <button class="button" onclick="appendNumber('6')">6</button>
        <button class="button equal" onclick="calculate()">=</button>

        <button class="button" onclick="appendNumber('1')">1</button>
        <button class="button" onclick="appendNumber('2')">2</button>
        <button class="button" onclick="appendNumber('3')">3</button>
        <button class="button" onclick="appendNumber('0')">0</button>
    </div>
</div>

<script>
    let currentInput = '';
    let currentOperation = '';
    let previousInput = '';

    function appendNumber(number) {
        currentInput += number;
        document.getElementById('display').value = `${previousInput} <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>c</mi><mi>u</mi><mi>r</mi><mi>r</mi><mi>e</mi><mi>n</mi><mi>t</mi><mi>O</mi><mi>p</mi><mi>e</mi><mi>r</mi><mi>a</mi><mi>t</mi><mi>i</mi><mi>o</mi><mi>n</mi></mrow><annotation encoding="application/x-tex">{currentOperation} </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8778em;vertical-align:-0.1944em;"></span><span class="mord"><span class="mord mathnormal">c</span><span class="mord mathnormal">u</span><span class="mord mathnormal">rre</span><span class="mord mathnormal">n</span><span class="mord mathnormal">tOp</span><span class="mord mathnormal" style="margin-right:0.02778em;">er</span><span class="mord mathnormal">a</span><span class="mord mathnormal">t</span><span class="mord mathnormal">i</span><span class="mord mathnormal">o</span><span class="mord mathnormal">n</span></span></span></span></span>{currentInput}`;
    }

    function appendOperation(operation) {
        if (currentInput === '') return;
        if (previousInput !== '') {
            calculate(); // Calculate the previous operation before appending a new one
        }
        currentOperation = operation;
        previousInput = currentInput;
        currentInput = '';
        document.getElementById('display').value = `${previousInput} ${currentOperation}`;
    }

    function calculate() {
        if (previousInput === '' || currentInput === '') return;
        let result;
        let prev = parseFloat(previousInput);
        let current = parseFloat(currentInput);

        switch (currentOperation) {
            case '+':
                result = prev + current;
                break;
            case '-':
                result = prev - current;
                break;
            case '*':
                result = prev * current;
                break;
            case '/':
                if (current === 0) {
                    alert("Cannot divide by zero");
                    return;
                }
                result = prev / current;
                break;
            default:
                return;
        }

        currentInput = result.toString();
        currentOperation = '';
        previousInput = '';
        document.getElementById('display').value = currentInput;
    }

    function clearDisplay() {
        currentInput = '';
        previousInput = '';
        currentOperation = '';
        document.getElementById('display').value = '';
    }
</script>

``

**Output

Features of the JavaScript Calculator