app.js

//Submit event
document.getElementById('loan-form').addEventListener('submit', function(e){
    //HIde results
    document.getElementById('results').style.display = 'none';
    //Show loader
    document.getElementById('loading').style.display = 'block';

    setTimeout(calculateResults, 3000);

    e.preventDefault();
});

//Calculate results
function calculateResults(){
    //IU variables
    const amount = document.getElementById('amount');
    const interest = document.getElementById('interest');
    const years = document.getElementById('years');
    const monthPayment = document.getElementById('monthly-pay');
    const totalPay = document.getElementById('total-pay');
    const totalInterest = document.getElementById('total-interest');

    const principal = parseFloat(amount.value);
    const calculatedInterest = parseFloat(interest.value) / 100 / 12;
    const calculatedPayment = parseFloat(years.value) * 12;

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

    if(isFinite(monthly)){
        monthPayment.value = monthly.toFixed(2);
        totalPay.value = (monthly*calculatedPayment).toFixed(2);
        totalInterest.value = ((monthly*calculatedPayment) - principal).toFixed(2);
        //Show results
        document.getElementById('results').style.display = 'block';
        //Hide loader
        document.getElementById('loading').style.display = 'none';
    } else {
        showError('Check your numbers');
    }
}

//Show error
function showError(error){
    //Hide results
    document.getElementById('results').style.display = 'none';
    //Hide loader
    document.getElementById('loading').style.display = 'none';
    //Create a div
    const errorDiv = document.createElement('div');
    //Get elements
    const card = document.querySelector('.card');
    const heading = document.querySelector('.heading');
    //Add class
    errorDiv.className = 'alert alert-danger';
    //Create text node and append to div
    errorDiv.appendChild(document.createTextNode(error));
    //Insert error above heading
    card.insertBefore(errorDiv, heading);
    //Clear error
    setTimeout(clearError, 2500)
}
//Clear error
function clearError(){
    document.querySelector('.alert').remove();
}