JSFiddle - React, Tailwind, and code Playground

by greenhulk01

HTML

<table>
<tr><th>Enter Loan Data:</th> <td></td>
<th>Loan Balance, Cumulative Equity, and Interest Payments</th></tr> <tr><td>Amount of the loan ($):</td>
<td><input id="amount" onchange="calculate();"></td> <td rowspan=8>
<canvas id="graph" width="400" height="250"></canvas></td></tr> <tr><td>Annual interest (%):</td>
<td><input id="apr" onchange="calculate();"></td></tr> <tr><td>Repayment period (years):</td>
<td><input id="years" onchange="calculate();"></td> <tr><td>Zipcode (to find lenders):</td>
<td><input id="zipcode" onchange="calculate();"></td> <tr><th>Approximate Payments:</th>
<td><button onclick="calculate();">Calculate</button></td></tr> <tr><td>Monthly payment:</td>
<td>$<span class="output" id="payment"></span></td></tr> <tr><td>Total payment:</td>
<td>$<span class="output" id="total"></span></td></tr>
<tr><td>Total interest:</td>
<td>$<span class="output" id="totalinterest"></span></td></tr>
<tr><th>Sponsors:</th><td colspan=2>
Apply for your loan with one of these fine lenders: <div id="lenders"></div></td></tr>
</table>

CSS

.output { font-weight: bold; }
#payment { text-decoration: underline; } #graph { border: solid black 1px; }
th, td { vertical-align: top; }

JavaScript

function calculate() {
    var amount = document.getElementById("amount");
    var apr = document.getElementbyId("apr");
    var years = document.getElementById("years");
    var zipcode = document.getElementById("zipcode");
    var payment = document.getElementById("payment");
    var total = document.getElementById("total");
    var totalinterest = document.getElementById("totalinterest");
    
    var principal = parseFloat(amount.value);
    var interest = parseFloat(apr.value) / 100 / 12;
    var payments = parseFloat(years.value) * 12;