The Code
//get numbers for the loan out of inputs
const getValues = () => {
//get each of the values from the inputs on the page
let loanAmount = document.getElementById('loan-amount').value;
let loanLength = document.getElementById('term').value;
let loanInterest = document.getElementById('interest-rate').value;
loanAmount = parseFloat(loanAmount);
loanLength = parseInt(loanLength);
loanInterest = parseFloat(loanInterest);
//make sure those values make sense
if (isNaN(loanAmount) || isNaN(loanLength) || isNaN(loanInterest)
|| loanAmount <= 0 || loanLength <= 0 || loanInterest <= 0) {
Swal.fire({
icon: 'error',
title: 'Woops!',
text: 'Please enter valid loan details.'
})
} else {
let loanTotals = caluclateTotals(loanAmount, loanLength, loanInterest);
displayTotals(loanTotals.monthlyPayment, loanAmount, loanTotals.totalInterest, loanTotals.totalCost);
let payments = calculatePayments(loanLength, loanTotals.monthlyPayment, loanAmount, loanInterest);
displayPayments(payments);
}
}
//calculate the totals for the loan
const caluclateTotals = (principal, term, rate) => {
//calculate the monthly
let monthlyPayment = (principal * (rate / 1200)) / (1 - Math.pow((1 + rate / 1200), -term));
//calulcate the total cost
let totalCost = monthlyPayment * term;
//calculate the total interest
let totalInterest = totalCost - principal;
let loanTotals = {
monthlyPayment: monthlyPayment,
totalCost: totalCost,
totalInterest: totalInterest
}
return loanTotals;
}
//display the totals for the loan
const displayTotals = (monthlyPayment, principal, interest, cost) => {
let formatOptions = {
style: 'currency',
currency: 'USD'
}
document.getElementById("amount").innerHTML = monthlyPayment.toLocaleString('en-US', formatOptions);
document.getElementById("total-principal-amount").innerHTML = principal.toLocaleString('en-US', formatOptions);;
document.getElementById("total-interest-amount").innerHTML = interest.toLocaleString('en-US', formatOptions);;
document.getElementById("total-cost-amount").innerHTML = cost.toLocaleString('en-US', formatOptions);;
}
//calculate each month of payments in the table
const calculatePayments = (term, monthlyPayment, principal, rate) => {
// create a for loop to calculate every month of payments
let remainingBalance = principal;
let totalInterest = 0;
let paymentsArray = [];
for (let month = 1; month <= term; month++) {
let interestPayment = remainingBalance * (rate / 1200);
let principalPayment = monthlyPayment - interestPayment;
totalInterest += interestPayment;
remainingBalance -= principalPayment;
// -- create an object to store those values
let loanPayment = {
month: month,
payment: monthlyPayment,
principal: principalPayment,
interest: interestPayment,
totalInterest: totalInterest,
balance: remainingBalance
}
// -- put that object in an array
paymentsArray.push(loanPayment);
}
// return the array
return paymentsArray;
}
//display each month of payments in the table
const displayPayments = (payments) => {
const tableRowTemplate = document.getElementById('payment-row');
const paymentsTable = document.getElementById('mortgage-table');
paymentsTable.innerHTML = '';
let formatOptions = {
style: 'currency',
currency: 'USD'
}
for (let i = 0; i < payments.length; i++) {
let currentMonthPayment = payments[i];
let tableRow = tableRowTemplate.content.cloneNode(true);
let tableCell = tableRow.querySelectorAll('td'); //will return a array of td's
tableCell[0].textContent = currentMonthPayment.month;
tableCell[1].textContent = currentMonthPayment.payment.toLocaleString('en-US', formatOptions);
tableCell[2].textContent = currentMonthPayment.principal.toLocaleString('en-US', formatOptions);
tableCell[3].textContent = currentMonthPayment.interest.toLocaleString('en-US', formatOptions);
tableCell[4].textContent = currentMonthPayment.totalInterest.toLocaleString('en-US', formatOptions);
tableCell[5].textContent = currentMonthPayment.balance.toLocaleString('en-US', formatOptions);
if (i == payments.length - 1) {
tableRow.querySelector('tr').classList.add('table-success')
}
paymentsTable.appendChild(tableRow);
}
}
}
The code is structured in four functions
getValues()
getValues() is used to gather the input from the user and this data is validated
before being passed to the loanTotals() function.
caluclateTotals(principal, term, rate)
caluclateTotals(principal, term, rate) is used to
calculate the monthlyPayment, totalCost,
and totalInterest. After these values are caluculated, they are
stored in object called loanTotals and this object is returned to the
getValues() function to be used by displayTotals()
displayTotals(loanTotals.monthlyPayment, loanAmount, loanTotals.totalInterest, loanTotals.totalCost)
displayTotals(loanTotals.monthlyPayment, loanAmount, loanTotals.totalInterest, loanTotals.totalCost)
is used to display the total the total monthly payment for the loan alogn with the
total principal, total interest, and total cost.
calculatePayments(loanLength, loanTotals.monthlyPayment, loanAmount, loanInterest);
calculatePayments(loanLength, loanTotals.monthlyPayment, loanAmount, loanInterest);
is used to calculate the payments for each month. A for loop is used to loop through the
entire loan term. Inside of this loop the monthly payment, principal, interest, total intertest, and balance
are calculated and then stored in a object called loanPayment. The month number is also stored
inside of this object and the object is then
stored in a array called paymentsArray. This array is retured to getValues() where
it be used
by displayTotals()
displayPayments(payments) is used to display the payments for each month inside of a table.
The table row template used to how the table row data is fetched, along with the payment table
that will
use this table row template. The payment table is cleared, then a a for loop is used to loop
through the
the payment data stored inside of the object loanPayment. Each invidual object inside of
loanPayment
represents a month of the term so each month will be eventually be stored in the variable
currwentMonthPayment. The content inside table row template is cloned and them modified. The
tableCell
varible is created to hold the array of querySelectorAll('td').
After that, indexes 0-1 are modified by the using the selective fields on the loanPayment object
which are month, payment, principal, interest, total interest, and balance. An if statement is
used
at the end of the for loop to change the last row of the table to have a background color green. After the for
loop
is done, the tbale row is appended to the paymentsTable where all the payment data for each month
of the
loan will be display.