JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="cent fu"><b>Morgage Deposit Calculator</b></div>

<div class="calc">
<div class="cent"><b>Where would you like to live?</b></div>
<div class="cent"><select id="location">
  <option id="e_midlands" value="38536">East Midlands</option>
  <option id="w_midlands" value="39099">West Midlands</option>
  <option id="scotland" value="30165">Scotland</option>
  <option id="ireland" value="26962">N.Ireland</option>
  <option id="north_east" value="26177">North East</option>
  <option id="north_west" value="32378">North West</option>
  <option id="humber" value="32288">Yorkshire and Humber</option>
  <option id="East_of_England" value="57887">East of England</option>
  <option id="london" value="94300">London</option>
  <option id="south_east" value="63745">South East</option>
  <option id="south_west" value="50682">South West</option>
  <option id="wales" value="32780">Wales</option>
</select></div>
<div class="cent"><b>What is your annual salary?</b></div>
<div class="cent"><input id="wage" value="£ " onkeyup="this.value=numFormat(this.value)"></div>
<div class="cent"><b>How much can you save?</b></div>
<div class="cent">
<select id="perc">
  <option value="5">5%</option>
  <option value="10">10%</option>
  <option value="15">15%</option>
  <option value="20">20%</option>
  <option value="25">25%</option>
  <option value="30">30%</option>
</select></div>

<div class="cent">
<input type="submit" onclick="calc()">
</div>

<div class="cent" id="deposit"></div>

<div class="cent" id="test3"></div>

<div class="cent" id="test5"></div>

<div class="cent" id="test7"></div>
</div>

CSS

body {background-color:#eeeeee;}
.calc {max-width:280px;margin:auto;padding:10px;border:2px solid #003366;border-radius:10px;background-color:#ffffff;}
.cent {font-family:arial;font-size:16px;text-align:center;margin:0 0 10px 0;}
.cent input, .cent select {padding:5px;}
.cent b {color:#003366;}
.fu {font-size:20px;margin:20px 0;}

JavaScript

function calc(){


var wage = document.getElementById("wage").value.replace(/[^0-9]/g, "");
var location = document.getElementById("location").value;
var perc = document.getElementById("perc").value;

var m_wage =  (wage / 12);
var savings = (m_wage / 100) * perc;


var mnts = (location / savings);
var yandm = (mnts / 12);


var years = Math.floor(mnts / 12);
var months = mnts - years * 12;


document.getElementById("deposit").innerHTML = "<b>20% Average Deposit</b><br>£" + location.replace(/\B(?=(\d{3})+(?!\d))/g, ",");


document.getElementById("test3").innerHTML = "<b>" + perc + "% of Salary</b><br>£" + savings.toFixed(2) + " Per Month";


document.getElementById("test5").innerHTML = "<b>Number of Payments</b><br>" + Math.ceil(mnts);


document.getElementById("test7").innerHTML = "<b>Time to Save Deposit</b><br>" + years + " Years, " + Math.ceil(months) + " Months";

}


	
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);
      }