Mortgage Calculator 

function calculatePayment() {

    let principal = document.getElementById("inAmount").value;
    if (principal == "") {
        alert("Please enter an amount for the loan.");
        return false;
    } else if (principal < 0) { 
        alert("Invalid loan amount, please enter a non-negative number.") 
        return false; 
    } 

    let rate = parseFloat(document.getElementById("inRate").value);
    rate=rate / 1200; 
    let term=parseFloat(document.getElementById("inTerm").value);
    term=term * 12;
    let monthlyPayment=principal * rate / (1 - (1 + rate) ** (-term));

    let principalPaid=0;
    let interestPaid=0;
    let balance=principal; 
    let remainingBalance=0; 
    remainingBalance=balance - principalPaid; 

    let totalInterest=0; 
    let totalPaid=0; 

    let payArray=[]; 

    for (let i = 1; i <= term; i++) { 
        totalPaid=totalPaid + monthlyPayment; 
        interestPaid=remainingBalance * rate; 
        principalPaid=monthlyPayment - interestPaid; 
        totalInterest +=interestPaid; 
        remainingBalance -=principalPaid;

        let obj=addToArray(i, monthlyPayment, principalPaid, interestPaid, totalInterest, remainingBalance);

        payArray.push(obj); 
    }; 

    let payAmount=document.getElementById("monthlyPayment"); 
    payAmount.innerText="$" + (Math.round(monthlyPayment * 100) / 100).toFixed(2); 
    let principalAmt=document.getElementById("principalAmt"); 
    principalAmt.innerText="$" + parseFloat(principal); 
    let interestPay=document.getElementById("interestTotal"); 
    interestPay.innerText="$" + (Math.round(totalInterest * 100) / 100).toFixed(2);
    let costTotal=document.getElementById("costTotal");
    costTotal.innerText="$" + (Math.round((parseFloat(principal) + totalInterest) * 100) / 100).toFixed(2);
   
    displayData(payArray); 
};

function addToArray(month, totalPaid, principalPaid, interestPaid, totalInterest, remainingBalance) {
    let obj = {};
    obj["month"] = month;
    obj["totalPaid"] = totalPaid;
    obj["principalPaid"] = principalPaid;
    obj["interestPaid"] = interestPaid;
    obj["totalInterestPaid"] = totalInterest;
    obj["remainingBalance"] = remainingBalance;

    return obj;
}

function displayData(payArray) {

    const template = document.getElementById("dataTemplate");
    const body = document.getElementById("tableBody");

    body.innerHTML = "";

    for (let i = 0; i < payArray.length; i++) {
        const dataRow = document.importNode(template.content, true);

        dataRow.getElementById("month").textContent = payArray[i].month;
        dataRow.getElementById("totalPaid").textContent = payArray[i].totalPaid.toLocaleString('en-US', {
            style: 'currency',
            currency: 'USD'
        });

        dataRow.getElementById("principalPaid").textContent = payArray[i].principalPaid.toLocaleString('en-US', {
            style: 'currency',
            currency: 'USD'
        });

        dataRow.getElementById("interestPaid").textContent = payArray[i].interestPaid.toLocaleString('en-US', {
            style: 'currency',
            currency: 'USD'
        });
        
        dataRow.getElementById("totalInterestPaid").textContent = payArray[i].totalInterestPaid.toLocaleString('en-US', {
            style: 'currency',
            currency: 'USD'
        });
        
        dataRow.getElementById("remainingBalance").textContent = payArray[i].remainingBalance.toLocaleString('en-US', {
            style: 'currency',
            currency: 'USD'
        });

        body.appendChild(dataRow);
    };
}