JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="mlcont">
<form id="calculator" name="calculator">
<div class="mlcalc">
<div class="mltitle">Max Loan Amount Calculator</div>
<div class="mlleft">
<div class="mla">Value of property or purchase price:</div>
<div class="mla">£ <input class="input1" id="val" type="text" maxlength="10" name="val" size="10"/></div>
<div class="mla">LTV (max 85%):</div>
<div class="mla" id="mllast1"><input class="input1" id="ltv" type="text" maxlength="10" name="ltv" size="3" value="75"/> %</div>
<div class="mla">Rental income per month:</div>
<div class="mla">£ <input class="input1" id="rent" type="text" maxlength="10" name="rent" size="10"/></div>

<div class="mla">ICR (Interest Coverage Ratio):</div>
<div class="mla"><input class="input1" id="icr" type="text" maxlength="10" name="icr" size="3" value="120"/> %</div>

<div class="mla">Interest rate of mortgage facility:</div>
<div class="mla" id="mllast2"><input class="input1" id="rate" type="text" maxlength="10" name="rate" size="3" value="5"/> %</div>
<div class="mlabot"><input class="calculate" type="button" name="SendDetails" value="Calculate" onClick="return formValidator()"/></div>
</div>


<div class="mlright">
<div class="mlb" id="mllast3"><span id="maxloanltv">&nbsp;</span></div>
<div class="mlb2" id="mllast4"><span id="maxloanrent">&nbsp;</span></div>
<div class="mlbbot" id="mltot"><span id="max">&nbsp;</span></div>
</div>

</div>
</form>
</div>

CSS

.mlcont {max-width:800px;margin:auto;}
.mltitle {color:#fff;background-color:#405C9E;padding-left:10px;line-height:30px;}
.mlcalc {width:100%;}
.mlleft {float:left;width:50%;}
.mlright {float:left;width:50%;}
.mla {background-color:#D2E9FF;padding-right:15px;line-height:40px;text-align:right;height:40px;border-right:1px solid #fff;}
.mlb {background-color:#DFEFFF;padding-right:15px;line-height:40px;text-align:right;height:160px;}
.mlb2 {background-color:#DFEFFF;padding-right:15px;line-height:40px;text-align:right;height:240px;}
.mlabot {background-color:#D2E9FF;padding-right:15px;line-height:50px;text-align:right;height:50px;border-right:1px solid #fff;}
.mlbbot {background-color:#DFEFFF;padding-right:15px;line-height:50px;text-align:right;height:50px;}
#mllast1, #mllast2, #mllast3, #mllast4  {border-bottom:1px solid #fff;padding-bottom:10px;}
.mlorange {color:#405C9E;font-size:17px;}
.mlgreen {color:#405C9E;font-size:18px;}
.calculate {color:#fff;border:1px solid #fff;background-color:#405C9E;line-height:25px;padding:0 20px;}
.input1 {background-color:#fff;border:1px solid #999;line-height:25px;padding:0 0 0 5px;margin:0;}
.mlgrey {background-color:#eee;padding-right:15px;line-height:40px;text-align:right;height:160px;}
.mlgrn {background-color:#E0F5C5;padding-right:15px;line-height:40px;text-align:right;height:240px;}
.mlbbotg {background-color:#D0F0AA;padding-right:15px;line-height:50px;text-align:right;height:50px;}
@media screen and (max-width: 999px) {
.mlleft {float:none;width:100%;}
.mlright {float:none;width:100%;}
.mlb, .mlb2 {line-height:40px;height:auto;
}

JavaScript

function formValidator(){ 
var val=+document.calculator.val.value;
var ltv=+document.calculator.ltv.value;
var rent=+document.calculator.rent.value;
var rate=+document.calculator.rate.value;
var icr=+document.calculator.icr.value;

var a1=(val/100) * (ltv);
var h=(rent) / (icr) * 100;
var h=h.toFixed(0);
var g=(h) * 12;
var f=(g) / rate * 100;

document.getElementById("maxloanrent").innerHTML = "Max Loan Amount:" + '<br>' + "(Based on Rental Income)" + '<br><span class="mlorange">' + "£" + f.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + "</span>";
document.getElementById("maxloanltv").innerHTML = "Max Loan Amount:" + '<br>' + "(Based on LTV)" + '<br><span class="mlorange">' + "£" +   a1.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + "</span>";

if (a1 < f) { document.getElementById("max").innerHTML = "<span class='mlgreen'>Total Max Loan Amount: <strong>£" + a1.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + "</strong></span>"; 
document.getElementById("mllast3").style.backgroundColor = "#E0F5C5";
document.getElementById("mllast4").style.backgroundColor = "#DFEFFF";
document.getElementById("mltot").className = "mlbbotg"; }
else { document.getElementById("max").innerHTML = "<span class='mlgreen'>Total Max Loan Amount: <strong>£" + f.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + "</strong></span>";
document.getElementById("mllast4").style.backgroundColor = "#E0F5C5";
document.getElementById("mllast3").style.backgroundColor = "#DFEFFF";
document.getElementById("mltot").className = "mlbbotg"; }

return false;
}