JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div class="expenses-form">
      <form id="Expenses" class="form-horizontal" action="/www.website.com/backend/web/index.php?r=expenses/update&amp;id=1" method="post">
        <div class="modal-body">
          <div class="row">
            <div class="field-expenses-expenseid">
              <div class="col-md-2 no-padding"><label class="control-label" for="expenses-expenseid">Expense ID</label></div>
              <div class="col-md-2">
                <input type="text" id="expenses-expenseid" class="form-control" name="Expenses[ExpenseId]" value="1" disabled="true" />
                <p class="help-block help-block-error"></p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="field-expenses-subtotal">
              <div class="col-md-2 no-padding"><label class="control-label" for="expenses-subtotal">Sub Total</label></div>
              <div class="col-md-2">
                <input type="text" id="expenses-subtotal" class="form-control text-right" name="Expenses[SubTotal]" value="3212.00" />
                <p class="help-block help-block-error"></p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="field-expenses-regionaltax">
              <div class="col-md-2 no-padding"><label class="control-label" for="expenses-regionaltax">Regional Tax</label></div>
              <div class="col-md-2">
                <input type="text" id="expenses-regionaltax" class="form-control text-right" name="Expenses[RegionalTax]" value="0.07" onchange="recalcTotal();" />
                <p class="help-block help-block-error"></p>
              </div>
            </div>
          </div>
          <div class="row">
            <div...

JavaScript

function recalcTotal(event){
        'use strict';
        console.log(this)

        $(this).val(formatCurrency(parseFloat($(this).val())));
        
        var subtotal = parseFloat($('#expenses-subtotal').val());
        var regionaltax = parseFloat($('#expenses-regionaltax').val());
        var federaltax = parseFloat($('#expenses-federaltax').val());
        
        var total = subtotal + regionaltax + federaltax;
        $('#expenses-total').val(formatCurrency(total));
    }
    function formatCurrency(value){
        'use strict';

        var noDecimals = 2;
        var factor = Number("1" + "0".repeat(noDecimals));
        if(value === ""){ value = 0;}
        if(value === 0){
            value = value.toFixed(noDecimals);
        }else{
            if (typeof (value) === 'string') {
                value = value.replace(/[$,]+/g,"");
            }
            value = parseFloat(value);
            value = (Math.round(value * factor) / factor).toFixed(noDecimals);
        }
        // value = '$ ' + value;
        return value;
    }