JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<!-- Bridge Calc - Billy -->

<div class="calstyle">
<form id="calculator" method="post" name="calculator" onsubmit="return formValidator()">
<div class="calcTit">Bridging Loan Calculator</div>
<div class="calcLabel">Gross Loan Amount:</div>
<div class="calcInput1"><span>£</span><input id="gross" type="number" name="gross" value="" /></div>

<div class="calcLabel">Interest Rate:</div>
<div class="calcInput2"><input id="rate" type="number" name="rate"  value="1" step="0.1"/><span>%</span></div>

<div class="calcLabel">Term:</div>
<div class="calcInput2"><input id="term" type="number" name="term" value="12" step="1"/><span>Months</span></div>

<div class="calcLabel">Facility Fee:</div>
<div class="calcInput2"><input id="facFee" type="number" name="facFee" value="2" step="0.1"/><span>%</span></div>

<div class="submit"><input type="submit" name="SendDetails" value="Calculate" /></div>

<div class="result"><span id="totRate"></span>
Interest: </div>
<div class="result"><span id="totFee"></span>
Facility Fee: </div>
<div class="result resoff"><span id="totNet"></span>
Total Net Amount: 
</div>

<div class="calfoot">
Novellus Bridging
</div>

</form>
</div>

CSS

body {background-color:#fff;margin:20px;}
.calstyle {font-family:arial;max-width:260px;font-size:14px;padding:6px;border:1px solid #999;background-color:#fff;}
.calcAble {margin-bottom:10px;}
.calcTit {background-color:#000;font-size:18px;margin:0 0 10px 0;color:#fff;padding:7px 0;text-align:center;}

.calcInput1 span {font-size:18px;line-height:30px;margin:0 2px 0 4px;}
.calcInput1 {border:1px solid #999;background-color:#fff;padding:4px;margin:0 0 8px 0;}
.calcInput1 input {width:90%;height:30px;font-size:18px;line-height:30px;border:none;}
.calcInput1 input:focus {outline: none;}

.calcInput2 span {font-size:18px;line-height:30px;margin:0 4px 0 4px;}
.calcInput2 {border:1px solid #999;background-color:#fff;padding:4px;margin:0 0 8px 0;text-align:right;}
.calcInput2 input {width:60%;height:30px;font-size:18px;line-height:30px;border:none;text-align:right;}
.calcInput2 input:focus {outline: none;}

.submit input {width:100%;height:40px;margin:5px 0 13px 0;}
.result {padding:8px 0;border:solid #999;border-width:0 0 1px 0;background-color:#fff;font-size:16px;}
.resoff {border:0;}

#totRate, #totFee {float:right;width:40%;color:#0059B2;}
#totNet {float:right;width:40%;color:#2DB200;}
.calfoot {background-color:#000;font-size:12px;color:#fff;padding:4px 0;text-align:center;}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

JavaScript

// Bridge Calc - Billy

function formValidator() {
    var gross = +document.calculator.gross.value;
    var rate = +document.calculator.rate.value;
    var term = +document.calculator.term.value;
    var facFee = +document.calculator.facFee.value;

    if (document.calculator.gross.value == '') {
        alert("Please enter Gross Loan Amount.");
        return false;
    }
    if (document.calculator.rate.value == '') {
        alert("Please enter Interest Rate.");
        return false;
    }
    if (document.calculator.term.value == '') {
        alert("Please enter Term.");
        return false;
    }
    if (document.calculator.facFee.value == '') {
        alert("Please enter Facility Fee.");
        return false;
    }
   
		var int = (gross / 100) * (rate);
    var perc = (term * int);
    var fee = (gross / 100) * (facFee);
    var net = gross - (perc + fee);
    
    document.getElementById("totRate").innerHTML = "£" + perc.toFixed(0);
    document.getElementById("totFee").innerHTML = "£" + fee.toFixed(0);
    document.getElementById("totNet").innerHTML = "£" + net.toFixed(0);
    
    return false;
}