آموزش ساخت ماشین حساب با جاوااسکریپت

<!-- ساختار اصلی ماشین حساب -->
<div class="calculator">
    <input type="text" class="display" disabled>
    <div class="buttons">
        <button class="btn" data-value="7">7</button>
        <button class="btn" data-value="8">8</button>
        <button class="btn" data-value="9">9</button>
        <button class="btn operator" data-value="+">+</button>
        <!-- سایر دکمه‌ها -->
    </div>
</div>

.calculator {
    width: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}
.display {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    text-align: right;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

// انتخاب المان‌های مورد نیاز
const display = document.querySelector('.display');
const buttons = document.querySelectorAll('.btn');
// متغیرهای محاسبات
let currentInput = '';
let firstOperand = null;
let operator = null;
let waitingForSecondOperand = false;
// افزودن رویداد کلیک به دکمه‌ها
buttons.forEach(button => {
    button.addEventListener('click', (e) => {
        const value = e.target.getAttribute('data-value');
        if (e.target.classList.contains('operator')) {
            handleOperator(value);
            return;
        }
        handleNumber(value);
        updateDisplay();
    });
});

function handleNumber(number) {
    if (waitingForSecondOperand) {
        currentInput = number;
        waitingForSecondOperand = false;
    }else {
        currentInput = currentInput === '' ? number : currentInput + number;
    }
}
function handleOperator(nextOperator) {
    const inputValue = parseFloat(currentInput);
    if (operator && waitingForSecondOperand) {
        operator = nextOperator;
        return;
    }
    if (firstOperand === null) {
        firstOperand = inputValue;
    }else {
        const result = calculate(firstOperand, inputValue, operator);
        currentInput = String(result);
        firstOperand = result;
    }
    waitingForSecondOperand = true;
    operator = nextOperator;
}

function calculate(firstOperand, secondOperand, operator) {
    switch (operator) {
        case '+':
            return firstOperand + secondOperand;
        case '-':
            return firstOperand - secondOperand;
        case '*':
            return firstOperand * secondOperand;
        case '/':
            return firstOperand / secondOperand;
        default:
            return secondOperand;
    }
}
function updateDisplay() {
    display.value = currentInput;
}

// دکمه پاک کردن (C)
function clearCalculator() {
    currentInput = '';
    firstOperand = null;
    operator = null;
    waitingForSecondOperand = false;
    updateDisplay();
}
// دکمه اعشار (.)
function inputDecimal(dot) {
    if (waitingForSecondOperand) {
        currentInput = '0.';
        waitingForSecondOperand = false;
        return;
    }
    if (!currentInput.includes(dot)) {
        currentInput += dot;
    }
}

// راهنمای پیاده‌سازی پشتیبانی از صفحه کلید
document.addEventListener('keydown', (e) => {
    if (e.key >= '0' && e.key <= '9') {
        handleNumber(e.key);
    }else {
        switch (e.key) {
            case '+':
            case '-':
            case '*':
            case '/':
                handleOperator(e.key);
                break;
            case '.':
                inputDecimal(e.key);
                break;
            case 'Enter':
                handleOperator('=');
                break;
        }
    }
    updateDisplay();
});