JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="span5">
<form id="EstimateForm" action="" method="post" class="form-horizontal"
<input type="hidden" name="workemail" value="">  
<input type="hidden"  id="HST" name="HST" class="span3">
<input type="hidden"  id="Subtotal" name="Subtotal">
<input type="hidden"  id="Total" name="Total">
<fieldset>
  <!-- Form Name -->
  <h2>Price Estimator</h2>
  <!-- Text input-->
  <div class="control-group">
    <label class="control-label">Drive From Yard</label>
    <div class="controls">
      <input id="DriveFromYard" name="DriveFromYard" type="text" rel="eta" class="input-small">
    </div>
  </div>
  <!-- Text input-->
  <div class="control-group">
    <label class="control-label">Loading</label>
    <div class="controls">
      <input id="Loading" name="Loading" type="text" rel="eta" class="input-small">
    </div>
  </div>
  <!-- Text input-->
  <div class="control-group">
    <label class="control-label">Drive Time</label>
    <div class="controls">
      <input id="DriveTime" name="DriveTime" type="text" rel="eta" class="input-small">
    </div>
  </div>
  <!-- Text input-->
  <div class="control-group">
    <label class="control-label">Offloading</label>
    <div class="controls">
      <input id="Offloading" name="Offloading" type="text" rel="eta" class="input-small">
    </div>
  </div>
  <!-- Text input-->
  <div class="control-group">
    <label class="control-label">Drive To Yard</label>
    <div class="controls">
      <input id="DriveToYard" name="DriveToYard" type="text" rel="eta" class="input-small">
    </div>
  </div>
  <!-- Text input-->
  <div class="control-group">
    <label class="control-label">Travel Distance</label>
  ...

JavaScript

$("#FirstHourRate, #HalfHourRate, [rel='eta']").keyup(recalc);
  
  function recalc() {
  
      $("#subtotal").calc(
      // the equation to use for the calculation
      "FirstHourRate + (eta-1)*2*HalfHourRate", {
          bind: "keyup",
  		eta: $("[rel='eta']").sum(),
          FirstHourRate: $("#FirstHourRate"),
          HalfHourRate: $("#HalfHourRate")
      }, function(s) {
          // return the number as a dollar amount
          var gt = s.toFixed(2) * 1.13;
          $("#hst").text("$" + gt.toFixed(2));
          return "$" + s.toFixed(2);
          
      });
  }