The Code

                        
                            // controller

                            //loanAmount, termAmount, interestRate
                            function getValues() {
                              let loanAmount = parseFloat(document.getElementById('loanAmount').value);
                              let termLength = parseInt(document.getElementById('termAmount').value);
                              let interestRate = parseFloat(document.getElementById('interestRate').value);
                            
                              loanCalculation(loanAmount, termLength, interestRate);
                            }
                            
                            // logic function
                            function loanCalculation(loanAmount, termInput, interestInput) {
                              let loanInput = loanAmount;
                              let termLength = termInput;
                              let interestRate = interestInput;
                            
                            
                              let totalMonthlyPayment = (loanInput * (interestRate / 1200)) / (1 - (1 + interestRate / 1200) ** -termLength);
                              let remainingBalance = loanInput;
                              let interestPayment = remainingBalance * interestRate / 1200;
                              let principal = totalMonthlyPayment - interestPayment;
                              let totalInterest = interestPayment;
                            
                              let monthlyPayments = [];
                            
                            
                              for (let i = 0; i <= termLength; i++) {
                            
                                interestPayment = remainingBalance * (interestRate / 1200);
                                principal = totalMonthlyPayment - interestPayment;
                                totalInterest += interestPayment;
                                remainingBalance -= principal;
                                let monthlyPaymentData = {
                                  month: i,
                                  payment: totalMonthlyPayment,
                                  principal: principal,
                                  interest: interestPayment,
                                  totalInterest: totalInterest,
                                  balance: remainingBalance
                                }
                                monthlyPayments.push(monthlyPaymentData);
                              }
                            
                              return displayResults(monthlyPayments);
                            
                            }
                            
                            
                            function displayResults(loanPayments) {
                              //Show results
                              // top card results
                              let principalElementValue = Number(document.getElementById("loanAmount").value);
                              let totalInterestElementValue = loanPayments[loanPayments.length - 1].totalInterest;
                              let totalCostValue = Number(principalElementValue + totalInterestElementValue);
                            
                            
                            
                              // amort table
                              let tableBody = document.getElementById('loanTableBody');
                              const tableRowTemplate = document.getElementById('mortgageTableRowTemplate');
                            
                            
                              for (let i = 0; i < loanPayments.length - 1; i++) {
                            
                                let eventRow = document.importNode(tableRowTemplate.content, true);
                                let tableCells = eventRow.querySelectorAll('td');
                            
                            
                            
                                // month
                                tableCells[0].innerHTML = i + 1;
                            
                                // payment
                                tableCells[1].innerHTML = formatCurrency(loanPayments[i].payment);
                            
                                // principal
                                tableCells[2].innerHTML = formatCurrency(loanPayments[i].principal);
                            
                                // interest
                                tableCells[3].innerHTML = formatCurrency(loanPayments[i].interest);
                            
                                // total interest
                                tableCells[4].innerHTML = formatCurrency(loanPayments[i].totalInterest);
                            
                                // balance
                                // use math.abs to show absolute value of amount instead of negative number
                                tableCells[5].innerHTML = formatCurrency(Math.abs(loanPayments[i].balance));
                            
                                tableBody.appendChild(eventRow);
                              }
                            
                              document.getElementById("MonthlyPaymentAmountDisplay").textContent = formatCurrency(loanPayments[0].payment);
                            
                              document.getElementById("principal").textContent = formatCurrency(principalElementValue);
                            
                              document.getElementById("totalInterestDisplay").textContent = formatCurrency(totalInterestElementValue);
                            
                              document.getElementById("totalCostDisplay").textContent = formatCurrency(totalCostValue);
                            
                            
                            
                              function formatCurrency(value) {
                                return Number(value).toLocaleString('en-us', {
                                  style: 'currency',
                                  currency: 'USD'
                                });
                              }
                            }
                        
                    

The code is structured in four functions:

getValues()

This function gets the input values that the user has put into the HTML via the webpage. It then assigns those values to variables and converts those values to string using the parseFloat function and one of the values gets converted to an int using the parseInt function. Lastly, it passes those values to the loanCalculation function as parameters.

loanCalculation()

This function receives the values from the getValues function as parameters. It then performs the necessary calculations and uses a for loop to loop through each payment to generate the payment needed for each month and pushes that data to the monthlyPayments variable to be passed to the displayResults function.

displayResults()

This function receives the monthlyPayments variable from the loanCalculation function as a parameter. It then performs the necessary methods to show the results for the top card that displays the principal, total interest, and total cost of the loan. Next, it directs the data to the correct place in the HTML using the getElementById function. Then it loops through all the months of the loan to display the amortization table properly.

formatCurrency()

This small function formats the currency to use the US dollar.