JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<form class="form-calc">
      <table class="calculadora">
      <th class="semBorda-bottom">Qtd. Parc.</th>
      <th class="semBorda-bottom">Valr. Parc.</th>
      <th class="semBorda-bottom">Total Parc.</th>
      <tr>
        <td class="bordaPreta">
          <input class="centralizado qtd-parc" type="text"  name="qtd-parc" placeholder="1"/>
        </td>
        <td class="bordaPreta">
          <span>R$ </span><input class="valorMonetario valr-parc" type="text" name="valr-parc" value="0.00" />
        </td>
        <td class="bordaPreta">
          <span>R$ </span><input class="valorMonetario total-parc" type="text"name="total-parc" value="0.00" />
        </td>
      </tr>
       <tr>
        <td></td>
        <td></td>
        <td class="semBorda-bottom">A Vista</td>
      </tr>
       <tr>
        <td></td>
        <td class="semBorda-right"></td>
        <td class="bordaPreta">
           <span>R$ </span><input class="valorMonetario avista" type="text"name="avista" value="0.00" />
        </td>
      </tr>
       <tr>
        <td></td>
        <td class="semBorda-right"></td>
        <td class="semBorda-bottom">Diferença</td>
      </tr>
       <tr>
        <td></td>
        <td class="semBorda-right"></td>
        <td class="bordaPreta">
          <span>R$ </span><input class="valorMonetario diferenca" type="text" name="diferenca" value="0.00" />
        </td>
      </tr>
    </table>
</form>

CSS

.calculadora{
  border-collapse: collapse;
  text-align: center;
}

 th, td{ border: 1px solid #dadcdd; }
 
.semBorda-bottom{ border-bottom-style: none; }
.semBorda-right{ border-right-style: none; }
.bordaPreta{ border: 1px solid black; }

.form-calc input[type="text"] {

  width: 65px;
  background: transparent;
  border: none;
}

.centralizado{
    text-align: center;
}

.valorMonetario{
  color: red;
}

JavaScript

/*
 Author DiF - Clube do Hardware
 Cálculo Total da parcela multiplicando o valor da "Qtd." com o "Valr.".
 Cálculo da Diferença o valor "A Vista" - (menos) o "Total Parc."

*/

$(document).ready(function(){

    //inpuyt quantidade
		var qtd_parc   = $(".qtd-parc");
    
    //input valor parcela
    var valr_parc  = $(".valr-parc");
    
    //input total parcela
    var total_parc = $(".total-parc");
    
    //input diferença
    var dif  = $(".diferenca");
    
    //input a vista
    var avista     = $(".avista"); 
    
    
    //quando digita no input qtd parcela
    qtd_parc.on("keyup", function(){
       
         //calcula o total da parcela
    	  var multiplica = qtd_parc.val() * valr_parc.val();
        
        //insere o resultado do cálculo no input do total parcela
        total_parc.val(multiplica);
    });
    
    
    //quando digita no input a vista
    avista.on("keyup", function(){
    
        //calcula a diferença entre a vista e parcelado
    	  var diferenca =  avista.val() - total_parc.val();
        
        //insere o resultado do cálculo no input da diferença
        dif.val(diferenca);
    });

});