JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="fiddle">Radio Buttons</div>

<div class="myForm">
<form id="myForm" name="myForm">
<div>
Spend? 
£<input type="tel" id="q1" value="" onkeyup="this.value=numFormat(this.value)"/>
<input type="button" value="submit" onclick="runme();">
</div>
<div class="clear"></div>
<div>What is this?
<input type="radio" name="match" id="match_1" value="one"><label for="match_1">One</label>
<input type="radio" name="match" id="match_2" value="two"><label for="match_2">Two</label>
<input type="radio" name="match" id="match_3" value="three"><label for="match_3">Three</label>
</div>

</form>

<span id="a1"></span>
</div>

CSS

.fiddle {background-color:#000;color:#fff;padding:2px 6px;margin:0 0 10px 0;}

.clear {clear:both;}
.myForm {font-family:arial;font-size:16px;}
.myForm input {font-family:arial;font-size:16px;padding:5px;border:solid #999;border-width:0 0 0 3px;margin-left:5px;}

input:focus {outline: none;}
*:focus {outline: none;}
input[type="radio"] {display:none;}

label {
	border: 1px solid #ccc;
	padding: 10px;
	cursor: pointer;
  display:inline-block;
}

input[type="radio"]:checked + label {
	border: 1px solid #999;
  background-color:#fff;
}

JavaScript

//*** Add Percentage to Number ****

function runme() {

//*** Note ****

var q1 = parseInt(document.getElementById("q1").value.replace(/[^0-9]/g, ""), 10);

var q1e = (q1 / 100) * (25.2);
var q1e = (q1 + q1e);

document.getElementById('a1').innerHTML = "Answer: £" + q1e.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

}


function intFormat(e){
var t=/(\d)((\d{3},?)+)$/;
for(e=e.split(",").join("");
t.test(e);)e=e.replace(t,"$1,$2");
return e}

function numFormat(e){
var t;return/([\d,\.]*)\.(\d*)$/.test(e)?(t=RegExp.$2,intFormat(RegExp.$1)+"."+t):intFormat(e)}