JSFiddle - React, Tailwind, and code Playground

by ZachWills

HTML

<fieldset class="future-value">
    <legend>Future Value Calc</legend>
    <form>
        <label for="present_value">Present Value:</label>
        $<input type="text" id="present_value" value="0" />
        <br />
        <label for="rate_of_appreciation">Rate of Appreciation:</label>
        <input type="text" id="rate_of_appreciation" value="0" />%
        <br />
        <label for="term_mths">Terms (mths):</label>
        <input type="text" id="term_mths" value="0" />
        <br />
        <label>Future Value (mths):</label> <span id="future_value">--</span>

    </form>
</fieldset>

<fieldset class="repair-budget">
    <legend>Repair Budget Calc</legend>
    <form>
        <label for="kitchen_cabinets">Kitchen Cabinets</label>
        $<input type="text" id="kitchen_cabinets" value="0" />
        
        <br />
        
        <label for="counter_tops">Counter Tops</label>
        $<input type="text" id="counter_tops" value="0" />
        
        <br />
        
        <label for="appliances">Appliances</label>
        $<input type="text" id="appliances" value="0" />
        
        <br />
          
        <label for="repair_total">Total</label>
        <span id="repair_total">--</span>
    </form>
</fieldset>

<fieldset class="finance-calc">
    <legend>Finance Calc</legend>
    <form>
        <label for="purchase_price">Purchase Price</label>
        $<input type="text" id="purchase_price" value="0" />
        
        <br />
        
        <label for="repairs">Repairs</label>
        $<input type="text" id="repairs" value="0" />
        
        <br />
        
        <label for="closing_cost">Closing Cost</label>
        $<input type="text" id="closing_cost" value="0" />
        
        <br />
        
        <label for="taxes_yearly">Taxes Yearly</label>
        $<input type="text" id="taxes_yearly" value="0" />
        
        <br />
        
        <label for="insurance">Insurance</label>
        $<input type="text" id="insurance"...

CSS

body {
    font-family:"Arial";
}
fieldset legend {
    padding: 0.5em;
    font-size: 1.1em;
}
fieldset input {
    padding: 0.15em 0.35em;
}
fieldset label {
    display: inline-block;
    width: 200px;
}
fieldset {
    margin-bottom: 2em;
}

JavaScript

/**
 *
 * The following 'calc' object has all the functions that power our calculator
 *
 */
var calc = {
    /**
     * Internal function to comma separate numbers (100,000 vs 100000)
     */
    commaSeparateNumber: function (val) {
        while (/(\d+)(\d{3})/.test(val.toString())) {
            val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
        }
        return val;
    },

    /**
     * Internal function to format the user input numbers
     */
    formatUserNumber: function (num) {
        num = num.replace(',', '');
        return num;
    },

    /**
     * Function that determines the future value of a home
     */
    futureValue: function () {
        var future_value = $("#future_value");
        var present_value = this.formatUserNumber($("#present_value").val());
        var rate_of_appreciation = $("#rate_of_appreciation").val() / 100;
        var terms_mths = $("#term_mths").val();

        //future value calc
        var future_value_calculation = parseFloat(present_value) * Math.pow((1 + parseFloat(rate_of_appreciation)), (parseInt(terms_mths, 10) / 12));
        
        //set the 'value'
        future_value.html("$" + this.commaSeparateNumber(future_value_calculation.toFixed(2)));

    },
    
    /**
     * Function that determines the repair budget
     */
    repairBudget: function() {
        var sum = 0;
        var _this = this;
        $(".repair-budget input").each(function(i, v) {
            var value = $(this).val();
            if( value != '') {
                sum = sum + parseFloat( _this.formatUserNumber(value) );
            } else {
                sum = sum + parseFloat(0);                
            }
            
            $("#repair_total").html("$" + _this.commaSeparateNumber(sum.toFixed(2)));
        });
    },
    
    /**
     * Function that determines the finance calc
     */
    financeCalc: function() {
        var purchase_price = this.formatUserNumber($("#purchase_price").val());
    ...