JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="raise_calc">
<label for="purchase_price">Purchase Price of New Property</label>
<input type="tel" id="purchase_price" value="£ " onkeyup="this.value=numFormat(this.value)">

<label for="current_property_value">Value of Current Property</label>
<input type="tel" id="current_property_value" value="£ " onkeyup="this.value=numFormat(this.value)">

<label for="mortgage_balance">Balance of Existing Mortgage (if any)</label>
<input type="tel" id="mortgage_balance" value="£ " onkeyup="this.value=numFormat(this.value)">

<input type="button" value="Calculate" onclick="raise_calc();">

<div id="raise_calc_total"></div>

</div>

CSS

#raise_calc {font-family:Arial;}
#raise_calc label {display:block;}
#raise_calc input[type=tel] {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;margin-top: 6px;margin-bottom: 16px;resize: vertical;}
#raise_calc input[type=button] {background-color: #04AA6D;color: white;padding: 12px 20px;border: none;border-radius: 4px;cursor: pointer;}
#raise_calc_total {padding-top:12px;}
#raise_calc_total span {font-weight:bold;color: #04AA6D;}

JavaScript

/* Raise Calculator */

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 raise_calc() {
var pp = Number(document.getElementById('purchase_price').value.replace(/\D/g,''));
var cv = Number(document.getElementById('current_property_value').value.replace(/\D/g,''));
var mb = Number(document.getElementById('mortgage_balance').value.replace(/\D/g,''));

var sum1 = (pp + cv);
var sum2 = (sum1 * 67.2) / 100;
var sum3 = (sum2 - mb);

var tot = document.getElementById('raise_calc_total');
tot.innerHTML = "You can raise up to: <span>" + formatter.format(sum3) + "</span>";

}

var formatter = new Intl.NumberFormat('en-GB', {
  style: 'currency',
  currency: 'GBP',
  maximumFractionDigits: 0,

});