calculate();
//*********************************************
//************ LINK the INPUTS ****************
//*********************************************
// Select all inputs and add event listener "change" (for calc only).
var inputsArray = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("change", calculate));
//inputsArray.forEach(el => el.addEventListener("input", linkValue));
//"input"... will cause massive lag with high "t" values...
// Select all inputs and add event listener "input" (for linking values only)
var inputsArrayTwo = document.querySelectorAll("input");
inputsArray.forEach(el => el.addEventListener("input", linkValue));
// Link the range with number inputs
function linkValue(e) {
var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
sibling.value = e.target.value;
}
//*********************************************
//************ UPDATE TABLE OBJECT ************
//*********************************************
function calculate() {
//*********************************************
//************ VARS and CALCS *****************
//*********************************************
let P = parseFloat(document.querySelector("#calc_P").value); // Starting value
let r = document.querySelector("#calc_r").value / 100; // Interest
let n = 12; // Compounds per year
let t = parseFloat(document.querySelector("#calc_t").value); // Time in years
let A = parseFloat(document.querySelector("#calc_A").value); // Deposits per period
let p = 12; // Deposit periods yearly (monthly)
let nper = p * t; // total # periods
let rate = (1 + r / n) ** (n / p) - 1; // interest rate
let F = P * (1 + rate) ** nper + (A * ((1 + rate) ** nper - 1)) / rate; // Final value
//
/* OLD CODE
//
// new array
let calcTable = [];
// push first row [0]
calcTable.push({
period: 0,
payment: 0,
totPayment: P,
interest: 0,
totInterest: 0,
balance: P
});
// add rest of rows, starting at [1]
for (let i = 1; i < nper + 1; i++) {
let previous = i - 1;
let interest = calcTable[previous].balance * rate;
calcTable[i] = {
period: i,
payment: A,
totPayment: (P += A),
interest,
totInterest: interest + calcTable[previous].totInterest,
balance: calcTable[previous].balance + A + interest
};
}
*/
//
// NEW CODE
//
let calcTableNew = [];
calcTableNew.push({
period: 0,
payment: 0,
totPayment: P,
interest: 0,
totInterest: 0,
balance: P
});
for (let i = 1; i < nper / 12 + 1; i++) {
let calcTableInsideLoop = [];
for (let i = 1; i < nper + 1; i++) {
let previous = i - 1;
let interest = calcTableInsideLoop[previous].balance * rate;
calcTableInsideLoop[i] = {
period: i,
payment: A,
totPayment: (P += A),
interest,
totInterest: interest + calcTableInsideLoop[previous].totInterest,
balance: calcTableInsideLoop[previous].balance + A + interest
};
if (i % 12 == 0) {
addDataToYearlyArray();
}
}
function addDataToYearlyArray() {
calcTableNew[i] = {
period: i,
payment:
calcTableInsideLoop[i * 12].totPayment -
calcTableInsideLoop[i * 12 - 12].totPayment,
totPayment: calcTableInsideLoop[i * 12].totPayment,
interest:
calcTableInsideLoop[i * 12].totInterest -
calcTableInsideLoop[i * 12 - 12].totInterest,
totInterest: calcTableInsideLoop[i * 12].totInterest,
balance: calcTableInsideLoop[i * 12].balance
};
}
}
console.log(calcTableNew);
//
/* THESE FUNCTIONS ARE TEMPORARLY COMMENTED OUT, SHOULD APPLY TO THE NEW ARRAY WITH YEARLY PERIODS
//
function setPrecision(table) {
for (let i = 0; i < table.length; i++) {
for (let key in table[i]) {
if (key === "interest" || key === "totInterest" || key === "balance") {
table[i][key] = table[i][key].toFixed(0);
}
}
}
}
setPrecision(calcTable);
function localeSet(table) {
for (let i = 0; i < table.length; i++) {
for (let key in table[i]) {
if (key === "interest" || key === "totInterest" || key === "balance") {
table[i][key] = new Intl.NumberFormat("fr", {
minimumFractionDigits: 0
}).format(table[i][key]);
} else {
table[i][key] = new Intl.NumberFormat("fr").format(table[i][key]);
}
}
}
}
localeSet(calcTable);
*/
//*********************************************
//************* CREATE HTML TABLE *************
//*********************************************
var tableSelector = "TblCalc";
//call the jsonToTable Function
jsonToTable(calcTable, tableSelector);
function addEl(parent, nodeName, className) {
var element = document.createElement(nodeName);
if (className) element.className = className;
if (parent) parent.appendChild(element);
return element;
}
function addText(parent, text) {
parent.appendChild(document.createTextNode(text));
}
function jsonToTable(json, selector) {
var table = addEl(null, "table", "tbl-container");
var tbody = addEl(table, "tbody");
var thr = addEl(tbody, "tr", "tbl-headers");
//loop through the property names of the first object
for (var propertyName in json[0]) {
addText(addEl(thr, "th"), propertyName);
}
//loop through the array of objects
for (var ind = 0; ind < json.length; ind++) {
var item = json[ind];
var tr = addEl(tbody, "tr", "tbl-rows");
//loop though each of the objects properties
var first = ind != json.length - 1; // no first item for last row
for (var key in item) {
var el = addEl(tr, "td");
if (first) {
// <---- point of interest
el = addEl(el, "div", "tbl-name-container ");
el = addEl(el, "div", "tbl-name-text");
first = false;
}
//append the table data containing the objects property value
addText(el, "" + item[key]);
}
}
var target = document.getElementById(selector);
target.innerHTML = "";
target.appendChild(table);
}
//*********************************************
//******************** INIT *******************
//*********************************************
document.getElementById("finalValue").innerHTML = F.toFixed(0);
document.getElementById("finalValueTwo").innerHTML = calcTable[nper].balance;
document.getElementById("finalTotalPayments").innerHTML =
calcTable[nper].totPayment;
document.getElementById("finalTotalInterest").innerHTML =
calcTable[nper].totInterest;
}
<div class="finalValue">Final Value v.1: <span id="finalValue">0</span></div>
<div class="finalValue">Final Value v.2: <span id="finalValueTwo">0</span></div>
<div class="finalValue">Final Total Payments: <span id="finalTotalPayments">0</span></div>
<div class="finalValue">Final Total Interest: <span id="finalTotalInterest">0</span></div>
<!-- INPUTS -->
<div>
P: <input id="calc_P" type="number" value="1000">
<input type="range" value="1000" step="100" max="10000"><br>
</div>
<div>
A: <input id="calc_A" type="number" value="10">
<input type="range" value="10" step="10" max="500"><br>
</div>
<div>
t: <input id="calc_t" type="number" max="50" value="2">
<input type="range" value="2" max="50"><br>
</div>
<div>
r: <input id="calc_r" type="number" value="10">
<input type="range" value="10" step=".1" max="25"><br>
</div>
<!-- TABLE -->
<div id="TblCalc" class="card table-card"></div>
<!-- JS -->
<script type="text/javascript" src="test2.js"></script>
