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">Secured Loan Calculator</div>
            <div class="calLeft">
            
                <div class="label">Loan Amount Required</div>
                <div class="clear"></div>
                <a href="javascript:;" class="tt" onclick="tog(this)">
                    <div class="help ttgreen">&nbsp;</div><span class="qtip">Tooltip 1</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">Age of oldest applicant</div>
                <div class="clear"></div>
                <a href="javascript:;" class="tt" onclick="tog(this)">
                    <div class="help ttgreen">&nbsp;</div><span class="qtip">Tooltip 2</span></a>
                <div class="frm">
                    <input id="age" type="tel" name="age" value="" maxlength="2" 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">&nbsp;</div><span class="qtip">Tooltip 3</span></a>
                <div class="frm">
                    <select id="term" name="term" size="1" onchange="copy()">
                        <option value="3">3 Years</option>
                        <option value="4">4 Years</option>
                        <option value="5">5 Years</option>
                        <option value="6">6 Years</option>
                        <option value="7">7 Years</option>
               ...

CSS

.calTit,.other{
    text-indent:10px
}
.nobro,.tt2 .qtip,.ttgreen{
    background-repeat:no-repeat
}
 .calcon,.calcon2{
    margin:auto;
    font-family:arial;
    font-size:14px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.calRight,.calTit,.label{
    font-size:16px
}
.calContLeft{
    float:left;
    background-color:#F6F6E6;
    border:solid #353958;
    border-width:0 0 2px 0;
    width:46.5%;
    margin-right:.5%
}
.calContRight{
    float:left;
    background-color:#F6F6E6;
    border:solid #353958;
    border-width:0 0 2px 0;
    width:52.5%;
    margin-left:.5%
}
.calTit,.help,.other,.pnd{
    background-color:#353958;
    color:#fff;
    font-weight:700
}
.calLeft{position:relative;
    padding:10px
}
.calTit{
    padding:5px 0;
    margin-bottom:10px
}
.results{
    width:100%;
    border-spacing:0;
    border-collapse:separate;
    padding:10px 0
}
.help,.lbit,.pnd,.rbit{
    width:30px
}
.results td{
    padding:4px 0
}
.resT{
    height:5px;
    padding:0
}
.other{
    padding:2px 0
}
.clear{
    clear:both
}
.lbit,.pnd{
    float:left
}
.help,.rbit{
    float:right
}
.help,.pnd{
    line-height:40px;
    height:40px;
    text-align:center
}
.ttgreen,.ttgreen2{
    background-color:#54668E;
    margin-left:3px
}
.ttgreen{
    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-position:center center;
    border-radius:0 5px 5px 0
}
.label{
    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{
   ...

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 >...