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.