JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<!-- Bridge Calc 2 - Billy -->
<div class="calstyle">
<form id="calculator" method="post" name="calculator" onsubmit="return formValidator();">
<div class="calcTit">Bridging Loan Calculator</div>
<div class="split2"><div class="calcLabel"> </div>
<div class="radio-group"><input type="radio" id="tnet" name="type" checked="checked" onchange="return formValidator();"><label for="tnet">Net</label><input type="radio" id="tgross" name="type" onchange="return formValidator();"><label for="tgross">Gross</label></div></div>
<div class=""><div class="calcLabel">Loan Amount:</div>
<div class="calcInput1"><span>£</span><input id="amount" type="number" name="amount" value="" onchange="return formValidator();"/></div></div>
<div class="calcLabel">Term:</div>
<div class="calcInput2"><input id="term" type="number" name="term" value="12" step="1" onchange="return formValidator();"/><span>Months</span></div>
<div class="split"><div class="calcLabel">Facility Fee:</div>
<div class="calcInput2"><input id="facFee" type="number" name="facFee" value="2" step="0.01" onchange="return formValidator();"/><span>%</span></div></div>
<div class=""><div class="calcLabel">Interest Rate:</div>
<div class="calcInput2"><input id="rate" type="number" name="rate" value="1" step="0.01" onchange="return formValidator();"/><span>%</span></div></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"><span id="totNet"></span>Total Net Amount: </div>
<div class="result resoff"><span id="totGross"></span>Total Gross 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, select {width:90px;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 8px 0 4px;}
.calcInput2 {border:1px solid #999;background-color:#fff;padding:4px;margin:0 0 8px 0;text-align:right;}
.calcInput2 input {width:50px;height:30px;font-size:18px;line-height:30px;border:none;text-align:right;}
.calcInput2 input:focus {outline: none;}
.split {float:right;width:50%;}
.split2 {float:right;}
input[type=button]:hover,input[type=submit]:hover {border:1px solid #999;background-color:#333;color:#fff;}
input[type=radio] {position: absolute;visibility: hidden;display: none;}
label {color: #ccc;display: inline-block;cursor: pointer;font-weight: bold;font-size:16px;line-height:40px;height:40px;padding: 0 10px;}
input[type=radio]:checked + label{color: #fff;background: #222;}
label + input[type=radio] + label {border-left:0;}
.radio-group {height:40px;border: solid 1px #999;display: inline-block;margin: 0;overflow: hidden;}
.submit input {width:100%;height:40px;margin:5px 0 13px 0;border-radius: 0;-webkit-appearance: none;-webkit-border-radius:0;border:1px solid #999;background-color:#222;color:#fff;}
.result {padding:8px 0;border:solid #999;border-width:0 0 1px 0;background-color:#fff;font-size:16px;}
.resoff {border:0;}
#totRate, #totFee, #totNet {float:right;width:40%;color:#0059B2;}
#totGross, #totNet {float:right;width:40%;color:#2DB200;}
.calfoot...JavaScript
// Bridge Calc 2 - Billy
function formValidator() {
var amount = +document.calculator.amount.value;
var rate = +document.calculator.rate.value;
var term = +document.calculator.term.value;
var facFee = +document.calculator.facFee.value;
var type = +document.calculator.type.value;
var tnet = document.getElementById("tnet");
var tgross = document.getElementById("tgross");
if (document.calculator.amount.value == '') {alert("Please enter 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;}
if (tnet.checked) {
var fig1 = (rate * term);
var fig2 = (fig1 + facFee);
var fig3 = (100 - fig2);
var fig4 = (amount / fig3);
var gross = (100 * fig4);
var int = (gross / 100) * (rate);
var perc = (term * int);
var fee = (gross / 100) * (facFee);
var net = amount;
}
else if (tgross.checked) {
var int = (amount / 100) * (rate);
var perc = (term * int);
var fee = (amount / 100) * (facFee);
var net = amount - (perc + fee);
var gross = amount;
}
document.getElementById("totRate").innerHTML = "£" + perc.toFixed(0);
document.getElementById("totFee").innerHTML = "£" + fee.toFixed(0);
document.getElementById("totNet").innerHTML = "£" + net.toFixed(0);
document.getElementById("totGross").innerHTML = "£" + gross.toFixed(0);
return false;
}