The Code

                
                    
function calculateMortgage() {

    //get loan data input by user
    let loanInfo = saveLoanData();

    //calculate the payment, principal, interest, total interest & current balance for each month
    let loanMonths = calculateMonthlyValues(loanInfo);

    // to put info on the table
    displayLoanData(loanMonths);

    displayTotals(loanMonths);

}

function saveLoanData() {
    let newLoanAmount = parseInt(document.getElementById('newLoanAmount').value);
    let newLoanTerm = parseInt(document.getElementById('newLoanTerm').value);
    let newLoanInterestRate = parseInt(document.getElementById('newLoanInterest').value);

    let newLoanRow = {
        loanAmount: newLoanAmount,
        loanTerm: newLoanTerm,
        loanInterestRate: newLoanInterestRate,
    };

    return newLoanRow;
}

//calculate the payment, principal, interest, total interest & current balance for each month
function calculateMonthlyValues(loan) {
    let totalMonthlyPayment = 0;
    let balance = loan.loanAmount;
    let interestPayment = 0;
    let principalPayment = 0;
    let loanInterestRate = loan.loanInterestRate;
    let totalInterest = 0;

    let newLoanRow = [];

    for (let month = 1; month <= loan.loanTerm; month++) {

        // Total Monthly Payment: (amountloaned) * (rate/1200) / (1-(1+rate/1200) ^number of Months)
        totalMonthlyPayment = ((loan.loanAmount) * (loan.loanInterestRate / 1200)) / (1 - Math.pow((1 + loanInterestRate / 1200), -loan.loanTerm))

        // // Initial Balance: Loan Amount - (Monthly Payment * Month)
        //     balance = loan.loanAmount - (totalMonthlyPayment * month)

        // Interest Payment: Previous Month Remaining Balance * rate/1200
        interestPayment = balance * (loanInterestRate / 1200)

        // Principal Payment total monthly payment - interest payment
        principalPayment = totalMonthlyPayment - interestPayment

        // Remaining Balance: Previous Month Remaining Balance - Principal Payment
        balance = Math.abs(balance - principalPayment)
        // balance = balance - principalPayment

        totalInterest += interestPayment

        // Add new balance & term to array
        newLoanRow.push({
            month,
            totalMonthlyPayment,
            principalPayment,
            totalInterest,
            interestPayment,
            balance,
        })
    }
    return newLoanRow;
}


// to put info on the table
function displayLoanData(loan) {

    let tableBody = document.getElementById('loanTableBody');
    const tableRowTemplate = document.getElementById('loanTableRowTemplate');

    tableBody.innerHTML = '';

    for (let i = 0; i < loan.length; i++) {

        let loanRow = document.importNode(tableRowTemplate.content, true)
        let currentLoan = loan[i];

        let tableCells = loanRow.querySelectorAll("td")

        tableCells[0].textContent = currentLoan.month;
        tableCells[1].textContent = formatCurrency(currentLoan.totalMonthlyPayment);
        tableCells[2].textContent = formatCurrency(currentLoan.principalPayment);
        tableCells[3].textContent = formatCurrency(currentLoan.interestPayment);
        tableCells[4].textContent = formatCurrency(currentLoan.totalInterest);
        tableCells[5].textContent = formatCurrency(currentLoan.balance);

        tableBody.appendChild(loanRow);
    }
}

function displayTotals(loan) {

    let totalPrincipal = parseInt(document.getElementById('newLoanAmount').value);
    document.getElementById('totalPrincipal').textContent = formatCurrency(totalPrincipal);

    // let monthlyPayment = loan.totalMonthlyPayment;
    let monthlyPayment = loan[0].totalMonthlyPayment;
    document.getElementById('monthlyPayment').textContent = formatCurrency(monthlyPayment);

    let totalInterestPayment = loan[59].totalInterest;
    document.getElementById('totalInterest').textContent = formatCurrency(totalInterestPayment);

    let totalCost = totalInterestPayment + totalPrincipal;
    document.getElementById('totalCost').textContent = formatCurrency(totalCost);
}

function formatCurrency(value) {
    let formatter = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD' });
    return formatter.format(Number(value));
}
                
            

The code is structured in several functions.

calculateMortgage()

This function is the main function that runs when the user presses the button to calculate their mortgage.

saveLoanData()

This function retrieves the input loan data from the page and sets the values as newLoanAmount, newLoanTerm, and newLoanInterestRate. It then instantiates an object with these values within it.

calculateMonthlyValues()

This function takes the data from the previous function and uses it to actually calcuate the user's mortgage. It starts by setting the values to 0 for everything but the balance and loanInterestRate, which we already have the values for. These variables are then run through a for loop which will calcuate the monthly payments depending on how many months the user inserted. Each month pushes those values to the newLoanRow array. Once it has run through the loop for every month, it exits and returns the newLoanRow.

displayLoanData()

This function displays the data on the page. First it fetches the template from the html page and finds where the data will be posted. Then it runs through the data using a for loop to display each loanRow on the table. This function also utilizes a formatCurrency function to display the values in USD with the correct amount of decimals.

displayLoanTotals()

Finally, this function displays the totals on the page. It calculates the total if it was not already calcuated and then utilizes the formatCurrency function to display the amount in USD with two decimal places.