javascript experts!
I am developing my mortgage calculator and it looks like I need your help badly.
My app is implementing conventional mortgage calculator where you input mortgage amount, term and interest rate and it is supposed to provide a loan payments breakdown by months using Jquery datatables plugin.
So far my html is:
$(document).ready(() => {
//restrict input to certain types
$('[restrict]').on('keyup', function () {
switch ($(this).attr('restrict')) {
case 'integer':
$(this).val($(this).val().replace(/[^0-9]*/g, ''));
case 'float':
$(this).val($(this).val().replace(/[^\.0-9]*/g, ''));
}
});
$('#breakdown').on('click', () => {
//get the array of payments
var amount = $('#amount').val();
var months = $('#term').val();
var interest = $('#interest').val();
var breakdown = [];
for(var i = 0; i < months; i++){
var row = {};
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
row.month = monthNames[i%12]+', '+$('#year').val();
row.principal = (amount/months).toFixed();
row.interest = ((amount*interest)/months).toFixed();
row.balance = (amount*(1-i/months)).toFixed();
breakdown.push(row);
}
$('#mortgageTable').DataTable({
data: breakdown,
destroy: true,
dom: 'ftip',
columnDefs: [
{targets: 0, data: 'month', title: 'Month'},
{targets: 1, data: 'principal', title: 'Principal'},
{targets: 2, data: 'interest', title: 'Interest'},
{targets: 3, data: 'balance', title: 'Balance'},
]
});
});
});
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="mortgagecalc.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<div style="display:block; margin: 5px"><label>Loan amount, USD:</label><input id="amount" restrict="integer"></input></div>
<div style="display:block; margin: 5px"><label>Loan term, months:</label><input id="term" restrict="integer"></input></div>
<div style="display:block; margin: 5px"><label>First month:</label><select id="month">
<option value="Jan">Jan</option>
<option value="Jan">Feb</option>
<option value="Jan">Mar</option>
<option value="Jan">Apr</option>
<option value="Jan">May</option>
<option value="Jan">Jun</option>
<option value="Jan">Jul</option>
<option value="Jan">Aug</option>
<option value="Jan">Sep</option>
<option value="Jan">Oct</option>
<option value="Jan">Nov</option>
<option value="Jan">Dec</option>
</select>
<select id="year">
<option value="2019">2019</option>
<option value="2020">2020</option>
</select></div>
<div style="display:block; margin: 5px"><label>Interest rate, %:</label><input id="interest" restrict="float"></input></div>
<button id="breakdown">Mortgage breakdown</button>
<table id="mortgageTable"></table>
</body>
</html>
And I got it working in a way, but the major issue I'm facing, the payments for each consecutive month should get decreased due to decreasing debt leftover and as such decreased interest payments.
Is there a way I can cope with that using datatables features?
So, my expected output for $100,000, 36 months, 5% should be like:
principal interest balance
2777.78 416.67 100000.00
2777.78 405.09 97222.22
2777.78 393.52 94444.44
2777.78 381.94 91666.67
2777.78 370.37 88888.89
In my current implementation, only the first row is calculated properly and the rest row do not have 'balance' and 'interest' decreased proportionally
from Implement recursive calculations for my mortgage calculator
No comments:
Post a Comment