JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>
Amount:<br>
<input type="tel" id="amount" onkeyup="this.value = numFormat(this.value), fee(), bfee()">
</p>
 
<p>
Facility Fee: <span id="fee"></span><br>
<select id="pickone" onchange="bfee()">
<option>2.0</option>
</select>
</p>

<p>
Broker Fee:<br>
<select id="pickone2">
<option>0</option>
</select>
</p>

CSS

body {}

JavaScript

/* Number Formatting */

function intFormat(n) {    
var regex = /(\d)((\d{3},?)+)$/;
n = n.split(',').join('');
while(regex.test(n)) {n = n.replace(regex, '$1,$2');}        
n = n.replace("£", "");
n = n.replace(" ", "");
return '£ ' + n;}
      
function numFormat(n) {
var pointReg = /([\d,\.]*)\.(\d*)$/, f;
if(pointReg.test(n)){f = RegExp.$2;
return intFormat(RegExp.$1) + '.' + f;}
return intFormat(n);}	


function fee() { 

var based_fee = document.getElementById('amount').value.replace(/\D/g,'');

var fee = document.getElementById('fee');

var fee_range = "2";
var items;
if (based_fee > 0) {fee_range = "2";
items = ["2.0"];}
if (based_fee > 200000) {fee_range = "1.5 - 2";
items = ["1.5", "1.6", "1.7", "1.8", "1.9", "2.0"];}
if (based_fee > 500000) {fee_range = "1 - 2";
items = ["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "1.9", "2.0"];}
if (based_fee > 1000000) {fee_range = "0.5 - 2";
items = ["0.5", "0.6", "0.7", "0.8", "0.9", "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "1.9", "2.0"];}

fee.innerHTML = fee_range + "%";

var sel = "";
var str = "";
for (var item of items) {
  if (item == "2.0") {sel = "selected"} else {sel = ""}
    str += "<option value='" + item + "'" + sel + ">" + item + "</option>";
  }
document.getElementById("pickone").innerHTML = str;

}

function bfee() { 

if(document.getElementById('pickone').value == "2.0") {
items = ["0", "0.1", "0.2", "0.3", "0.4", "0.5", "0.6", "0.7", "0.8", "0.9", "1.0"];

var sel = "";
var str = "";
for (var item of items) {
  if (item == "0") {sel = "selected"} else {sel = ""}
    str += "<option value='" + item + "'" + sel + ">" + item + "</option>";
  }
document.getElementById("pickone2").innerHTML = str;

}

else {

document.getElementById("pickone2").innerHTML = "<option value='0'>0</option>";

}

}