JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 
<form class="col-xs-12">
  <div class="type-fields">
    <div class="form-group">
      <label for="original-di">ORIGINAL DI</label>
      <input type="text" class="form-control" id="original-di">
    </div>
    <div class="form-group">
      <label for="wg-scout">WG/Scout</label>
      <input type="text" class="form-control" id="wg-scout">
    </div>
    <div class="form-group">
      <label for="transorb-r">TRANSORB R</label>
      <input type="text" class="form-control" id="transorb-r">
    </div>
    <div class="form-group">
      <label for="ultra">ULTRA</label>
      <input type="text" class="form-control" id="ultra">
    </div>
    <div class="form-group">
      <label for="sumisoya">SUMISOYA</label>
      <input type="text" class="form-control" id="sumisoya">
    </div>
  </div>
  
  <div class="form-group">
    <label for="qtd-litros">Qtd Litro Equivalente</label>
    <input type="text" class="form-control" id="qtd-litros" readonly>
  </div>
  <div class="form-group">
    <label for="vol-kregs">Volume em Kregs</label>
    <input type="text" class="form-control" id="vol-kregs" readonly>
  </div>
  <div class="form-group">
    <label for="vol-inc-kregs">Volume Incentivo (Kregs)</label>
    <input type="text" class="form-control" id="vol-inc-kregs" readonly>
  </div>
  <div class="form-group">
    <label for="fator-calculo">Fator calculo</label>
    <input type="text" class="form-control" id="fator-calculo" readonly>
  </div>
  <div class="form-group">
    <label for="premio-roundup">Premiação Roundup</label>
    <input type="text" class="form-control" id="premio-roundup" readonly>
  </div>
  <div class="form-group">
    <label for="premio-sumi">Premiação Sumisoya</label>
    <input type="text" class="form-control" id="premio-sumi" readonly>
  </div>
  <div class="form-group">
    <label for="premio-total">PREMIAÇÃO TOTAL</label>
    <input...

JavaScript

var field = {
		original_di: $('#original-di'),
    wg_scout: $('#wg-scout'),
    transorb_r: $('#transorb-r'),
    ultra: $('#ultra'),
    sumisoya: $('#sumisoya'),
    qtd_litros: $('#qtd-litros'),
    vol_kregs: $('#vol-kregs'),
    vol_inc_kregs: $('#vol-inc-kregs'),
    fator_calculo: $('#fator-calculo'),
    premio_roundup: $('#premio-roundup'),
    premio_sumi: $('#premio-sumi'),
    premio_total: $('#premio-total')
};

var base_semisoya = {
		centro: 12.9,
    norte: 12.9,
    sul: 16.4
};


$('.type-fields').on('keyup', 'input', function(){
	
  var calculo_prod = {
  		original_di: 1.027 * changeDot(field.original_di.val()),
  		wg: 2.0 * changeDot(field.wg_scout.val()),
      transorb_r: 1.3 * changeDot(field.transorb_r.val()),
      ultra: 1.8 * changeDot(field.ultra.val()),
      sumisoya: changeDot(field.sumisoya.val())
  };
  
  var calculo_prod_total = Number(calculo_prod.wg + calculo_prod.transorb_r + calculo_prod.ultra + calculo_prod.sumisoya);
  
  var fator_kreg = {
  		original_di: Number((calculo_prod.original_di / 3.785).toFixed(2)),
      wg: Number((calculo_prod.wg / 3.785).toFixed(2)),
      transorb_r: Number((calculo_prod.transorb_r / 3.785).toFixed(2)),
      ultra: Number((calculo_prod.ultra / 3.785).toFixed(2))
  };
  
  var calculo_kreg = fator_kreg.wg + fator_kreg.transorb_r + fator_kreg.ultra;
  
  /*fator calculo*/
  var fator_calculo = Number(calculo_prod.wg * 1.50 + calculo_prod.ultra * 2.00 + calculo_prod.transorb_r * 1.00) / calculo_prod_total;
  
  console.log(fator_calculo);
  
  /*show calcs*/
  field.qtd_litros.val(calculo_prod_total);
  field.vol_kregs.val((calculo_kreg + fator_kreg.original_di).toFixed(2));
  field.vol_inc_kregs.val(calculo_kreg);
  field.fator_calculo.val(Math.round(fator_calculo * 100) / 100);
});

function changeDot(val){
	var newVal = val.replace(',','.');
  return newVal;
};