JSFiddle - React, Tailwind, and code Playground

by Darcy Voutt

HTML

<div class="content">
<input type="text" class="input" value="5" />
<input type="text" class="multiplier" value="2.5" readonly />

<input type="text" class="output" readonly />
</div>

CSS

body {
  font-family: Helvectica;  
  background: #efefef;
  color: #777777;
}

.content {
  background: #ffffff;
  margin: 10% auto;
  display: block;
  padding: 20px;
  width: 60%;
}

input {
  width: 60px;
}

JavaScript

var formCalc = function (input, multiplier, output) {
  var reloadCalc = function () {
  var formula = parseFloat($(input).val()) * parseFloat($(multiplier).val());
  $(output).val(formula.toFixed(0));    
  };
  $(document).ready(function () {
    $(input).on("keyup", function () {
       reloadCalc();
    });
    $(input).trigger("keyup");     
  });
};

formCalc('.input', '.multiplier', '.output');