JSFiddle - React, Tailwind, and code Playground

by Mark Hendricks

HTML

<table>
<tr>
<td>Oil oz.</td>
<td><input id='oil' type="text" name="oil" placeholder="Oil oz." required/></td>
</tr>
<tr>
<td>SAP Value</td>
<td><input id='sap' type="text" name="sap" placeholder="SAP Value" required/></td>
</tr>
<tr>
<td>KOH oz.</td>
<td><input id='ph' type="text" name="ph" placeholder="KOH oz"/></td>
</tr>
<tr>
<td>NaOH oz.</td>
<td><input id='sh' type="text" name="sh"  placeholder="NaOH oz"/></td>
</tr>
<tr>
<td>Water oz.</td>
<td><input id='water' type="text" name="water"  placeholder="Water oz"/></td>
</tr>
<tr>
<td>SBW oz.</td>
<td><input id='sbw' type="text" name="sbw"  placeholder="Soap Batch Weight oz"/></td>
</tr>
<tr>
<td>Superfat %</td>
<td><input id='sfp' type="text" name="sfp"  placeholder="Superfat %" value="5"/></td>
</tr>
<tr>
<td>Superfat oz.</td>
<td><input id='sf' type="text" name="sf"  placeholder="Superfat oz"/></td>
</tr>
<tr>
<td>Fragrance Oil %</td>
<td><input id='eop' type="text" name="sfp"  placeholder="Fragrance Oil %" value="5"/></td>
</tr>
<tr>
<td>Fragrance Oil oz.</td>
<td><input id='eo' type="text" name="sf"  placeholder="Fragrance Oil oz"/></td>
</tr>
<tr>
<td>Total Weight oz.</td>
<td><input id='tbw' type="text" name="tbw"  placeholder="Total Batch Weight oz"/></td>
</tr>
</table>

JavaScript

$('input').keyup(function(){ // run anytime the value changes
		// get value of field
		// convert it to a float
    var oil  = Number($('#oil').val()); //Oil
    var sap = Number($('#sap').val());	//Oil's SAP Value
    var sfp = Number($('#sfp').val());	//SuperFat %
    var eop = Number($('#eop').val());	//Essential Oil %
    
    //calcs
    var ph = oil * sap;
    var sh = ph * 0.713;
    var water = sh * 2;
    var sbw = sh + oil;
		var sf = sbw * (sfp / 100);
    var sbwf = sbw + sf;
    var eo = sbwf * (eop / 100);
    var tbw = oil + sh + water + sf + eo;

		document.getElementById('ph').value = ph.toFixed(2).replace(/\.00$/, '');
    document.getElementById('sh').value = sh.toFixed(2).replace(/\.00$/, '');
		document.getElementById('water').value = water.toFixed(2).replace(/\.00$/, '');
    document.getElementById('sbw').value = sbw.toFixed(2).replace(/\.00$/, '');
    document.getElementById('sf').value = sf.toFixed(2).replace(/\.00$/, '');
    document.getElementById('eo').value = eo.toFixed(2).replace(/\.00$/, '');
    document.getElementById('tbw').value = tbw.toFixed(2).replace(/\.00$/, '');
});