JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<form id="calculator" method="post" name="calculator" onsubmit="return formValidator();">
<div class="calcon" id="calid">
<div class="calContLeft"><div class="calTit">Bridging Loan Calculator</div><div class="calLeft">
<div class="rbit"> </div><div class="lbit"> </div><div class="label">Bridging Loan Amount Required</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)"><div class="help ttgreen"> </div>
<span class="qtip">The total 'net' loan amount that you are looking to borrow.</span></a>
<div class="pnd">£</div><div class="frm"><input id="amount" type="tel" name="amount" value="" onkeyup="this.value = numFormat(this.value)"/></div>
<div class="clear"></div>
<div class="rbit"> </div><div class="lbit"> </div><div class="label">Term Required</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)"><div class="help ttgreen"> </div><span class="qtip">The maximum number of months you require the loan for.</span></a>
<div class="pnd"> </div><div class="frm"><select id="term" name="term" size="1">
<option value="1">1 Month</option>
<option value="2">2 Months</option>
<option value="3">3 Months</option>
<option value="4">4 Months</option>
<option value="5">5 Months</option>
<option value="6">6 Months</option>
<option value="7">7 Months</option>
<option value="8">8 Months</option>
<option value="9">9 Months</option>
<option value="10">10 Months</option>
<option value="11">11 Months</option>
<option selected="selected" value="12">12 Months</option>
<option value="13">13 Months</option>
<option value="14">14 Months</option>
<option value="15">15 Months</option>
<option value="16">16 Months</option>
<option value="17">17 Months</option>
<option value="18">18 Months</option>
<option value="19">19 Months</option>
<option value="20">20 Months</option>
<option value="21">21 Months</option>
<option value="22">22 Months</option>
<option value="23">23...CSS
.calcon, .calcon2 {margin:auto;font-family:arial;font-size:14px;max-width:688px;}
.calContLeft {float:left;background-color:#ECF5FF;width:46.5%;margin-right:0.5%;}
.calContRight {float:left;background-color:#fff;width:52.5%;margin-left:0.5%;}
.calLeft {padding:10px;}
.calRight {font-size:16px;}
.calTit {background-color:#405C9E;color:#fff;text-indent:10px;padding:5px 0;font-weight:bold;margin-bottom:10px;font-size:16px;}
.results {width:100%;border-spacing: 0;border-collapse: separate;padding:10px 0;}
.results td {padding:4px 0;}
.resT {height:5px;padding:0;}
.other {background-color:#405C9E;color:#fff;text-indent:10px;font-weight:bold;padding:2px 0;}
.clear {clear:both;}
.pnd, .lbit {float:left;}
.help, .rbit {float:right;}
.rbit, .lbit {width:30px;}
.pnd, .help {line-height:40px;height:40px;width:30px;text-align:center;background-color:#405C9E;color:#fff;font-weight:bold;}
.ttgreen {background-color:#00A3D9;margin-left:3px;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;}
.ttgreen2 {background-color:#00A3D9;margin-left:3px;}
.label {font-size:16px;margin-bottom:2px;}
.frm {height:38px;overflow: hidden;border:1px solid #405C9E;padding:0 10px;background-color:#fff;margin-bottom:10px;}
.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: transparent;}
.textr {text-align:right;}
.hide {display:none;}
input:focus,select:focus{outline:...JavaScript
function formValidator(){
var amount = +document.calculator.amount.value.replace(/[^0-9]/g, "");
var fee = +document.calculator.fee.value;
var term = +document.calculator.term.value;
var rate = +document.calculator.rate.value;
var exitPerc = +document.calculator.exitPerc.value;
var propNum = +document.calculator.propNum.value;
var res;
var legalAdd;
var propMort = +document.calculator.propMort.value.replace(/[^0-9]/g, "");
var prop2Mort = +document.calculator.prop2Mort.value.replace(/[^0-9]/g, "");
var prop3Mort = +document.calculator.prop3Mort.value.replace(/[^0-9]/g, "");
var prop4Mort = +document.calculator.prop4Mort.value.replace(/[^0-9]/g, "");
var prop5Mort = +document.calculator.prop5Mort.value.replace(/[^0-9]/g, "");
var prop6Mort = +document.calculator.prop6Mort.value.replace(/[^0-9]/g, "");
var propVal = +document.calculator.propVal.value.replace(/[^0-9]/g, "");
var prop2Val = +document.calculator.prop2Val.value.replace(/[^0-9]/g, "");
var prop3Val = +document.calculator.prop3Val.value.replace(/[^0-9]/g, "");
var prop4Val = +document.calculator.prop4Val.value.replace(/[^0-9]/g, "");
var prop5Val = +document.calculator.prop5Val.value.replace(/[^0-9]/g, "");
var prop6Val = +document.calculator.prop6Val.value.replace(/[^0-9]/g, "");
if (document.calculator.amount.value == '') {alert("Please enter the Bridging Loan amount required"); return false;}
if (document.calculator.term.value == '') {alert("Please enter the term in months"); return false;}
if (document.calculator.rate.value == '') {alert("Please enter an interest rate"); return false;}
var feeadded = (amount/100)*(fee);
var total = (amount+feeadded);
var interest = (total/100)*(rate);
var interest2 = (total/100)*(rate);
function int(xVal) {
var newVal = (xVal)/(100)*(rate);
return newVal;
}
if(document.getElementById('Prol').checked) {
var m1 = (total/100)*(rate); var m1t = (m1+total);
var m2 = int(m1t); var m2t = (m1+m2+total);
var m3 = int(m2t); var m3t = (m1+m2+m3+total);
var m4 =...