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;

    var x = Math.pow(1 + interest, payments);
    var monthly = (principal * x * interest) / (x - 1);

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

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

        try {
            getLenders(amount.value, apr.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) {
        document.getElementById("amount").value = localStorage.loan_amount;
        document.getElementById("apr").value = localStorage.loan_apr;
        document.getElementById("years").value = localStorage.loan_years;
        document.getElementById("zipcode").value = localStorage.loan_zipcode;
    }
};

function getLenders(amount, apr, years, zipcode) {
    if (!window.XMLHttpRequest) return;

    var ad = document.getElementById("lenders");
    if (!ad) return;
   ...