JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
Calc 2:<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)"><div class="help ttgreen"> </div>
<span class="qtip">The total 'net' loan amount that you are looking to borrow.</span></a>
<div class="frm"><input id="amount" type="tel" name="amount" value="£ " onkeyup="this.value = numFormat(this.value)"/></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 you require the loan for.</span></a>
<div class="frm"><select id="term" name="term" size="1" onchange="dupe('capre1when');clr('draw1amount','capre1amount','capre1when');copy('redem');dupe('draw2when');dupe('capre2when');hidme('adsec2');hidme('adsec4');reme('adsec2');reme('adsec4');showme('adsec1');showme('adsec3');hidme('adsec1');hidme('adsec3');reme('adsec1');reme('adsec3');adrem('adsec2');adrem('adsec4');hideme('draw1when');hideme('capre1when');">
<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...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 clr(el1,el2,el3) {
var clr1 = document.getElementById(el1);
var clr2 = document.getElementById(el2);
var clr3 = document.getElementById(el3);
clr1.value = "£ ";
clr2.value = "£ ";
clr3.value = "add";
}
function showme(el) {
var sel = document.getElementById(el);
var inp = sel.children[1];
inp.style.display = "block";
var inp2 = sel.children[2];
inp2.style.display = "block";
}
function addme(el) {
var sel = document.getElementById(el);
var inp = sel.children[0];
inp.style.display = "block";
}
function reme(el) {
var sel = document.getElementById(el);
var inp = sel.children[2];
inp.style.display = "none";
}
function hidme(el) {
var sel = document.getElementById(el);
var inp = sel.children[1];
inp.style.display = "none";
var clear = sel.getElementsByTagName('input');
clear[0].value = "£ ";
}
function adrem(el) {
var sel = document.getElementById(el);
var inp = sel.children[0];
inp.style.display = "none";
}
function dupe2(el, el2) {
var select, option;
var test = document.getElementById(el);
var test2 = document.getElementById(el2);
for(var i=25; i >= 0;i--) {
test.remove(i);
}
var sel = document.getElementById('term');
var val = sel.options[sel.selectedIndex].value;
var val2 = test2.options[test2.selectedIndex].value;
var val3 = parseFloat(val2);
option = document.createElement( 'option' );
option.text = "Add +"
option.value = "add";
test.add( option );
for ( var y = val3+1; y <= val; y += 1 ) {
option = document.createElement( 'option' );
option.text = "Month " + y;
option.value = y;
test.add( option );
test.firstElementChild.selected = true;
}
}
function dupe(el) {
var select, option;
var test = document.getElementById(el);
for(var i=25; i >= 0;i--) {
test.remove(i);
}
var sel = document.getElementById('term');
var val = sel.options[sel.selectedIndex].value;
option = document.createElement( 'option' );
option.text = "Add +"
option.value = "add";
test.add( option );
for ( var y = 2;...