js-dom-calculator/index.js

// Get DOM elements
const firstNum = document.getElementById('firstNum');
const secondNum = document.getElementById('secondNum');
const resultEl = document.getElementById('result');
const historyList = document.getElementById('historyList');
const clearHistoryBtn = document.getElementById('clear');

const opButtons = {
    add: document.getElementById('add'),
    sub: document.getElementById('sub'),
    mult: document.getElementById('mult'),
    div: document.getElementById('div'),
};

const memStore = document.getElementById('memStore');
const memRecall = document.getElementById('memRecall');
const memClear = document.getElementById('memClear');

// Global state
let history = [];
let memory = null;

// Enable operation buttons only when both inputs are filled
function validateInputs() {
    const hasValues = firstNum.value.trim() !== '' && secondNum.value.trim() !== '';
    Object.values(opButtons).forEach(btn => {
        btn.disabled = !hasValues;
    });
}

// Update button state on input
[firstNum, secondNum].forEach(input => {
    input.addEventListener('input', validateInputs);
});

// Perform operation
function calculate(operation) {
    const a = parseFloat(firstNum.value);
    const b = parseFloat(secondNum.value);
    if (isNaN(a) || isNaN(b)) {
        resultEl.textContent = 'Result: Invalid input';
        return;
    }

    let res;
    let symbol;
    switch (operation) {
        case 'add':
            res = a + b;
            symbol = '+';
            break;
        case 'sub':
            res = a - b;
            symbol = '-';
            break;
        case 'mult':
            res = a * b;
            symbol = '*';
            break;
        case 'div':
            if (b === 0) {
                resultEl.textContent = 'Result: Cannot divide by zero';
                return;
            }
            res = a / b;
            symbol = '÷';
            break;
    }

    resultEl.textContent = `Result: ${res}`;
    const historyItem = `${a} ${symbol} ${b} = ${res}`;
    history.push(historyItem);
    updateHistory();
}

// Add click listeners to op buttons
Object.entries(opButtons).forEach(([key, btn]) => {
    btn.addEventListener('click', () => calculate(key));
});

// Update history list and clear history button state
function updateHistory() {
    historyList.innerHTML = '';
    history.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        historyList.appendChild(li);
    });
    clearHistoryBtn.disabled = history.length === 0;
}

// Clear history
clearHistoryBtn.addEventListener('click', () => {
    history = [];
    updateHistory();
});

// Memory buttons
memStore.addEventListener('click', () => {
    const resText = resultEl.textContent;
    const value = parseFloat(resText.split(': ')[1]);
    if (!isNaN(value)) {
        memory = value;
        alert(`Memory Stored: ${memory}`);
    } else {
        alert('No valid result to store in memory.');
    }
});

memRecall.addEventListener('click', () => {
    if (memory !== null) {
        firstNum.value = memory;
        validateInputs();
        alert(`Memory Recalled: ${memory}`);
    } else {
        alert('Memory is empty.');
    }
});

memClear.addEventListener('click', () => {
    if (memory !== null) {
        memory = null;
        alert('Memory Cleared.');
    } else {
        alert('Memory is already empty.');
    }
});