JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
Calc 1:<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="label">Bridging Loan Amount Required</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="alert1">
<span class="qtip">Please enter the Bridging Loan amount that you require.</span></a>
<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. This is the amount you are expecting to receive before interest or any other costs have been added.</span></a>
<div class="frm"><input id="amount" type="tel" name="amount" value="£ " onkeyup="this.value = numFormat(this.value)" onclick="check();"/></div>
<div class="clear"></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 that you require the loan for.</span></a>
<div class="frm"><select id="term" name="term" size="1" onchange="copy()">
<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...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;border-radius:0 5px 5px 0;}
.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;border-radius:5px 0 0 5px;}
.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...JavaScript
function copy() {
var select, i, option;
select = document.getElementById( 'redem' );
var d;
for(d = select.options.length - 1; d >= 0; d--)
{
select.remove(d);
}
var sel = document.getElementById('term');
var val = sel.options[sel.selectedIndex].value;
if (val==1) {val=2;}
for ( i = 1; i <= val-1; i += 1 ) {
option = document.createElement( 'option' );
option.text = "Month " + i;
option.value = i;
select.add( option );
redem.lastElementChild.selected = true;
}
}
function formValidator(){
if (document.calculator.amount.value == '£ ') {return false;}
if (document.calculator.propVal.value == '£ ') {return false;}
var redem = +document.calculator.redem.value;
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, "");
fee = 2;
if (amount > '125000') {fee = 1.75;}
if (amount >...