31- آموزش جاوااسکریپت | پروژه عملی :ساخت ماشین‌حساب وام (Loan Calculator)

در این آموزش، قصد داریم پروژه‌ای بسازیم که فراتر از مفاهیم پایه DOM عمل می‌کند. هدف ما ساخت یک ماشین‌حساب وام است که به کاربر اجازه می‌دهد با وارد کردن مبلغ وام، نرخ بهره و مدت زمان بازپرداخت، اقساط ماهیانه و کل مبلغ بازپرداخت را مشاهده کند.

۱. راه‌اندازی رابط کاربری (HTML & Bootstrap)

ابتدا ساختار HTML را با استفاده از فریم‌ورک Bootstrap نسخه ۴ ایجاد می‌کنیم. برای اینکه صفحه ظاهر مرتب و حرفه‌ای داشته باشد، فرم‌ها را در یک Card مرکزی قرار می‌دهیم.

<!-- ساختار HTML -->
<div class="container">
    <div class="row">
        <div class="col-md-6 mx-auto">
            <div class="card card-body text-center mt-5">
                <h1 class="heading display-5 pb-3">Loan Calculator</h1>
                <form id="loan-form">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            <input type="number" class="form-control" id="amount" placeholder="Loan Amount">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">%</span>
                            <input type="number" class="form-control" id="interest" placeholder="Interest">
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="number" class="form-control" id="years" placeholder="Years to Repay">
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Calculate" class="btn btn-dark btn-block">
                    </div>
                </form>
                <!-- Loader -->
                <div id="loading">
                    <img src="img/loading.gif" alt="">
                </div>
                <!-- Results -->
                <div id="results" class="pt-4">
                    <h5>Results</h5>
                    <div class="form-group">
                        <input type="number" class="form-control" id="monthly-payment" disabled>
                    </div>
                    <div class="form-group">
                        <input type="number" class="form-control" id="total-payment" disabled>
                    </div>
                    <div class="form-group">
                        <input type="number" class="form-control" id="total-interest" disabled>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

۲. پیاده‌سازی منطق محاسباتی (JavaScript Logic)

برای محاسبات وام، از تابع Math.pow استفاده می‌کنیم. نکته مهم در اینجا، تبدیل مقادیر ورودی رشته‌ای به عدد با استفاده از parseFloat است.

// شنونده رویداد برای فرم
document.getElementById('loan-form').addEventListener('submit', function(e){
    // مخفی کردن نتایج و نمایش لودر
    document.getElementById('results').style.display = 'none';
    document.getElementById('loading').style.display = 'block';

    setTimeout(calculateResults, 2000); // تأخیر برای شبیه‌سازی پردازش
    e.preventDefault();
});

function calculateResults() {
    // انتخاب عناصر UI
    const amount = document.getElementById('amount');
    const interest = document.getElementById('interest');
    const years = document.getElementById('years');
    const monthlyPayment = document.getElementById('monthly-payment');
    
    // محاسبات ریاضی
    const principal = parseFloat(amount.value);
    const calculatedInterest = parseFloat(interest.value) / 100 / 12;
    const calculatedPayments = parseFloat(years.value) * 12;

    const x = Math.pow(1 + calculatedInterest, calculatedPayments);
    const monthly = (principal * x * calculatedInterest) / (x - 1);

    if(isFinite(monthly)) {
        monthlyPayment.value = monthly.toFixed(2);
        // نمایش نتایج
        document.getElementById('results').style.display = 'block';
        document.getElementById('loading').style.display = 'none';
    } else {
        showError('Please check your numbers');
    }
}

۳. مدیریت خطا و تجربه کاربری (UX)

برای مدیریت خطاها، به جای استفاده از alertهای معمولی، یک المان div به صورت داینامیک ایجاد کرده و در صفحه تزریق می‌کنیم. همچنین از setTimeout برای حذف خودکار پیام خطا پس از ۳ ثانیه استفاده می‌کنیم تا تجربه کاربری بهتری داشته باشیم.

function showError(error) {
    // مخفی کردن نتایج و لودر هنگام خطا
    document.getElementById('results').style.display = 'none';
    document.getElementById('loading').style.display = 'none';

    // ایجاد المان خطا
    const errorDiv = document.createElement('div');
    errorDiv.className = 'alert alert-danger';
    errorDiv.appendChild(document.createTextNode(error));

    // تزریق خطا به DOM
    const card = document.querySelector('.card');
    const heading = document.querySelector('.heading');
    card.insertBefore(errorDiv, heading);

    // حذف خودکار پیام خطا پس از 3 ثانیه
    setTimeout(function(){
        document.querySelector('.alert').remove();
    }, 3000);
}

این پروژه به شما درک عمیقی از تعامل با DOM، کار با توابع window (مانند setTimeout) و پیاده‌سازی منطق ریاضی در برنامه‌نویسی سمت کلاینت می‌دهد.