آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی

< ! DOCTYPE html >
< html lang="fa" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < title > ماشین حساب < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .calculator {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .display {
            width: 100%;
            height: 50px;
            margin-bottom: 10px;
            text-align: right;
            font-size: 24px;
            padding: 10px;
            background-color: #eaeaea;
            border-radius: 5px;
            border: none;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
        }
        .buttons button {
            width: 100%;
            padding: 20px;
            font-size: 18px;
            cursor: pointer;
            border-radius: 5px;
            border: 1px solid #ddd;
            background-color: #f0f0f0;
            transition: background-color 0.2s;
        }
        .buttons button:hover {
            background-color: #ddd;
        }
        .buttons .equals {
            background-color: #28a745;
            color: white;
        }
        .buttons .equals:hover {
            background-color: #218838;
        }
    < / style >
< / head >
< body >
    < div class="calculator" >
        < input type="text" id="display" class="display" disabled >
        < div class="buttons" >
            < button > 7 < / button >
            < button > 8 < / button >
            < button > 9 < / button >
            < button > / < / button >
            < button > 4 < / button >
            < button > 5 < / button >
            < button > 6 < / button >
            < button > * < / button >
            < button > 1 < / button >
            < button > 2 < / button >
            < button > 3 < / button >
            < button > - < / button >
            < button > 0 < / button >
            < button > . < / button >
            < button class="equals" > = < / button >
            < button > + < / button >
            < button class="clear" > C < / button >
        < / div >
    < / div >

    < script src="app.js" > < / script >
< / body >
< / html >

// دسترسی به المان‌های صفحه
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.buttons button');

let currentInput = ''; // ورودی فعلی کاربر
let operator = null; // عملگر فعلی
let previousInput = ''; // ورودی قبلی

// اضافه کردن رویداد کلیک به تمامی دکمه‌ها
buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.textContent;

        // اگر دکمه عدد یا نقطه باشد
        if (!isNaN(value) || value === '.') {
            currentInput += value;
            display.value = currentInput;
        }

        // اگر دکمه عملگر باشد
        if (value === '+' || value === '-' || value === '*' || value === '/') {
            operator = value;
            previousInput = currentInput;
            currentInput = ''; // برای ورودی جدید
        }

        // اگر دکمه مساوی باشد
        if (value === '=') {
            if (operator && previousInput) {
                const result = calculate(previousInput, currentInput, operator);
                display.value = result;
                currentInput = result; // نتیجه به عنوان ورودی جدید
                previousInput = '';
                operator = null;
            }
        }

        // اگر دکمه پاک کردن باشد
        if (value === 'C') {
            clear();
        }
    });
});

// تابع انجام محاسبات
function calculate(a, b, operator) {
    a = parseFloat(a);
    b = parseFloat(b);
    switch (operator) {
        case '+':
            return a + b;
        case '-':
            return a - b;
        case '*':
            return a * b;
        case '/':
            return b !== 0 ? a / b : 'خطا';
    }
}

// تابع پاک کردن نمایشگر
function clear() {
    currentInput = '';
    previousInput = '';
    operator = null;
    display.value = '';
}