JSFiddle - React, Tailwind, and code Playground

by yourbudweiser

HTML

<form name="calc" method="post" action="#">

    <table border='1' cellpadding='4' cellspacing='0'>
        <tbody>

            <tr>
                <td nowrap>
                    Home value:
                </td>
                <td align="center">
                    <span class="input-group-addon">$</span>
                    <input id="appraised-value" type="number" min="0" max="10000000" step="25000"
                        class="form-control" name="appraisedValue"
                        onKeyUp="calcLoanAmount(this.form);computeForm(this.form)" value="0"
                        onfocus="if(this.value==this.defaultValue)this.value=''"
                        onblur="if(this.value=='')this.value=this.defaultValue">
                </td>
            </tr>

            <tr>
                <td nowrap>
                    Down payment:
                </td>
                <td align="center">
                    <span class="input-group-addon">$</span>
                    <input id="down-payment" type="number" min="0" max="10000000" step="5000" class="form-control"
                        name="downPayment" 
                        onKeyUp="updatePmt(this.form);calcLoanAmount(this.form);computeForm(this.form,)" value="0"
                        onfocus="if(this.value==this.defaultValue)this.value=''">
                    <input id="down-payment-percent" type="number" min="0" max="100" step="1" class="form-control"
                        name="downPaymentPercent" 
                        onKeyUp="updatePct(this.form);calcLoanAmount(this.form);computeForm(this.form)"
                        value="0" 
                        onfocus="if(this.value==this.defaultValue)this.value=''">
                    <span class="input-group-addon">%</span>
                </td>
            </tr>

            <tr>
                <td nowrap>
                    Principal:
                </td>
                <td align="center">
                    <span...

JavaScript

function computeMonthlyPayment(prin, numPmts, intRate) {

    var pmtAmt = 0;

    if (intRate == 0) {
        pmtAmt = prin / numPmts;
    } else {
        intRate = intRate / 100.0 / 12;

        var pow = 1;
        for (var j = 0; j < numPmts; j++)
            pow = pow * (1 + intRate);

        pmtAmt = (prin * pow * intRate) / (pow - 1);

    }

    return pmtAmt;

}

function fn(num, places, comma) {

    var isNeg = 0;

    if (num < 0) {
        num = num * -1;
        isNeg = 1;
    }

    var myDecFact = 1;
    var myPlaces = 0;
    var myZeros = "";
    while (myPlaces < places) {
        myDecFact = myDecFact * 10;
        myPlaces = Number(myPlaces) + Number(1);
        myZeros = myZeros + "0";
    }

    onum = Math.round(num * myDecFact) / myDecFact;

    integer = Math.floor(onum);

    if (Math.ceil(onum) == integer) {
        decimal = myZeros;
    } else {
        decimal = Math.round((onum - integer) * myDecFact)
    }
    decimal = decimal.toString();
    if (decimal.length < places) {
        fillZeroes = places - decimal.length;
        for (z = 0; z < fillZeroes; z++) {
            decimal = "0" + decimal;
        }
    }

    if (places > 0) {
        decimal = "." + decimal;
    }

    if (comma == 1) {
        integer = integer.toString();
        var tmpnum = "";
        var tmpinteger = "";
        var y = 0;

        for (x = integer.length; x > 0; x--) {
            tmpnum = tmpnum + integer.charAt(x - 1);
            y = y + 1;
            if (y == 3 & x > 1) {
                tmpnum = tmpnum + ",";
                y = 0;
            }
        }

        for (x = tmpnum.length; x > 0; x--) {
            tmpinteger = tmpinteger + tmpnum.charAt(x - 1);
        }


        finNum = tmpinteger + "" + decimal;
    } else {
        finNum = integer + "" + decimal;
    }

    if (isNeg == 1) {
        finNum = "-" + finNum;
    }

    return finNum;
}

function sn(num) {

    num = num.toString();

    var len = num.length;
    var rnum...