JSFiddle - React, Tailwind, and code Playground

by diessses

HTML

<!doctype html>
<html lang="ja">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="loan.css">

    <title></title>
    <style>
        #loading, #results {
            display:none;
        }
    </style>
    <script>
  $(function(){
    jQuery("#amount").validationEngine();
  });
</script>

</head>
<body class="bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card card-body text-center mt-5">
                    <h6 class="heading display-5 pb-3">loan calc</h6>
                    <form name="loanform">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">amount</span>
                                <input class="form-control t_rlt" name="amount" placeholder="amount">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">downpayment</span>
                                <input class="form-control t_rlt" name="downpayment" placeholder="downpayment">
                            </div>
                        </div>

                        <div class="form-group">
                             'cb_amount' number must this -->  'cb_amount' =< ('amount' - 'downpayment') / 2  
                             if not show error.  
                            <div class="input-group">

                 ...

JavaScript

document.loanform.addEventListener('submit', function(e) {
  document.getElementById('results').style.display = 'none';
  document.getElementById('loading').style.display = 'block';
  setTimeout(calculateResults, 100);
  e.preventDefault();
});

function calculateResults(e) {
  console.log('Calculating...');
  
  const amount = Number( document.loanform.amount.value );
  const downpayment = Number( document.loanform.downpayment.value );
  const cb_amount = Number( document.loanform.cb_amount.value ); //たとえば40万円にするなどね

  let years, interest;

switch(document.loanform.years.value){

case "1":
years = 1;
interest = 1.5;
break;
case "2":
years = 2;
interest = 2.5;

}


  const firstMonthlyPaymentElement = document.getElementById('monthly-payment1');
  const secondToLastMonthlyPaymentElement = document.getElementById('monthly-payment2');
  const totalPaymentElement = document.getElementById('total-payment');
  const totalInterestElement = document.getElementById('total_interest');
  const difference = amount - downpayment;
  const cbTimes= years * 2;   
  const cbEveryPayment = cb_amount / cbTimes;
  const paymentTimes = years * 12;
  const interestMod = 1 + (interest / 100);
  const amountWithoutBns = difference * interestMod;
  const totalPayment = (difference - cb_amount) * interestMod;
  const justDevideMonthlyPayment = totalPayment / paymentTimes;
  const secondToLastMonthlyPayment = (Math.floor(justDevideMonthlyPayment / 100) * 100);
  const firstMonthlyPayment = totalPayment - (secondToLastMonthlyPayment * (paymentTimes - 1));
  const totalInterest = (difference * interestMod) - difference;

  function comma(num) {
    return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
  }


     if(isFinite(monthly)){
        firstMonthlyPaymentElement.value = comma(parseInt(firstMonthlyPayment));
        secondToLastMonthlyPaymentElement.value = comma(parseInt(secondToLastMonthlyPayment));
        totalPaymentElement.value = comma(parseInt(amountWithoutBns));
   ...