JSFiddle - React, Tailwind, and code Playground

by diessses

HTML

<head>
<style>
        #loading, #results {
            display:none;
        }
</style>
</head>

<body class="bg-dark">
<div class="row">

<form name="loanform">

<div class="form-group">
  <div class="input-group">
   <span class="badge badge-success" style="font-size: 15px">Loan calc</span>
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">total amount</div>
    </div>
      <input type="number" class="form-control" id="amount" name="amount" placeholder="">
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">downpayment</div>
    </div>
      <input type="number" class="form-control" id="downpayment" name="downpayment" placeholder="downpayment">
  </div>
</div>



<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">payment years</div>
    </div>
        <select class="form-control" class="form-control" id="years" name="years">
  </select>
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">start paying month</div>
    </div>
        <select class="form-control" class="form-control" id="s_month" name="s_month">
		</select>
  </div>
</div>

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">Select start paying year</div>
    </div>
        <select class="form-control" class="form-control" id="s_year" name="s_year">
		</select>

  </div>
</div>


<div class="form-group">
  <div class="input-group">
OPTION
   </div>
</div>


<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">Combined bouns paying</div>
    </div>
  <input type="number" class="form-control"...

JavaScript

/**
 * ENG
*/




var elementId = {
	downpayment: "downpayment",			
	amount: "amount",					
	cb_amount: "cb_amount",				
	years: "years",						
	s_month: "s_month",                 
	s_year: "s_year",	                
}


/**
 * DOMLoaded
 */
document.addEventListener("DOMContentLoaded", function(e) {

	// submit
	document.loanform.addEventListener('submit', function(e) {
		onSubmit(e);
	});

	//
	setSelectBoxElement();

}, false)

/**
 * 
 */
function onSubmit(e) {
	//
	if (checkValue()) {
		// 
		document.getElementById('results').style.display = 'block';	// 計算結果表示エリア
		document.getElementById('loading').style.display = 'block';	// loading.gif

		// 
		setTimeout(calculateResults, 1200);

	}
	e.preventDefault();
}

/**
 * ド
 */
function setSelectBoxElement() {
	// years
	let years = document.getElementById(elementId.years);
	SelectboxManager.addSelectboxFromObject(years, yearsElement);

	// 
	let payMonth = document.getElementById(elementId.s_month);
	SelectboxManager.addBlankValue(payMonth, "Select Month");
	SelectboxManager.addSelectboxFromArray(payMonth, payMonthElement);

	// 
	let payYear = document.getElementById(elementId.s_year);
	SelectboxManager.addSelectboxFromArray(payYear, getPayYearElement());

}

/**
 * check
 * @return チェックOK：true, チェックNG：false
 */
function checkValue()  {
	let rtn = true;	// 

	let downpayment = document.getElementById(elementId.downpayment).value;	// 
	let amount = document.getElementById(elementId.amount).value;			// 
	let cb_amount = document.getElementById(elementId.cb_amount).value;		// 
	let selectedYears = document.getElementById(elementId.years).value; 	// 

	// 
	if (!amount) {
		// 
		showError("err 1");
		rtn = false;
	}
	else if (!selectedYears) {
		// 
		showError("err 2");
		rtn = false;
	}

	// 
	if (rtn) {
		if (cb_amount > ( amount - downpayment ) / 2 ) {
			
			showError("err 3");
			rtn = false;
		}
	}
	// 
	return rtn;
}


/**
 * Interest calc
 */
function calculateResults(e) {
	let downpayment =...