The Code

            
              function valueEntered() {
                const amount = parseFloat(document.getElementById("loanAmount").value);
                const term = parseFloat(document.getElementById("termMonths").value);
                const rate = parseFloat(document.getElementById("interestRate").value) / 100;
              
                // Validate input
                if (amount <= 0 || term <= 0 || rate <= 0) {
                  alert("Please enter valid values.");
                  return;
                }
              
                // Call the calcLoan function with the values entered by the user
                calcLoan(amount, term, rate);
              }
              
              function calcLoan(amount, term, rate) {
                // Calculate the monthly interest rate
                const monthlyRate = rate / 12;
              
                // Calculate the monthly payment
                const monthlyPayment =
                  (amount * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -term));
              
                // Display monthly payment
                document.getElementById("results").innerHTML =
                  "$" + monthlyPayment.toFixed(2);
              
                // Total principal
                const totalPrincipal = amount;
                document.getElementById("totalPrincipal").innerHTML =
                  "$" +
                  totalPrincipal.toLocaleString("en-US", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  });
              
                // Total interest
                const totalInterest = monthlyPayment * term - amount;
                document.getElementById("totalInterest").innerHTML =
                  "$" +
                  totalInterest.toLocaleString("en-US", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  });
              
                // Total cost
                const totalCost = amount + totalInterest;
                document.getElementById("totalCost").innerHTML =
                  "$" +
                  totalCost.toLocaleString("en-US", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  });
              
                displayResults(amount, term, monthlyRate, monthlyPayment);
              }
              
              function displayResults(amount, term, monthlyRate, monthlyPayment) {
                // Total interest
                const totalInterest = monthlyPayment * term - amount;
              
                // display total interest
                document.getElementById("totalInterest").value = totalInterest.toFixed(2);
              
                // Get the table body element
                const tableBody = document.getElementById("mortgageTable");
              
                // Clear the table body
                tableBody.innerHTML = "";
              
                let balance = amount;
                let totalInterestPaid = 0;
                for (let month = 1; month <= term; month++) {
                  const interestPaid = balance * monthlyRate;
                  const principalPaid = monthlyPayment - interestPaid;
                  totalInterestPaid += interestPaid;
                  balance -= principalPaid;
              
                  // Create a new row
                  const newRow = document.createElement("tr");
              
                  newRow.innerHTML = `${month}$${monthlyPayment.toLocaleString(
                    "en-US",
              
                    {maximumFractionDigits: 2, minimumFractionDigits: 2}
                  )}$${principalPaid.toLocaleString("en-US", {
                    maximumFractionDigits: 2,
              
                    minimumFractionDigits: 2,
                  })}$${interestPaid.toLocaleString("en-US", {
                    maximumFractionDigits: 2,
              
                    minimumFractionDigits: 2,
                  })}$${totalInterestPaid.toLocaleString("en-US", {
                    maximumFractionDigits: 2,
              
                    minimumFractionDigits: 2,
                  })}$${balance.toLocaleString("en-US", {
                    maximumFractionDigits: 2,
              
                    minimumFractionDigits: 2,
                  })}`;
              
                  // Append the new row to the table body
                  tableBody.appendChild(newRow);
                }
              }
              
              
            
          
Code Explanation

This loan calculator requires three inputs from the user: the loan amount, loan term in months, and annual interest rate. When the user submits their input, the valueEntered function is called. This function retrieves and validates the values entered, ensuring they are positive numbers. The calcLoan function is then called with these values to calculate the monthly interest rate, monthly payment, total principal, total interest, and total loan cost. These values are then displayed on the page using innerHTML. Lastly, the displayResults function calculates the monthly interest rate and payment once more, then generates an amortization schedule for the loan. This schedule details how each monthly payment is split between principal and interest, as well as the remaining loan balance after each payment. The amortization schedule is displayed in a table on the page. This code is a helpful tool for users to calculate their monthly loan payments and understand how their payments are divided between principal and interest over time.