JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<form id="myForm">

<div>Auto or Manual Calculator</div>

<div class="data"> 
<span class="help_closed" onclick=tog(this)>If the development property is to be purchased then please enter the purchase price. If already owned then please enter the residual value. This figure will be used for various calculations including project cost and profitability.</span>
<label for="automan" class="pil">
<input type="checkbox" id="automan" checked="checked">
<span class="checkmarkA">Auto</span> or <span class="checkmarkB">Manual</span> Calculator Setting (default is set to Auto)
</label>
<div class="gethelp" onclick=tog(this)></div>
</div>

<label for="amount">Loan Amount Required</label>

<div class="data">
<span class="help_closed" onclick=tog(this)>If the development property is to be purchased then please enter the purchase price. If already owned then please enter the residual value. This figure will be used for various calculations including project cost and profitability.</span>
<input type="tel" id="amount" name="amount" value="£ " onkeyup="this.value = numFormat(this.value)">
<div class="gethelp" onclick=tog(this)></div>
</div>

<label for="term">Term Required</label>

<div class="data">
<span class="help_closed" onclick=tog(this)>If the development property is to be purchased then please enter the purchase price. If already owned then please enter the residual value. This figure will be used for various calculations including project cost and profitability.</span>
  <select id="term">
    <option value="0">Please Select</option>
    <option value="1">1 Month</option>
    <option value="2">2 Months</option>
    <option value="3">3 Months</option>
    <option value="4">4 Months</option>
    <option value="5">5 Months</option>
    <option value="6">6 Months</option>
    <option value="7">7 Months</option>
    <option value="8">8 Months</option>
    <option value="9">9 Months</option>
    <option value="10">10 Months</option>
    <option value="11">11 Months</option>
  ...

CSS

#myForm {font-family:Arial;}

#myForm .data {margin:0 0 10px 0;max-width:240px;height:40px;}

#myForm label {display:block;}

#myForm input[type=tel] {
line-height:38px;
padding: 0px 12px;
box-sizing: border-box;
border:1px solid #999999;
outline: none;
width:100%;
font-family:Arial;font-size:16px;
border-radius:3px 0 0 3px;
width: calc(100% - 30px);
float:left;
}

#myForm select {
line-height:38px;
padding: 0px 5px;
box-sizing: border-box;
border:1px solid #999999;
outline: none;
width:100%;
height:40px;
background-color:#ffffff;
font-family:Arial;font-size:16px;
border-radius:3px 0 0 3px;
width: calc(100% - 30px);
float:left;
}

#myForm input[type=tel]:focus {
background-color: #ECF5FF;
border:1px solid #999999;
}

#myForm .gethelp {height:40px;width:30px;
background-color:grey;
float:right;cursor:pointer;background-color:#00A3D9;border-radius:0 5px 5px 0;
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-repeat: no-repeat;background-position:center right 12px;}




/* Customize the label (the container) */
#myForm .pil {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: calc(100% - 30px);
float:left;height:40px;
}

/* Hide the browser's default checkbox */
#myForm .pil input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
#myForm .pil .checkmarkA {
  position: absolute;
  top: 0;
  left: 0;
  height: 38px;
  width: 50%;
  background-color: #ffffff;
  border:solid #999999;
  border-width:1px 0 1px 1px;
  line-height:38px;
 ...

JavaScript

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);
      }	
      
      
// Toggle Tooltips

function tog(el){
	if(el.parentElement.firstElementChild.className == "help"){
		el.parentElement.firstElementChild.className = "help_closed";
	} else {
		el.parentElement.firstElementChild.className = "help"
	}
	
	
	
}