The Code

              
                function getValues() {
                        let loanAmount = parseInt(document.getElementById("entryLoanAmount").value);
                        let term = parseInt(document.getElementById("entryTerm").value);
                        let rate = parseFloat(document.getElementById("entryRate").value);

                        if (
                          Number.isInteger(loanAmount) &&
                          Number.isInteger(term) &&
                          Number.isInteger(rate)
                        ) {
                          let paymentObjects = calculatePayments(loanAmount, term, rate);
                          displayBigMonthlyPayment(loanAmount, term, rate);
                          displayPayments(paymentObjects);
                        } else {
                          Swal.fire({
                            backdrop: false,
                            title: "INPUT",
                            text: "Please provide values for Loan Amount, Term (Months), and Interest Rate",
                          });
                        }
                      }

                      function calculatePayments(loanAmount, term, rate) {
                        const numberFormatter = Intl.NumberFormat("en-US", {
                          style: "currency",
                          currency: "USD",
                        });

                        let paymentObjects = [];

                        for (let index = 0; index < term; index++) {
                          let month = index + 1;
                          let previousRemainingBalance = 0;
                          if (month === 1) {
                            previousRemainingBalance = loanAmount;
                          } else {
                            previousRemainingBalance = paymentObjects[index - 1].balance;
                          }

                          let monthlyRate = rate / 1200;
                          let monthlyPayment =
                            (loanAmount * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -term));
                          let interest = previousRemainingBalance * monthlyRate;
                          let principal = monthlyPayment - interest;
                          let balance = previousRemainingBalance - principal;
                          let totalInterest = 0;
                          if (month === 1) {
                            totalInterest = interest;
                          } else {
                            totalInterest = interest + paymentObjects[index - 1].totalInterest;
                          }

                          let createPaymentObjects = {
                            month: month,
                            monthlyPayment: monthlyPayment,
                            principal: principal,
                            interest: interest,
                            totalInterest: totalInterest,
                            balance: balance,
                          };

                          paymentObjects.push(createPaymentObjects);
                        }
                        return paymentObjects;
                      }

                      function displayBigMonthlyPayment(loanAmount, term, rate) {
                        const numberFormatter = Intl.NumberFormat("en-US", {
                          style: "currency",
                          currency: "USD",
                        });
                        let monthlyRate = rate / 1200;
                        let monthlyPayment =
                          (loanAmount * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -term));
                        let totalInterest = monthlyPayment * term - loanAmount;
                        let cost = totalInterest + loanAmount;

                        let viewPayment = document.getElementById("viewPayment");
                        let displayPrincipal = document.getElementById("displayPrincipal");
                        let displayInterest = document.getElementById("displayInterest");
                        let displayCost = document.getElementById("displayCost");

                        viewPayment.innerHTML = numberFormatter.format(monthlyPayment);
                        displayPrincipal.innerHTML = numberFormatter.format(loanAmount);
                        displayInterest.innerHTML = numberFormatter.format(totalInterest);
                        displayCost.innerHTML = numberFormatter.format(cost);
                      }

                      function displayPayments(paymentObjects) {
                        const numberFormatter = Intl.NumberFormat("en-US", {
                          style: "currency",
                          currency: "USD",
                        });

                        let paymentDataTemplate = document.getElementById("paymentDataTemplate");
                        let tBodyPayments = document.getElementById("tBodyPayments");
                        tBodyPayments.innerHTML = "";

                        for (let index = 0; index < paymentObjects.length; index++) {
                          let paymentObjectNode = document.importNode(
                            paymentDataTemplate.content,
                            true
                          );

                          let tBodyColumns = paymentObjectNode.querySelectorAll("td");
                          tBodyColumns[0].textContent = paymentObjects[index].month;
                          tBodyColumns[1].textContent = numberFormatter.format(
                            paymentObjects[index].monthlyPayment
                          );
                          tBodyColumns[2].textContent = numberFormatter.format(
                            paymentObjects[index].principal
                          );
                          tBodyColumns[3].textContent = numberFormatter.format(
                            paymentObjects[index].interest
                          );
                          tBodyColumns[4].textContent = numberFormatter.format(
                            paymentObjects[index].totalInterest
                          );
                          tBodyColumns[5].textContent = numberFormatter.format(
                            paymentObjects[index].balance
                          );
                          tBodyPayments.appendChild(paymentObjectNode);
                        }
                      }

              
            

How it Works

1. getvalues() is the driver function of the application that encompasses all logic in the program
2. First, the program gets user-entered values from three text inputs in the HTML document (text inputs were used instead of number inputs to provide greater compatibility with Apple devices):
   • loanAmount
   • term (in MONTHS)
   • rate (of INTEREST)
3. The application will show the user an error alert if they try to enter any characters other than numbers or if they do not enter any values at all.
4. While receiving the values from the text inputs, the getvalues() function parses the values of loanAmount and term into integers and parses the value for rate into a float. LendCal requires data to be integers and floats in order to operate.
5. The calculatePayments() function receives loanAmount, term, and rate as parameters. This function is responsible for generating an array of objects which will be displayed in a table. This array, called paymentObjectArray, has indices of objects which contain properties of month, monthlyPayment, principal, interest, totalInterest, and balance.
6. paymentObjectArray is initialized as an empty array.
7. Within calculatePayments(), all of the mathematics required to calculate all values for the properties of paymentObject exists inside of a for loop.
8. A new index of paymentObjects is created each time the for loop runs. The total indices of paymentObjects matches the value entered by the user for term.
9. The displayPayments() function copies a template from the HTML document called paymentDataTemplate and inserts the properties of each index of all paymentObjects as table data tags inside of an HTML table with the ID of tBodyPayments.
10. tBodyPayments displays table data created by displayPayments() as a table. The indices of paymentObjects are displayed as rows in the table, and the properties of each object are displayed as columns. The values of each property are displayed as table data tags in the table.
11. The function displayBigMonthlyPayment() uses some of the same mathematical formulations as what is found in the for loop in calculatePayments(). displayBigMonthlyPayment() is responsible for showing the user their monthly payment, total principal, total interest, and total cost of their loan.