http://johndroach.github.io/sandbox/loanoffsetcalc.htm

1<html>
2<head>

3<script type="text/javascript"
4	src="http://dygraphs.com/dygraph-combined.js"></script>

4
5</head>

6<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" ></script>

6
7<link rel='stylesheet' href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css" />
8<body>
9<div class="container">
10<div id="title" class="jumbotron"><h1>Loan Offset Calculator </h1></div>
11<div id="inputs">
12	<form id="frm1">
13	<div class="form-group">
14		<label for="principal">Principal:</label> <input type="number" name="principal" id="principal" value="280000" class="form-control"/>
15		</div>
16		<div class="form-group">
17		<label for="loanLengthYrs">Loan Length (Years):</label> <input type="number" name="loanLengthYrs" id="loanLengthYrs" value="25"  class="form-control"/>
18		
19		</div><div class="form-group">
20		<label for="interestRateYrPercentage">Interest Rate (Year):</label> <input type="number" name="interestRateYrPercentage" id="interestRateYrPercentage" value="5"  class="form-control"/>
21		</div>
22		<div class="form-group">
23		<label for="monthlyDeposit">Monthly Deposit: Repayment + Offset (Month):</label> <input type="number" name="monthlyDeposit" value="2500" class="form-control"/>
24		</div>
25		<div class="form-group">
26		<input type="button" class="btn btn-primary" onclick="calculate()" value="Calculate" />
27	</form>
28</div>
29<div id="graphdiv" style="width:1024px; height:768px;" />
30</div>

31<script type="text/javascript">
32function calculate() {
33	// Constants
34	monthsInYear = 12.0;
35	daysInMonth = 30.0;
36	daysInYear = 365.0;
37
38	// Inputs
39	principal = parseFloat(frm1.elements["principal"].value);
40	loanLengthYrs = parseFloat(frm1.elements["loanLengthYrs"].value);
41	interestRateYrPercentage = parseFloat(frm1.elements["interestRateYrPercentage"].value);
42	monthlyDeposit = parseFloat(frm1.elements["monthlyDeposit"].value); // have this accept javascript so I can reference the monthly repayment?
43
44	// Calculated Constants
45	interestRateYr = interestRateYrPercentage / 100;
46	interestRateMonth = interestRateYr / monthsInYear;
47	numberOfPayments = loanLengthYrs * monthsInYear;
48
49	// Loop 'Constants'
50	loopPrincipal = principal;
51	loopNumberOfPayments = numberOfPayments;
52	loopOffsetTotal = 0;
53	loopCurrentMonth = 0;
54	loopTotalInterest = 0;
55	loopMinimumRepayment = 0;
56	loopOffsetForMonth = 0;
57
58	graphData = [];
59	graphData[loopCurrentMonth] = [loopCurrentMonth, loopPrincipal, loopOffsetTotal, loopTotalInterest, loopMinimumRepayment, loopOffsetForMonth];
60
61	for (loopCurrentMonth = 1; loopCurrentMonth <= numberOfPayments; loopCurrentMonth++) {
62		loopIThing = Math.pow(1 + interestRateMonth, loopNumberOfPayments);
63		loopMinimumRepayment = loopPrincipal*interestRateMonth*loopIThing/(loopIThing-1);
64		loopOffsetForMonth = monthlyDeposit - loopMinimumRepayment;
65		loopOffsetTotal += loopOffsetForMonth;
66		loopPrincipalLessOffset = loopPrincipal - loopOffsetTotal;
67		
68		if(loopPrincipalLessOffset < 0) {
69			loopInterest = 0;
70		}
71		else {
72			loopPrincipalLessOffsetPlusInterest = loopPrincipalLessOffset * Math.pow(1.0 + (interestRateYr / daysInYear), daysInYear * (1.0/monthsInYear));
73			loopInterest = loopPrincipalLessOffsetPlusInterest - loopPrincipalLessOffset;	
74		}
75
76		loopTotalInterest += loopInterest;
77		loopPrincipal = loopPrincipal + loopInterest - loopMinimumRepayment;
78		loopNumberOfPayments--;
79
80		graphData[loopCurrentMonth] = [loopCurrentMonth, loopPrincipal, loopOffsetTotal, loopTotalInterest, loopMinimumRepayment, loopOffsetForMonth];
81	}
82
83	g = new Dygraph(
84	document.getElementById("graphdiv"),
85	graphData,
86	{labels: [ "Month", "Principal", "Offset Total", "Interest Total", "Minimum Repayment", "Offset Deposit" ]}
87	);
88}
89</script>

89
90</body>
91</html>