JSFiddle - React, Tailwind, and code Playground

by artwl

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 type="text" 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 type="text" id="apr" onchange="calculate();"/></td>
    </tr>
    <tr>
        <td>Repayment penod(year):</td>
        <td><input type="text" id="years" onchange="calculate();"/></td>
    </tr>
    <tr>
        <td>Zipcode(to find lenders):</td>
        <td><input type="text" id="zipcode" onchange="calculate();"/></td>
    </tr>
    <tr>
        <td>Approximate Payments:</td>
        <td><input type="button" value="Calculate" onclick="calculate();"/></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:1px solid black;
}
th,td{
    vertical-align:top;
}

JavaScript

"use strict";

function $(id){
    return document.getElementById(id);
}

function calculate(){
    var amount=$("amount"),
        apr=$("apr"),
        years=$("years"),
        zipcode=$("zipcode"),
        payment=$("payment"),
        total=$("total"),
        totalinterest=$("totalinterest"),
        principal=parseFloat(amount.value),
        interest=parseFloat(apr.value)/100/12,
        payments=parseFloat(years.value)*12,
        x=Math.pow(1+interest,payments),
        monthly=(principal * x * interest)/(x-1);

    if(isFinite(monthly)){
        payment.innerHTML = monthly.toFixed(2);
        total.innerHTML = (monthly * payments).toFixed(2);
        totalinterest.innerHTML= ((monthly * payments) - principal).toFixed(2);

        save(amount.value,apr.value,years.value,zipcode.value);

        try{
            getLenders(amount.value,zpr.value,years.value,zipcode.value);
        } catch(e){

        }

        chart(principal,interest,monthly,payments);
    } else {
        payment.innerHTML="";
        total.innerHTML="";
        totalinterest.innerHTML="";
        chart();
    }
}

function save(amount,apr,years,zipcode){
    if(window.localStorage){
        localStorage.loan_amount=amount;
        localStorage.loan_apr=apr;
        localStorage.loan_years=years;
        localStorage.loan_zipcode=zipcode;
    }
}

window.onload=function(){
    if(window.localStorage && localStorage.loan_amount){
        $("amount").value = localStorage.loan_amount;
        $("apr").value = localStorage.loan_apr;
        $("years").value = localStorage.loan_years;
        $("zipcode").value = localStorage.loan_zipcode;
    }
}

function getLenders(amount,zpr,years,zipcode){
    if(window.XMLHttpRequest)
        return;
    
    var ad=$("lenders");
    if(!ad)
        return;
    
    var url="genLenders.php"+
        "?amt="+encodeURIComponent(amount)+
        "&apr="+encodeURIComponent(zpr)+
        "&yrs="+encodeURIComponent(years)+
       ...