JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

<form class="" action="" method="" name="">
      <label> Nome</label>
      <input type="text" id="nameClient" required>
      <br>

      <label> Donut Simples</label>
      <input type="text" id="cakeDonuts" onchange="updateOrder();" required>
      <br>

      <label> Donuts Recheado</label>
      <input type="text" id="glazeDonuts" onchange="updateOrder();" required>
      <br>

      <label> Tempo</label>
      <input type="text" id="tempo" required>
      <br>

      <label> Subtotal</label>
      <input type="text" id="subtotal" readonly="readonly">
      <br>

      <label> Taxa</label>
      <input type="text" id="taxa" readonly="readonly">
      <br>

      <label> Total</label>
      <input type="text" id="total"  readonly="readonly">
      <br>

      <input type="button" onclick="placeOrder(this.form);" value="Pagar" name="name" value="">

    </form>

JavaScript

function updateOrder(){
      //const for price to donut and taxa
      const PRICEDONUT = 0.50;
      const ALIQUOTA = 0.0925;

      var numCakeDonuts  = parseInt(document.getElementById("cakeDonuts").value);
      var numGlazeDonuts = parseInt(document.getElementById("glazedDonuts").value);

      if(isNaN(numCakeDonuts))
          numCakeDonuts = 0;
      if(isNaN(numGlazeDonuts))
          numGlazeDonuts = 0;
      // sum pedido
      var subtotal  = (numCakeDonuts + numGlazeDonuts) * PRICEDONUT;
      var taxa      = subtotal*ALIQUOTA;
      var total     = subtotal + taxa;

      //show value taxa
      document.getElementById('subtotal').value = "$" + subtotal.toFixed(2);
      document.getElementById('taxa').value = "$" + taxa.toFixed(2);
      document.getElementById('total').value = "$" + total.toFixed(2);
    }

    function placeOrder(){
      form.submit();
    }