JSFiddle - React, Tailwind, and code Playground

by fmdataweb

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="10" class="border" id="calcs">
  <tr class="d_green">
    <td colspan="4">LAST YEAR</td>
    </tr>
  <tr class="l_white">
    <td width="53%">number of instances in the last year </td>
    <td width="13%" align="right"><input name="textfield1" type="text" class="input_b_r" id="textfield1" value="0" /></td>
    <td width="24%">&nbsp;</td>
    <td width="10%">&nbsp;</td>
  </tr>
  <tr class="l_green">
    <td>average number of moderate-risk activity per week in the last year</td>
    <td align="right"><input name="textfield2" type="text" class="input_b_r" id="textfield2" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_white">
    <td>average number of hours of high-risk activity per week in the last year</td>
    <td align="right"><input name="textfield3" type="text" class="input_b_r" id="textfield3" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="d_green">
    <td colspan="4">NEXT YEAR</td>
  </tr>
  <tr class="l_white">
    <td>expected average number of hours of moderate-risk activity per week next year</td>
    <td align="right"><input name="textfield4" type="text" class="input_b_r" id="textfield4" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_green">
    <td>expected average number of hours of high-risk activity per week next year</td>
    <td align="right"><input name="textfield5" type="text" class="input_b_r" id="textfield5" value=""/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_white">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_green">
    <td>&nbsp;</td>
    <td colspan="2" style="padding-left:31px;"><input type="submit" name="button" id="Calculate" value="Calculate" class="button_calculate" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr class="l_white">
    <td>&nbsp;</td>
    <td colspan="2"...

JavaScript

$(document).ready(function(){
		
		$('#Calculate').click(function(){
			
			var IRRC2 = 1.35;
			var IRRC3 = 2.75;

			var Npast = Number($("#textfield1").val());
			var t2hrswk = Number($("#textfield2").val());
			var t3hrswk = Number($("#textfield3").val());
			var t2nexthrswk = Number($("#textfield4").val());
			var t3nexthrswk = Number($("#textfield5").val());
						
			var t2epyr = t2hrswk * 6 * 52;
			var t3epyr = t3hrswk * 6 * 52;
			var t01epyr = 52 * 7 * 24 * 6 - t2epyr - t3epyr;
			
			var epochBaseInstances = Npast / (t01epyr + IRRC2 * t2epyr + IRRC3 * t3epyr);
			
			var baselineCoefficient = Math.log(epochBaseInstances);
			
			var t2nextepyr = t2nexthrswk * 6 * 52;
			var t3nextepyr = t3nexthrswk * 6 * 52;
			var t01nextepyr = 52 * 7 * 24 * 6 - t2nextepyr - t3nextepyr;
			
			var predictedInstances = Math.exp(baselineCoefficient) * (t01nextepyr + IRRC2 * t2nextepyr + IRRC3 * t3nextepyr);
			
			var roundedPredictedInstances = Math.round( predictedInstances * 10 ) / 10;
			
			var lastYearTotal = Number($("#textfield1").val());
						 
			var extraInstancesRounded = Math.round( (roundedPredictedInstances - lastYearTotal) * 10 ) / 10;
			
			$('#textfield6').val(roundedPredictedInstances);
			$('#textfield7').val(extraInstancesRounded);
		});
    });