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>


</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">
                           
                            <div class="input-group">

                                <span class="input-group-addon">combind bonus</span>
                                <input class="form-control t_rlt" name="cb_amount" placeholder="combind bonus">
                            </div>
 ...

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...');
  
  let downpayment = document.getElementsByName("downpayment")[0].value
  let amount = document.getElementsByName("amount")[0].value
  let cb_amount = document.getElementsByName("cb_amount")[0].value

  let years, interest;

switch(document.loanform.years.value){

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

}


  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(cb_amount <= ( amount - downpayment ) / 2 ){

        showError("Please check cb_amount ");
        console.log("Error");
        //hide loader
        document.getElementById("loading").style.display = "none";
        //show results
       ...