The Code for MONEYLENDER
//get the values the user input
function getValues(){
//get loan amount value
loanAmount = document.getElementById("loanAmount").value;
//get monthly payment value
monthlyPayments = document.getElementById("monthlyPayments").value;
//get percent rate value
percentRate = document.getElementById("rate").value;
//call calculation functions
calculateNumbers(loanAmount, monthlyPayments, percentRate);
}
/////////////////////////////
//calculate numbers for table
function calculateNumbers(loanAmount, monthlyPayments, percentRate){
let moneyArray = [];
let totalMonthlyPayment = loanAmount * (percentRate/1200) / (1-(1+percentRate/1200)**(-monthlyPayments));
//money array
for (let i = 1; i <= (monthlyPayments * 1); i++) {
//add month number
monthNumber = i;
moneyArray.push(monthNumber);
//add monthly payment
moneyArray.push(totalMonthlyPayment);
//prep for principal payment
//calculate remaining balance
if (i < 2) {
remainingBalance = loanAmount;
currentBalance = remainingBalance;
} else {
}
//calculate interest
if (i < 2){
interestPayment = loanAmount * (percentRate/1200);
lastInterestPayment = interestPayment;
newInterestPayment = 0;
} else {
currentBalance = remainingBalance;
lastInterestPayment = interestPayment;
newInterestPayment = currentBalance * (percentRate/1200);
interestPayment = newInterestPayment;
}
//add principal payment
principalPayment = totalMonthlyPayment - interestPayment;
moneyArray.push(principalPayment);
//add interest payment & total interest
if (i < 2){
moneyArray.push(interestPayment);
totalInterestPayment = lastInterestPayment + newInterestPayment;
moneyArray.push(totalInterestPayment);
} else {
moneyArray.push(interestPayment);
//add total interest payment
totalInterestPayment = totalInterestPayment + newInterestPayment;
moneyArray.push(totalInterestPayment);
}
//find balance left
remainingBalance = remainingBalance - principalPayment;
moneyArray.push(remainingBalance);
currentBalance = remainingBalance;
}
displayData(moneyArray);
calculateTotals(loanAmount, monthlyPayments, percentRate, totalInterestPayment)
return moneyArray;
}
//////////////////////////////
//Calculates Totals for Top Right
function calculateTotals(loanAmount, monthlyPayments, percentRate){
totalMonthlyPayment = loanAmount * (percentRate/1200) / (1-(1+percentRate/1200)**(-monthlyPayments));
totalPrincipal = loanAmount * 1;
totalInterest = totalInterestPayment * 1;
totalCost = totalPrincipal + totalInterest;
displayTotals(totalMonthlyPayment, totalPrincipal, totalInterest, totalCost);
}
//////////////////////////
//Display Totals for Top Right
function displayTotals(totalMonthlyPayment, totalPrincipal, totalInterest, totalCost){
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
});
document.getElementById("totalMonthly").innerHTML = formatter.format(totalMonthlyPayment);
document.getElementById("pResult").innerHTML = formatter.format(totalPrincipal);
document.getElementById("iResult").innerHTML = formatter.format(totalInterest);
document.getElementById("cResult").innerHTML = formatter.format(totalCost);
}
////////////////////
//creates table data
function displayData(moneyArray) {
//get the table body element from the page
let tableBody = document.getElementById("results");
//get the template itself
let templateRow = document.getElementById("mlTemplate");
//clear the table
tableBody.innerHTML = "";
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
});
for (let index = 0; index < moneyArray.length; index+= 6) {
let tableRow = document.importNode(templateRow.content, true);
//grab the td to put into array
let rowCols = tableRow.querySelectorAll("td");
rowCols[0].textContent = moneyArray[index];
rowCols[1].textContent = formatter.format(moneyArray[index+1]);
rowCols[2].textContent = formatter.format(moneyArray[index+2]);
rowCols[3].textContent = formatter.format(moneyArray[index+3]);
rowCols[4].textContent = formatter.format(moneyArray[index+4]);
rowCols[4].textContent = formatter.format(moneyArray[index+4]);
rowCols[5].textContent = formatter.format(moneyArray[index+5]);
tableBody.appendChild(tableRow);
}
//add all the rows to the table
}
//inline script from app.html
document.getElementById("btnSubmit").addEventListener("click", getValues);
The code shown contains all of the Javascript used in this project. Most of the Javascript is contained inside of an external script, site.js. One line of Javascript runs inline inside of app.html. A few key pieces of it are explained below.
As this is a more lengthy coding challenge, I will attempt to explain the code at a high level rather than delving into the weeds.
getValues
getValues is a function that is triggered when the "Calculate" button is clicked on the app webpage. (See the bottom of the Javascript.)
It is a function that grabs the user inputs and sends them to the function calculateNumbers.
calculateNumbers
I will do most of my explanation in this function. This function does all of the calculating and also works with an array to give us all of our information. The other functions are primarily use to display data rather than calculate it.
First, an array, moneyArray, is created. Then, a variable named totalMonthlyPayment is created to represent, well, the total monthly mortgage payment. It was not intended to be changed, so I placed it outside of the for loop.
The for loop that comes next takes up most of this function. I created it to loop as many times as the total monthly payments the user inputs. (So, each loop represents one month.)
Then, monthNumber is set equal to our index. This gives us our first column of months in the table. The number of the index/month is then pushed into our moneyArray.
The totalMonthlyPayment is also pushed into the array. Nothing is done to it as it does not change.
An if else statement is created. This is because, at the beginning, our remaining balance is equal to our loan balance, but once one month goes by, it is no longer equal to our loan balance. It has changed because the person has paid off some of their balance. Also, the currentBalance is set to our remainingBalance, because, for now, they are the same.
Now, another if else statement is created to calculate interest. Again, it is separated (for my sanity) as the interest at the beginning is different from the interest past one month. lastInterestPayment, newInterestPayment, and interestPayment are created/declared as they are used in different mathematical formulas.
principalPayment is calculated (pretty easy formula) and pushed to our array.
Again, another if else statement is created. At first, our totalInterestPayment is calculated differently than it is the second and third time. In both of these, if and else, the interestPayment and totalInterestPayment variables are pushed to the array.
Finally, at the end of every loop, the remainingBalance is calculated and is pushed to the array. Our currentBalance is also set equal to our remainingBalance.
At the end of this function, our array is sent to the displayData function. In addition, the variables loanAmount, monthlyPayments, percentRate, and totalInterestPayment are sent to the calculateTotals function.
moneyArray is returned.
calculateTotals
This function calculates all of the total numbers and sends them to displayTotals.
displayTotals
This function displays all of our total numbers under the "Your Monthly Payments" heading.
displayData
In a nutshell, this function displays all of our data from moneyArray in a table. I have explained this tfunction in extensive detail in my other coding challenge, Abracadabra. If you want to read more about it, click here. Look for displayData(acArray).