JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<form id="calculator" method="post" name="calculator" onsubmit="return equityCalc();">
<div class="container" id="sum">
<div class="calContLeft"><div class="calTit1">FREE & INSTANT</div><div class="calTit">Equity Release Calculator</div><div class="calLeft">
<div class="rbit"> </div><div class="label">Please tell us your age?</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="aage1"><div class="help"></div><span class="qtip">All equity release quotes are based on the applicants age. Please provide your age.</span></a>
<a href="javascript:;" class="tt" onclick="tog(this)" id="aAge"><span class="qtip">Sorry! You must be 55 or older to qualify for Equity Release.</span></a>
<div class="frm"><input type="number" id="age1" name="age1"></div>
<div class="clear"></div>
<div class="rbit"> </div><div class="label">Is this a single or joint application?</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)" id="aJapp"><div class="help"></div><span class="qtip">Please state whether the application will be made in just your name or include another joint applicant.</span></a>
<div class="radio2"><input type="radio" name="sec" id="secApp" value="single" onclick="if(this) document.getElementById('joint').style.display='none';"><label for="secApp">Single</label>
<input type="radio" name="sec" id="secApp2" value="joint" onclick="if(this) document.getElementById('joint').style.display='block';"><label for="secApp2">Joint</label></div>
<div class="clear"></div>
<div class="hide" id="joint">
<div class="rbit"> </div><div class="label">How old is the second applicant?</div>
<div class="clear"></div>
<a href="javascript:;" class="tt" onclick="tog(this)"><div class="help"></div><span class="qtip">If this is a joint application, please provide the age of the second applicant.</span></a>
<div class="frm"><input type="number" id="age2" name="age2"></div>
<div...CSS
body {background-color:#fff;}
.hide {display:none;}
.container {margin:auto;font-family:arial;font-size:14px;max-width:1000px;}
.calContLeft {float: left;background-color:#F4F4F3;min-width:340px;width:38%;border:1px solid #ccc;margin-right:10px;}
.calContRight {background-color:#fff;margin-left:42%;}
.calLeft {padding:10px;}
.calRight {font-size:16px;}
.calTit1 {background-color:#00A3D9;color:#fff;text-indent:10px;padding:9px 0;font-size:22px;}
.calTit {background-color:#1F73C9;color:#fff;text-indent:10px;padding:8px 0;margin-bottom:10px;font-size:18px;}
.other {background-color:#ccc;color:#fff;text-indent:10px;font-weight:bold;padding:2px 0;}
.clear {clear:both;}
.pnd, .lbit {float:left;}
.help, .rbit {float:right;}
.rbit, .lbit {width:30px;}
.pnd, .help {line-height:40px;height:40px;width:30px;text-align:center;}
.help {margin-left:4px;background-color:#00A3D9;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 center;}
.pnd {background-color:#1F73C9;color:#fff;font-weight:bold;}
.label {font-size:16px;margin-bottom:2px;}
.frm {height:38px;overflow: hidden;border:1px solid #1F73C9;padding:0 10px;background-color:#fff;margin:0 0 15px 0;}
.frm input, .frm select {width:100%;border:0;margin:0;font-size:16px;}
.frm input {height:37px;}
.frm select {height:39px;border:0px;outline:0px;-webkit-appearance: none;-moz-appearance: none;text-indent: 1px;text-overflow: '';background-color: transparent;}
.textr {text-align:right;}
.calculate {text-align:center;}
.calculate input {width:50%;background-color:#00A3D9;text-align:center;color:#fff;font-size:18px;padding:9px...JavaScript
/* Equity Release Calculator */
function equityCalc() {
var age1 = +document.calculator.age1.value;
var age2 = +document.calculator.age2.value;
var val = +document.calculator.val.value.replace(/[^0-9]/g, "");
var bal = +document.calculator.bal.value.replace(/[^0-9]/g, "");
var out = +document.calculator.out.value.replace(/[^0-9]/g, "");
var type = +document.calculator.pType.value;
var age;var a;var b;var c;var d;var e;var f;
if (document.getElementById('ahel').checked) {var health = "1";}
if (document.getElementById('bhel').checked) {var health = "2";}
if (document.getElementById('chel').checked) {var health = "3";}
if (document.getElementById('secApp2').checked) {age = age2;}
if (age1 >= age2) {age = age2;}
else {age = age1;}
if (document.getElementById('secApp').checked) {age = age1;}
if (age2 == "") {age = age1;}
if (document.calculator.age1.value == '') {tog(aage1); return false;}
if (document.calculator.age1.value <= '54') {tog(aAge); return false;}
if (document.calculator.sec.value == '') {tog(aJapp); return false;}
if (document.calculator.val.value == '') {tog(aVal); return false;}
if (document.calculator.health.value == '') {tog(ahealth); return false;}
// a=Roll Good - b=Roll Med - c=Roll Bad
// d=Int-Only - Good Med Bad
// e=Hol f=Inv
if (age < '55') {a='0';b='0';c='0';d='0';e='0';f='0';}
if (age >= '55') {a='25.5';b='30.3';c='39.1';d='50.0';e='9.0';f='9.0';}
if (age >= '56') {a='26.5';b='31.4';c='40.2';d='50.0';e='10.0';f='10.0';}
if (age >= '57') {a='27.5';b='32.5';c='41.3';d='50.0';e='11.0';f='11.0';}
if (age >= '58') {a='28.5';b='33.6';c='42.4';d='50.0';e='12.0';f='12.0';}
if (age >= '59') {a='29.5';b='34.7';c='43.5';d='50.0';e='13.0';f='13.0';}
if (age >= '60') {a='32.5';b='35.8';c='44.6';d='50.0';e='15.0';f='14.0';}
if (age >= '61') {a='33.5';b='36.9';c='45.7';d='50.0';e='16.0';f='15.0';}
if (age >= '62') {a='34.5';b='38.0';c='47.3';d='50.0';e='17.0';f='16.0';}
if (age >= '63') {a='35.5';b='39.1';c='48.4';d='50.0';e='18.0';f='17.0';}
if...