Review of the Code

Explanation:

Code:


There are several functions being used to calculate the mortgage. The first function listed, roundUp(), is used to round up specific values in our application.







The calcMortgage() function begins by declaring variables linked to what the user inputs. We then calculate the total monthly payment using the variables we just declared and display it to the UI.












Next, we declare the previous remaining balance as the initial amount loaned and create empty arrays associated with the interest, principal, remaining balance, and the total interest. Variables totalInterest and totalPrincipal are initialized with zero as their value.









Next we create a for-loop that loops through the length of the loan, pushing values into the appropriate empty arrays we initialized above. From here, we display several outputs to the UI, like Total Principal Output, Total Interest Output, and Total Cost Output.











The Update Chart Section simply updates our chart with the appropriate values calculated in the previous section.






After we've updated our bar chart, we need to populate our table at the bottom of the UI with the data from the arrays. This is done by creating a function and giving it the parameters of the columns we want to populate our table with. Next, we create another for-loop that starts at the first month and loops through to the last month. We then populate the table with the appropriate cells by inserting rows and cells that correlate with the parameters we initially included. The exceptions to everything being looped include the month section, which is looped by the index and does not change besides incrementing by one, and the monthly payment section, since that value remains constant in the table.
















The last function clears the input fields entered by the user. The last line simply wires the function calcMortgage to an event listener, that engages when the button element with an ID of "calcBtn" is clicked. 


function roundUp(num) {
return +(Math.round(num + "e+2") + "e-2");
}
function calcMortgage() {
//this variable is linking our table function to our index.html table
let tableOutput = document.getElementById("tableBody");

let amountLoaned = document.getElementById("inputAmount").value;

let numOfMonths = document.getElementById("inputMonths").value;

let interestRate = document.getElementById("inputRate").value;

let base = (1 + (interestRate / 1200));

//Total Monthly Payment 
let totalMonthlyPayment = amountLoaned * (interestRate / 1200) / 
    (1 - (Math.pow(base, -numOfMonths)));

document.getElementById("dashMonthlyPayment").innerText = 
    `Your monthly payment = ${formatter.format(Math.round(totalMonthlyPayment || 0))}`;

let previousRemainingBalance = amountLoaned;

let arrayInterest = [];
let arrayPrincipal = [];
let remainingBalance = [];
let arrayTotalInterest = [];
let totalInterest = 0;
let totalPrincipal = 0;

for (let i = 0; i < numOfMonths; i++) {
arrayInterest.push(roundUp(previousRemainingBalance * (interestRate / 1200)));
arrayPrincipal.push((roundUp(totalMonthlyPayment - arrayInterest[i])));
remainingBalance.push((roundUp(previousRemainingBalance - arrayPrincipal[i])));
previousRemainingBalance = remainingBalance[i];
totalInterest = roundUp(totalInterest + arrayInterest[i]);
arrayTotalInterest.push(totalInterest);
totalPrincipal = Math.round(totalPrincipal + arrayPrincipal[i]);
);
}
//Total Princial Output
document.getElementById("dashPrincipal").innerText = ` ${formatter.format(totalPrincipal)}`;

//Total Interest Output
document.getElementById("dashInterest").innerText = ` ${formatter.format(totalInterest)}`;

//Total Cost Output
document.getElementById("dashCost").innerText = ` ${formatter.format(totalPrincipal + totalInterest)}`;

//Update Chart
myChart.data.datasets[0].data[0] = totalPrincipal;
myChart.data.datasets[0].data[1] = totalInterest + totalPrincipal;
myChart.update({
duration: 800,
easing: 'easeOutBounce'
});
//populating our table with the data
populateTable(numOfMonths, totalMonthlyPayment, arrayPrincipal, arrayInterest, arrayTotalInterest, remainingBalance, tableOutput);
};
function populateTable(months, monthlyPayment, principals, interests, totalInterests, balances, table) {           //representing arrays;
table.innerHTML = "";

for (let i = 0; i < months; i++) {
let row = table.insertRow(i);           //Insert the row into the table

let month = row.insertCell(0);          //Here is how the table will be populated
let payment = row.insertCell(1);
let principal = row.insertCell(2);
let interest = row.insertCell(3);
let totalInterest = row.insertCell(4);
let balance = row.insertCell(5);

month.innerHTML = i + 1;
payment.innerHTML = formatter.format(monthlyPayment);
principal.innerHTML = formatter.format(principals[i]);
interest.innerHTML = formatter.format(interests[i]);
totalInterest.innerHTML = formatter.format(totalInterests[i]);
balance.innerHTML = formatter.format(balances[i]);
}
}
function clearIt() {
document.getElementById("inputAmount").value = "";
document.getElementById("inputMonths").value = "";
document.getElementById("inputRate").value = "";
calcMortgage();
}

document.getElementById("calcBtn").addEventListener("click", calcMortgage);











}