app.js

let UIamount = document.getElementById('amount');
let UIinterest = document.getElementById('interest');
let UIyears = document.getElementById('years');
let UImonthlyPayment = document.getElementById('monthly-payment');
let UItotalPayment = document.getElementById('total-payment');
let UItotalInterest = document.getElementById('total-interest');

document.getElementById('loan-form').addEventListener('submit',function(e){
    //Hide results
    document.getElementById('results').style.display = 'none';
    //Show loader
    document.getElementById('loading').style.display = 'block';
    //call calculateResults after 2 sec
    setTimeout(calculateResults,2000);
    e.preventDefault();
});

function calculateResults(e){
    let principal = parseFloat(UIamount.value);
    let calculatedInterest = parseFloat(UIinterest.value) / 100 / 12;
    let calculatedPayments = parseFloat(UIyears.value) * 12;
    //Compute Monthly Payment
    let x = Math.pow(1+calculatedInterest,calculatedPayments);
    let monthly = (principal*x*calculatedInterest) /(x-1);

    //to check monthly is finite number
    if(isFinite(monthly)){
        UImonthlyPayment.value = monthly.toFixed(2);
        UItotalPayment.value =(monthly*calculatedPayments).toFixed(2);
        UItotalInterest.value = ((monthly * calculatedPayments)-principal).toFixed(2);
        //Show results
        document.getElementById('results').style.display = 'block';
        //Hide loader
        document.getElementById('loading').style.display = 'none';
        
    }else{
        showError('Please check your numbers');   
    }

}

function showError(msg){

    document.getElementById('results').style.display = 'none';
    document.getElementById('loading').style.display = 'none';

    const errorDiv = document.createElement('div');
    const card = document.querySelector('.card')
    const heading = document.querySelector('.heading')
    errorDiv.className = 'alert alert-danger';
    //Create text node and append to div
    errorDiv.appendChild(document.createTextNode(msg));
    //insert error above heading
    card.insertBefore(errorDiv,heading);
    //Clear error after 4 seconds
    setTimeout(clearError,4000);
}

function clearError(){
    document.querySelector('.alert').remove();
}

document.getElementById('clear').addEventListener('click',clear);

function clear(e){
    setTimeout(function(){
        UIamount.value = '';
        UIyears.value= '';
        UIinterest.value = '';
        UImonthlyPayment.value = ''
        UItotalPayment.value = ''
        UItotalInterest.value = '';
        document.getElementById('results').style.display = 'none';
    },500)
    e.preventDefault();
}


document.getElementById('pdf').addEventListener('click',pdfGenerator);
function pdfGenerator(e){
    let doc = new jsPDF();

    doc.setTextColor(0,0,255);
    doc.setFont("helvetica");
    doc.text(80,20,'Loan Calculation Report');

    doc.setTextColor(100);
    doc.setFont("courier");
    doc.text(20,30,`Loan Amount : ${UIamount.value}$`);
    doc.text(20,40,`Interest Amount : ${UIinterest.value}%`);
    doc.text(20,50,`Years to Repay : ${UIyears.value}`);
    doc.text(20,60,``);
    doc.setFont("helvetica");
    doc.text(20,70,'Calculated Amount: ');
    doc.setFont("courier");
    doc.text(20,80,`Monthly Payment : ${UImonthlyPayment.value}$`);
    doc.text(20,90,`Total Payment : ${UItotalPayment.value}$`);
    doc.text(20,100,`Total Interest : ${UItotalInterest.value}`);
    doc.setTextColor(196,79,111);
    doc.text(50,110,`Report Generated by Mids Calculator`);

    // doc.addPage();
    // doc.text(20,20,'TEST Page 2!');
    doc.save('Loan_Calculation_Report.pdf');
}