JSFiddle - React, Tailwind, and code Playground

by Rodney Golpe

HTML

<form name="loan" actopm="/echo/html/" method="post">
    <label>Amount: <input type="number" value="15000" name="amount" /></label>
<br/>
<label>Term: <select name="term"><option selected>36</option><option>60</option></select></label>
<br/>
<label>FICO: <input type="number" value=721 name="fico" /></label>
<br/>
<label>Income: <input type="number" value=6500 name="income" /></label>
<br/>
<label>Homeowner: <select name="ownHome"><option value=0>No</option><option value=1 selected>Yes</option></select></label>
<br/>
<label>Months at current job: <input type="number" name="employLen" value=60 /></label>
<br/>
<label>Credit Inquiries: <input type="number" name="inquiries" value=0 /></label>
<br/>
<label>Other revolving debt: <input type="text" name="debt" value="825.5" /></label>
    <br/>
    <input type="submit" value="submit"/>
</form>

<p>
    <b>Rate: </b> <span id="finalRate"></span>
    <br/>
    <b>APR: </b> <span id="apr"></span>
    <br/>
    <b>Payment: </b> <span id="finalPmt"></span>
    <br/>
    <b>PCDTI: </b> <span id="finalPcdti"></span>
    <br/>
    <b>PCPTI: </b> <span id="finalPcpti"></span>
</p>

JavaScript

var form = document.forms.loan,
    LOAN = form.elements;

form.onsubmit = function () {
    getRateInfo();
    return false;
};

var guardRails = {
    fico: { max: 900, min: 640 },
    loanAmount: { max: 35000, min: 10000 }
};

var incomeBrackets = {
    10000: "H",
    5000: "M",
    0: "L"
};

var channels = {
    740: {
        H: {
            originFee: .01,
            pcdtiMax: .35,
            pcptiMax: .2,
            loanMax: 35000,
            termMax: 60,
            baseRate: .0504
        },
        M: {
            originFee: .01,
            pcdtiMax: .35,
            pcptiMax: .2,
            loanMax: 35000,
            termMax: 60,
            baseRate: .0517
        },
        L: {
            originFee: .01,
            pcdtiMax: .35,
            pcptiMax: .15,
            loanMax: 30000,
            termMax: 60,
            baseRate: .0582
        }
    },
    720: {
        H: {
            originFee: .02,
            pcdtiMax: .35,
            pcptiMax: .2,
            loanMax: 35000,
            termMax: 60,
            baseRate: .0517
        },
        M: {
            originFee: .02,
            pcdtiMax: .35,
            pcptiMax: .2,
            loanMax: 35000,
            termMax: 60,
            baseRate: .0530
        },
        L: {
            originFee: .02,
            pcdtiMax: .35,
            pcptiMax: .15,
            loanMax: 30000,
            termMax: 60,
            baseRate: .0595
        }
    },
    700: {
        H: {
            originFee: .03,
            pcdtiMax: .35,
            pcptiMax: .2,
            loanMax: 30000,
            termMax: 60,
            baseRate: .0812
        },
        M: {
            originFee: .03,
            pcdtiMax: .35,
            pcptiMax: .2,
            loanMax: 30000,
            termMax: 60,
            baseRate: .0825
        },
        L: {
            originFee: .03,
            pcdtiMax: .35,
            pcptiMax: .15,
            loanMax: 20000,
            termMax:...