JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<form id="calculator" method="post" name="calculator" onsubmit="return formValidator();">
<div class="calcont" id="sum">
<div class="cflex">
<div class="calContLeft"><div class="calTit">Commercial Mortgage Calculator</div><div class="calLeft">
<div class="rbit"> </div><div class="lbit"> </div><div class="label">Loan Amount</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="help1"><div class="help"></div><span class="qtip">Please enter the total loan amount required.</span></a>
<div class="pnd">£</div><div class="frm"><input type="tel" id="amount" name="amount" onkeyup="this.value = numFormat(this.value)" value="100,000"></div>
<div class="clear"></div>
<div class="rbit"> </div><div class="lbit"> </div><div class="label">Interest Rate</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="help2"><div class="help"></div><span class="qtip">Please enter the interest rate to be added to the loan.</span></a>
<div class="pnd"> </div><div class="perc">%</div><div class="frm"><input type="tel" id="rate" name="rate" onkeyup="this.value = numFormat(this.value)" value="3.5"></div>
<div class="clear"></div>
<div class="rbit"> </div><div class="lbit"> </div><div class="label">Arangement Fee</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="help3"><div class="help"></div><span class="qtip">Please enter any arangement fee to be added to the loan.</span></a>
<div class="pnd"> </div><div class="perc">%</div><div class="frm"><input type="tel" id="arange" name="arange" onkeyup="this.value = numFormat(this.value)" value="0.0"></div>
<div class="clear"></div>
<div class="rbit"> </div><div class="lbit"> </div><div class="label">Term</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="help4"><div class="help"></div><span class="qtip">Please enter the overall term...CSS
body {background-color:#fff;}
.b1, .b2 {background-color:#F4F4F3;}
.cflex {display: flex;flex-wrap: wrap;justify-content: space-between;}
.hide {display:none;}
.calcont {margin:auto;font-family:arial;font-size:14px;max-width:1000px;}
.calContLeft {background-color:#F4F4F3;border:1px solid #ccc;width:48%;position: relative;}
.calContRight {border:1px solid #ccc;background-color:#F4F4F3;width:48%;}
.calContRight a {text-decoration:none;;}
.calLeft {padding:10px;}
.calRight {font-size:16px;padding:10px;text-align:center;}
.calTit {background-color:#405C9E;color:#fff;text-indent:10px;padding:8px 0;margin-bottom:10px;font-size:18px;}
.other {background-color:#ccc;color:#fff;text-indent:10px;font-weight:bold;padding:2px 0;}
.clear {clear:both;}
.pnd, .lbit {float:left;}
.help, .rbit, .perc {float:right;}
.rbit, .lbit {width:30px;}
.bigreen {font-size:24px;color:#59B200;}.bigblue {font-size:18px;color:#405C9E;}
.pnd, .help, .perc {line-height:40px;height:40px;width:30px;text-align:center;}
.help {margin-left:4px;background-color:#00A3D9;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAATlBMVEUAAAD8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vv8/vtBtc/dAAAAGXRSTlMABPLJmYF1Uz+vb0cW5+S8uZOIamM6LSELBgohPwAAAEtJREFUCB0FwYcBwkAABCC+pWvsevsvKoD1VuCVTLAmEyxtAADLAfuZwe9Rk8HoPZkp7qkflJZW8L2kKyzJNG88k9p2ttR+4H2d8QfB0ANY90orPAAAAABJRU5ErkJggg==');background-repeat: no-repeat;background-position:center center;}
.pnd, .perc{background-color:#405C9E;color:#fff;font-weight:bold;}
.label {font-size:16px;margin-bottom:2px;}
.frm {height:38px;overflow: hidden;border:1px solid #1F73C9;padding:0 10px;background-color:#fff;margin:0 0 15px 0;}
.frm input, .frm select {width:100%;border:0;margin:0;font-size:16px;}
.frm input {height:37px;}
.frm select {height:39px;border:0px;outline:0px;-webkit-appearance: none;-moz-appearance: none;text-indent: 1px;text-overflow: '';background-color:...JavaScript
<!-- Commercial Mortgage Calculator -->
function formValidator(){
var amount = +document.calculator.amount.value.replace(/[^0-9]/g, "");
var period = +document.calculator.period.value * 12;
var rate = +document.calculator.rate.value / 100 / 12;
var repayment, intonly, x, x2;
var arange = +document.calculator.arange.value;
var fee = (amount / 100) * arange;
var total = (amount + fee).toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
var amount = (amount + fee);
if (document.calculator.amount.value == '') { alert("Please enter the amount with no commas");
return false;
}
if (document.calculator.period.value == '') { alert("Please enter the repayment period in years");
return false;
}
if (document.calculator.rate.value == '') {alert("Please enter an interest rate");
return false;
}
x = Math.pow(1 + rate, period);
repayment = (amount*x*rate)/(x-1);
intonly = rate * amount;
var full = (repayment * period).toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
document.getElementById("monthly").innerHTML = "£" + repayment.toFixed(2);
document.getElementById("interestonly").innerHTML = "£" + intonly.toFixed(2);
document.getElementById("fee").innerHTML = "£" + fee.toFixed(2);
document.getElementById("total").innerHTML = "£" + total;
document.getElementById("full").innerHTML = "£" + full;
return false;
}
/* Tool Tip */
function tog(el){if(el.className == "tt"){el.className = "tt2";}
else {el.className = "tt";}
}
function reformat(xVal) {
var newVal = xVal.replace(/[^0-9]/g, "");
return newVal;
}
/* Number Formatting */
function intFormat(n) {var regex = /(\d)((\d{3},?)+)$/;
n = n.split(',').join('');
while(regex.test(n)) {n = n.replace(regex, '$1,$2');}
return n;
}
function numFormat(n) {var pointReg = /([\d,\.]*)\.(\d*)$/, f;
if(pointReg.test(n)) {f = RegExp.$2;
return intFormat(RegExp.$1) + '.' + f;}
return intFormat(n);
}