JSFiddle - React, Tailwind, and code Playground

by nickywaites

HTML

<input id="run" type="button" value="Run" />

<table>       
    <tr class="survey">
        <th></th>
        <th>BASE<br />COST</th>
        <th>GROWTH<br />FACTOR</th>
        <th>CONT.<br />FACTOR</th>
        <th>ESTIMATED<br />COST</th>
        <th>MGMT.<br />CHARGE</th>
        <th>PROJECTED<br />COST</th>
    </tr>    
    <tr class="survey" name="calc">
        <td>CTR 100 - PROCESS</td>
        <td><input type="text" name="EstCost"></td>
        <td><input type="text" name="EstCost" ></td>
        <td><input type="text" name="EstCost" ></td>
        <td><input type="text" readonly="readonly"></td>
        <td></td>
        <td><input type="text" readonly="readonly" name="Result"></td>
    </tr>
</table>

CSS

body, html, form
{
    font-family: Arial, Tahoma, sans-serif;
}

input 
{
    width:100px;
}

input[readonly] {
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-top: 2px;
}

.survey
{
    background-color:#F8FCF6;
}

.engineering 
{
    background-color:#F0F9FE;   
}

.material 
{
    background-color:#FEFEF1;
}

.construction 
{
    background-color:#FEF3F7;
}

td, th 
{
    padding-left:5px;
    padding-right:5px;
}

JavaScript

function CalculateEstimatedCost(base, growth, cont) {
    //Estimated Cost = Base Cost + (( Base Cost x Growth Factor) + (Base Cost x Contingency Factor))
    var est = base + ((base * growth) + (base * cont));

    return est;

}


function calc(callback, variables, result) {

    var vars = [];
    variables.each(function() {
        vars.push($(this).val());
    });

    console.log(vars);
    
    result.val(callback.apply(this, vars));;
}

// since 5 is less than 1000 value is set
$("#run").click(function() {

    var result = calc(CalculateEstimatedCost, $("input[name='EstCost']"), $("input[name='Result']"));
    console.log(result);

});