JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="pollCont">

<div class="pollTitle"><img src="hloe.co.uk/bezos.png"/></div>

<div class="poll">

<form onSubmit="return calc();" id="calculator" name="calculator">

<div class="cen">
<input type="radio" name="cur" value="0" id="dollar" checked onClick="erase();">
<label for="dollar">$</label>

<input type="radio" name="cur" value="1"  id="pound" onClick="erase();">
<label for="pound">£</label>

<label class="wbg"><input type="text" name="salary" id="salary" onkeyup="this.value = numFormat(this.value)"></label>
		
    <label class="butbg"><input class="submit" type="submit" value="Calculate"/></label>
    
    </div>
	
</form>

<div class="result">
<span id="res"></span>
</div>

</div></div>

CSS

.pollCont {font-family:arial;max-width:500px;margin:auto;}
.pollTitle {}
.pollTxt {padding:10px;line-height:24px;}
.poll {padding:10px;position:relative;background-color:#454344;}
.txt {font-weight:bold;margin:0 0 10px 0;color:#00468C;}
.poll input[type="radio"] {display:none;}
.poll label {display:inline-block;border:1px solid #999;height:40px;line-height:40px;padding:0 10px;margin:0 0 10px 0;}
.poll input[type="radio"]:checked + label {background-color:#BFDFFF;}

.poll input {display:inline-block;border:0;height:38px;line-height:40px;padding:0 5px;margin:0 0 20px 0;font-size:16px;}
.cen {text-align:center;}

.txt {display:block;}

.wbg {background-color:#fff;}

#txt1, #txt2, #txt3 {display:none;}

.poll textarea {width:100%;max-width:420px;min-height:120px;border:1px solid #999;display:block;}

.submit {display:inline-block;border:0;height:40px;line-height:40px;padding:0 10px;margin:0 0 10px 0;background-color:#ccc;}
.butbg {background-color:#ccc;}

.thanks {text-align:center;margin:50px 0;}
.pc {position:absolute;background-color:#F0F8FF;max-width:400px;margin:5px 10px 0 5px;padding:10px;text-align:center;}
#pc {display:none;}
.hide {display:none;}
.result {height:40px;line-height:40px;margin:20px auto 20px auto;font-size:18px;max-width:300px;padding:10px;border-radius:10px;text-align:center}
#res {color:green;}

textarea:focus, input:focus{
    outline: none;
}

*:focus {
    outline: none;
}

/* Change the white to any color ;) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

JavaScript

function calc() {

var fig; 

if(document.getElementById('dollar').checked) {fig = 3481;}
else {fig = 2671.23;}

var salary =+document.calculator.salary.value.replace(/[^0-9]/g,"");

var result = (salary / fig);

document.getElementById("res").innerHTML="Bezos will earn your salary in <br>" + result.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",") + " Seconds";

return false;
}



function erase() {document.getElementById("salary").value = "";document.getElementById("res").innerText = "";}




function intFormat(n) {

var sym;

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