The Code for Paymen-ator
//
function getValues(){
let loanAmount = Number(document.getElementById("principalAmount").value);
let loanTerm = document.getElementById("loanTerm").value;
let loanInterest = document.getElementById("interestRate").value;
displayResults(computeResults(loanAmount, loanTerm, loanInterest));
}
//
function computeResults(loanAmount, loanTerm, loanInterest){
let loanRate = loanInterest/1200;
let remainingBalance = loanAmount;
let monthlyPayment = (loanAmount*((loanRate*(1+loanRate)**loanTerm)/(((1+loanRate)**loanTerm)-1)));
let totalInterest = 0;
let loanData = [];
for (let i = 0; i < loanTerm; i++) { let interestPayment=remainingBalance*loanRate;
totalInterest +=interestPayment;
let principalPayment=monthlyPayment-interestPayment;
remainingBalance=remainingBalance - principalPayment;
const monthlyData=
{
month:i+1,
payment:formatMoney(monthlyPayment),
principal:formatMoney(principalPayment),
interest:formatMoney(interestPayment),
totalInterest:formatMoney(totalInterest),
balance:formatMoney(remainingBalance)
};
loanData.push(monthlyData);
}
document.getElementById("monthlyPayment").innerHTML=formatMoney(monthlyPayment);
document.getElementById("amountFinanced").innerHTML=formatMoney(loanAmount);
document.getElementById("totalInterest").innerHTML=formatMoney(totalInterest);
document.getElementById("totalPaid").innerHTML=formatMoney((loanAmount + totalInterest));
return loanData;
}
//
function formatMoney(moneyValue){
let formattedMoney=(Intl.NumberFormat('en-US', {style: "currency" , currency: "USD"}).format(moneyValue));
return formattedMoney;
}
//
function displayResults(loanData){
let tableBody=document.getElementById("results"); let
templateRow=document.getElementById("loanTemplate"); tableBody.innerHTML="" ;
loanData.forEach(element=> {
let tableRow = document.importNode(templateRow.content, true);
let rowCols = tableRow.querySelectorAll("td");
rowCols[0].textContent = element.month;
rowCols[1].textContent = element.payment;
rowCols[2].textContent = element.principal;
rowCols[3].textContent = element.interest;
rowCols[4].textContent = element.totalInterest;
rowCols[5].textContent = element.balance;
tableBody.appendChild(tableRow);
});
displayHidden();
}
//
function displayHidden(){
document.getElementById("monthlyCard").classList.remove("invisible");
document.getElementById("amortTable").classList.remove("invisible");
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
//
clear form
function clearForm(){
location.reload();
}
The code is broken up into multiple functions to aid with debugging as well as future changes.
computeResults()
Uses formulas to compute the payments and amortization schedule based on user entered values. Stores these values in an array of loan payment objects to be displayed back.
formatMoney()
Formats numbers into user readable currency notation. Allows for easier reading but maintains original values for computing accuracy.
displayResults()
Takes the data from the payment objects and displays them in a table. Allows the table to be created for any size (term) loan.