JSFiddle - React, Tailwind, and code Playground

by smash120

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<table>
  <tr id="payment">
    <td>Payment</td>
    <td>$3000</td>
  </tr>
  <tr id="down_payment">
    <td>Down Payment</td>
    <td>$300</td>
  </tr>
  <tr id="financed_amount">
    <td>Amount Financed</td>
    <td>$2700</td>
  </tr>
  <tr id="term">
    <td>Term</td>
    <td>22 months</td>
  </tr>
  <tr id="interest_rate">
    <td>Interest rate</td>
    <td>0%</td>
  </tr>
  <tr id="monthly_payment">
    <td>Monthly Payment</td>
    <td>$122.73</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">
      <h5 style="font-size: .9em; text-align: center">Enter higher down payment to lower monthly payment</h5></td>
  </tr>
  <tr id="update_button">
    <td>
      <input type="number" value="" min="300" max="3000" name="change_amount" id="change_amount" style="width:100px; margin-left: 24%;" />
      <br>
      <label for="change_amount" class="error" style="display:none;margin-left: 10%;"></label>
    </td>
    <td>
      <input type="button" value="Update" name="update_down_payment" id="update_down_payment" />
    </td>
  </tr>
</table>

JavaScript

$('#update_down_payment').click(function(e) {
  var down_payment = $('#change_amount').val();
  var min = $('#change_amount').attr('min');
  var max = $('#change_amount').attr('max');
  alert('down payment=' + down_payment + ' Min=' + min + ' Max=' + max);
  if (down_payment == "" || down_payment > min && down_payment < max) {
    $('.error').text("Please input down payment between " + Number(min).toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0
    }) + " and " + Number(max).toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0
    }));
    $('.error').show();
  } else {
    var payment = $("#payment td:nth-child(2)").text().replace(/\D/g, '') * 1;
    var financed_amount = (payment - down_payment);
    $('.error').hide();
    $('#down_payment td:nth-child(2)').text(Number(down_payment).toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0
    }));
    $('#financed_amount td:nth-child(2)').text(Number(financed_amount).toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0
    }));
    $('#monthly_payment td:nth-child(2)').text(Number(financed_amount / 22).toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0
    }));
  }
});