The Code
// get the trems of the loan to calculagte and validate them
function getValues() {
let principal = document.getElementById('loanAmount').value;
let term = document.getElementById('loanTerm').value;
let interest = document.getElementById('interestRate').value;
// set up for variables related to principal, term and interest
principal = parseInt(principal);
term = parseInt(term);
interest = parseFloat(interest);
// Swal message response should the use not input values
if (isNaN(principal) || isNaN(term) || isNaN(interest) || principal <= 0 || term <= 0 || interest <= 0){
Swal.fire({
icon:'error',
backdrop: false,
title: 'Oops',
text: 'Please enter valid numbers for your loan'
})
} else {
let totals = calculateTotals(principal, term, interest);
displayTotals(totals);
let payments = calculatePayments(principal, term, interest, totals.monthlyPayment);
displayPayments(payments);
}
}
// calculate the totals for the loan
function calculateTotals (principal, term, rate){
let monthlyPayment = (principal * (rate/1200)) / (1 - Math.pow(1 + rate/1200, -term));
let totalCost = monthlyPayment * term;
let totalInterest = totalCost - principal;
// return an object with all the totals
let loanTotals = {
monthlyPayment: monthlyPayment,
totalCost: totalCost,
totalInterest: totalInterest,
totalPrincipal: principal
}
return loanTotals;
}
// calculate each month of the loan
function calculatePayments(principal, term, rate, monthlyPayment){
let balance = principal;
let totalInterest = 0;
let paymentsArray = [];
// for lopp to go through all of the months
for (let month = 1; month <= term; month += 1){
let interestPayment = balance * (rate / 1200);
let principalPayment = monthlyPayment - interestPayment;
balance -= principalPayment;
totalInterest += interestPayment;
// put the calculations of each month into an object
let paymentObj = {
month: month,
payment: monthlyPayment,
principal: principalPayment,
interest: interestPayment,
totalInterest: totalInterest,
balance: balance
};
// put that object into an array
paymentsArray.push(paymentObj);
}
// return an array of objects
return paymentsArray;
}
// display the totals for the loan
function displayTotals(totals){
let format = {
style: 'currency',
currency: 'USD'
}
// convert payments to US format
document.getElementById('monthly-payment').textContent = totals.monthlyPayment.toLocaleString('en-US', format);
document.getElementById('total-principal').textContent = totals.totalPrincipal.toLocaleString('en-US', format);
document.getElementById('total-interest').textContent = totals.totalInterest.toLocaleString('en-US', format);
document.getElementById('total-cost').textContent = totals.totalCost.toLocaleString('en-US', format);
}
// display the payments to the user
function displayPayments(paymentsArr){
let format = {
style: 'currency',
currency: 'USD'
}
// accept array from
const tableRowTemplate = document.getElementById('monthlyPaymentTemplate');
const paymentsTable = document.getElementById('paymentsTable');
// use a for loop to create a value for
// each relavant element on the output table.
for (let i = 0; i < paymentsArr.length; i++){
let payment = paymentsArr[i];
let tableRow = tableRowTemplate.content.cloneNode(true);
let tableCells = tableRow.querySelectorAll('td');
tableCells[0].textContent = payment.month;
tableCells[1].textContent = payment.payment.toLocaleString('en-US', format);
tableCells[2].textContent = payment.principal.toLocaleString('en-US', format);
tableCells[3].textContent = payment.interest.toLocaleString('en-US', format);
tableCells[4].textContent = payment.totalInterest.toLocaleString('en-US', format);
tableCells[5].textContent = Math.abs(payment.balance).toLocaleString('en-US', format);
paymentsTable.appendChild(tableRow);
}
}
// display the month in a table