JavaScript Calculator

The calculator provides a simple interface for basic arithmetic operations: addition, subtraction, multiplication, and division.

Internally, the application keeps track of the first number, second number, selected operator, and whether the user is currently entering the second value.

This makes it a good example of small-scale frontend state management using plain JavaScript, without relying on frameworks or external libraries.

• Basic arithmetic operations: +, -, *, /
• Separate display areas for current input and expression history
• Clear/reset functionality using AC
• Division-by-zero protection
• Built with HTML, CSS, and vanilla JavaScript
• Simple event-driven UI logic

Below is the calculator running directly in the page.

The calculator uses click event listeners on number buttons and operator buttons to update a small set of internal variables.

When the user selects an operator, the interface switches from collecting the first number to collecting the second number. Pressing equals runs the calculation function and outputs the result to the display.

The application also protects against division by zero by returning a clear message rather than allowing an invalid mathematical result to be shown silently.

Below is the JavaScript used to manage calculator state and execute the arithmetic logic.

let firstNumber = '';
let secondNumber = '';
let operator = '';
let isSecondNumber = false;

const numberButtons = document.querySelectorAll('.numberButton');
const calcButtons = document.querySelectorAll('.calcButton');
const topText = document.querySelector('.info-box-top-text');
const bottomText = document.querySelector('.info-box-bottom-text');

numberButtons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.textContent;

        if (value === 'AC') {
            firstNumber = '';
            secondNumber = '';
            operator = '';
            isSecondNumber = false;
            topText.textContent = '';
            bottomText.textContent = '';
        } else if (value === '=') {
            if (firstNumber && secondNumber && operator) {
                const result = calculate(Number(firstNumber), Number(secondNumber), operator);
                topText.textContent = `${firstNumber} ${operator} ${secondNumber}`;
                bottomText.textContent = result;
                firstNumber = result.toString();
                secondNumber = '';
                operator = '';
                isSecondNumber = false;
            }
        } else {
            if (!isSecondNumber) {
                firstNumber += value;
                bottomText.textContent = firstNumber;
            } else {
                secondNumber += value;
                bottomText.textContent = secondNumber;
            }
        }
    });
});

calcButtons.forEach(button => {
    button.addEventListener('click', () => {
        if (firstNumber) {
            operator = button.textContent;
            isSecondNumber = true;
            topText.textContent = `${firstNumber} ${operator}`;
        }
    });
});

function calculate(num1, num2, op) {
    switch(op) {
        case '+': return num1 + num2;
        case '-': return num1 - num2;
        case '*': return num1 * num2;
        case '/':
            if (num2 === 0) {
                return 'Cannot Divide by Zero';
            }
            return num1 / num2;
        default: return 0;
    }
}

• JavaScript fundamentals: Event listeners, state tracking, and DOM updates.
• UI interaction: Building a usable input and output flow for a small tool.
• Conditional logic: Managing calculator rules and operator handling.
• Error handling: Providing clear feedback for invalid division operations.