Develop a Bank loan/mortgage Interest Rates Calculator in Browser Using Javascript CSS3 and HTML5 Complete

Welcome Learner today in this blog post we will be using Using Javascript CSS3 and HTML5 to build Bank loan/mortgage Interest Rates Calculator. All the Complete source code of the application is shown Down.

In order to lets started, you need to make a file index.html and copy-paste the mentioned code

index.html 

 

<body>
  <div class="box">
	<div id="left">
		<h2>PURCHASE PRICE</h2>
		<div style="background: white; height: 39px;">
			<input width="60px" id="range" type="text" value="$100,000" onfocus="this.select(); this.selAll=1;" onkeyup="changedPP(this.value)">
		</div>
		<input type="range" min="30000" max="1000000" step="5000" value="100000" onchange="showPurchase(this.value)" />
	</div>

	<div id="left">
		<h2>DOWN PAYMENT</h2>
		<div>
			<div style="background: white; height: 39px;width: 30%;float:left;">
				<input id="range2" type="text" value="15 %" onkeyup="changedDP(this.value)" onchange="focusoutDP(this.value)">
			</div>
			<div style="background: white; height: 39px;width: 65%;float:right;">
				<input id="range3" type="text" value="$4,500" onfocus="this.select(); this.selAll=1;" onkeyup="changedDPV(this.value)">
			</div>
		</div>
		<input type="range" min="1" max="100" value="15" onchange="showDownPay(this.value)" />
	</div>
	<br clear="left"/>

	<div id="left">
		<h2>MORTGAGE TERM</h2>	

		<div style="margin-top:25px;">
			<div style="text-align:left;width:120px;max-width:120px;display:inline;">
				<div style="margin-top:-5px;float:left;margin-right:10px;">
					<input type="radio" onchange="verify()" class="styled" checked="checked" id="m1" name="mortgage" value="30"><label id="label30" for="m1"></label>
				</div><span style="color:white;float:left;">30 year</span>
			</div>

			     
			<div style="text-align:left;max-width:120px;display:inline;">
				<div style="margin-top:-5px;float:left;margin-left:25px;margin-right:10px;">
					<input type="radio" onchange="verify()" class="styled" id="m2" name="mortgage" value="15"><label id="label15" for="m2"></label>
				</div><span style="color:white;float:left;">15 year</span>	
			</div>
	    </div>
	</div>

	<div id="left">
		<h2>INTEREST RATE</h2>
		<div style="background: white; height: 39px;">
			<input id="interest" type="text" value="4 %" onkeypress="enterCheck()" onchange="focusoutIR(this.value)">
		</div>
		<input type="range" min="1.0" max="10.0" value="4" step=".5" onchange="changedIR(this.value)" />
		<br/><br/><br/>
	</div>
	<br clear="left"/>	

	<div id="calc">
		<span style="color:white;">Estimated Monthly Payment:</span>
	</div>

	<div id="bot">
		<span id="range4" style="color:white;">$121.74</span>
	</div>
    </div>
</body>

 

Now create a style.css file

style.css 

 

body {
background:url(http://api.thumbr.it/whitenoise-361x370.png?background=e4eef2ff&noise=626262&density=14&opacity=15) repeat;
  height:100%;
  margin: 0 auto;
  padding: 0;
  height: 600px;
	text-align: left;
	margin:50px 50px;
	padding: 0; 
	font-size: 16px;
	font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
.box {
  width:610px;
  margin:0 auto;
}
h2 {
	color: white;
	font-size:16px; 
	font-weight: bold;
	font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
	margin-top: 10px;
	margin-bottom: 15px;
	letter-spacing: 1px;
}
#container {
	margin-left: 15%;
	padding: 0;
	width: 1090;
	text-align: center;
}
#left {
	min-width: 262px;
	height: 110px;
	/* background-color: #313c4c; */
	background-color: rgba(49,60,76,.85);
	padding: 10px 15px 25px 15px;
	margin: 0px 13px 13px 0;
	display: inline;
	float: left;
	position: relative;
	text-align: center;
}
#bot {
	min-width: 267px;
  background: #768393;
	padding: 10px 15px 0 10px;
	margin: 0px 13px 13px 0;
	display: inline;
	float: left;
	position: relative;
	text-align: left;
	height: 35px;
	font-size: 22px;
}
#calc {
	min-width: 282px;
	background-color: rgba(49,60,76,.85);
	padding: 10px 0 0 10px;
	margin: 0px 13px 0 0;
	display: inline;
	float: left;
	position: relative;
	text-align: left;
	height: 35px;
	font-size: 18px;
}
span { 
   color: #e0e0e0; 
   font: bold 20px/40px;
   font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
   letter-spacing: 1px;  
   padding: 2px; 
}
#wrapper {
	clear: both;
	min-width: 680px;				
	width: 40%;
	margin: auto;
	text-align: center;
}
input[type="radio"] {  
    display: none;
    transition:all 0.6s;/*to give it an animation on change*/
} 
input[type="radio"] + label
{
  background-color: #768393 !important;
  border-radius: 3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
    /*padding-top: 5px;*/
    height: 31px;
    width: 31px;
    display: inline-block;
    padding: 0 0 0 0px;
  transition:all 0.6s;/*to give it an animation on change*/
}
input[type="radio"]:checked + label
{
  background-color: #fff !important;
  border-radius: 30px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
}
#range {
	text-align:center;
	color: #282828;
	width:240px;
	border:0;
	font-size: 18px;
	height:30px;
	letter-spacing: 1px;
	font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
#range2 {
	text-align:center;
	height:30px;
	color: #282828;
	width:50px;
	border:0;
	font-size: 18px;
	letter-spacing: 1px;
	font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
#range3 {
	text-align:center;
	height:30px;
	color: #282828;
	width:150px;
	border:0;
	font-size: 18px;
	letter-spacing: 1px;
	font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

#range4 { letter-spacing: 3px; 
	height:30px;

}

#interest {
	height:30px;
	color: #282828;
	text-align:center;
	width:70px;
	border:0;
	font-size: 18px;
	letter-spacing: 1px;
	font-family: proxima-nova, "Helvetica Neue", "Helvetica", Arial, sans-serif;
}
		/*slider*/
.slider {
  width: 150px;
  margin: 100px auto;
}
input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 10px;
  margin: 15px 0 0 0;
  border: none;
  padding: 0px;
  border-radius: 0px;
  background: #768393;
  box-shadow: inset 0 0 0 0 #0d0e0f, inset 0 0 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 0 0 0 #0d0e0f, inset 0 0 0 0 #3a3d42;
  outline: none; /* no focus outline */
}
input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}
input[type="range"]::-ms-track {
  border: inherit;
  color: transparent; /* don't drawn vertical reference line */
  background: transparent;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}
input[type="range"]::-ms-tooltip {
  display: none;
}
		/* thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b6c7ca), color-stop(100%, #245e8f)); /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top , #ffffff 100%, #ffffff 100%); /* older mobile safari and android > 2.2 */;
  background-image: linear-gradient(to bottom, #ffffff 100%, #ffffff 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, #ffffff 100%, #ffffff 100%); /* W3C */
}
input[type="range"]::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 12px;
  border: 0;
  background-image: linear-gradient(to bottom, #ffffff 100%, #ffffff 100%); /* W3C */
}
input[type='number'] {
    -moz-appearance:textfield;	/*for firefox*/
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

 

 

script.js

 

$(document).ready(function() {
	$('input[type="text"]').live('focus', function() {
	    var inp = this;
	    //alert("HI");
	    setTimeout(function() {
	        inp.select();
	    }, 1);
	});

});

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function showPurchase(newValue) {
	var pp = newValue
	document.getElementById("range").value = "$"+numberWithCommas(pp);
	var dp = document.getElementById("range2").value;
	document.getElementById("range3").value = "$"+numberWithCommas(((parseInt(dp,10)/100)*pp).toFixed(0));	//no decimals
	verify();
}
function showDownPay(newValue) {
	var pp;
	var dp = newValue;
	pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);	//remove all special chars
	document.getElementById("range2").value = dp+" %";
	document.getElementById("range3").value = "$"+numberWithCommas(((parseInt(dp,10)/100)*pp).toFixed(0));
	document.getElementById("range").value = "$"+numberWithCommas(pp);
	verify();
}
function changedPP(newValue) {
    var pp = parseInt(newValue.toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
    if (isNaN(pp)) {
        pp = "0";
    }
    document.getElementById("range").value = "$"+numberWithCommas(pp);
    var dp = document.getElementById("range2").value;
    document.getElementById("range3").value = "$"+numberWithCommas(((parseInt(dp,10)/100)*pp).toFixed(0));    //no decimals
    verify();
}
function changedDP(newValue) {
	//alert("changedDP");	
	var dp = newValue;
	var pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);

	document.getElementById("range2").value = dp;
	document.getElementById("range3").value = "$"+numberWithCommas(((parseInt(dp,10)/100)*pp).toFixed(0));
	verify();
}
function focusoutDP(newValue) {
	//alert("focusoutDP");
	var dp = newValue.replace(/%/gi,'');
    if (isNaN(dp)) {
        dp = "0";
        document.getElementById("range3").value = "$0";
    }
	document.getElementById("range2").value = dp+" %";
	verify();
}
function changedDPV(newValue) {
    var dpv = parseInt(newValue.toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
    var pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
    if (isNaN(dpv)) {
        dpv = "0";
    }
    document.getElementById("range2").value = numberWithCommas(((dpv/pp)*100).toFixed(0))+" %";
    document.getElementById("range3").value = "$"+numberWithCommas(dpv);
    verify();
}
function changedIR(newValue) {
	var ir = newValue;
	document.getElementById("interest").value = ir+" %";
	verify();
}
function focusoutIR(newValue) {
	var ir = newValue.replace(/%/gi,'');
	document.getElementById("interest").value = ir+" %";
	verify();
}
function calculate() {
	var mt;
	if (document.getElementById('m1').checked) {
		mt = parseInt(document.getElementById('m1').value,10);
	} else if(document.getElementById('m2').checked) {
		mt = parseInt(document.getElementById('m2').value,10);
	}
	var pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
	var dpv = parseInt((document.getElementById("range3").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
	var ir = parseFloat(document.getElementById("interest").value,10);
}
function show() {
	var mt;
	if (document.getElementById('m1').checked) {
		mt = parseInt(document.getElementById('m1').value,10);
	} else if(document.getElementById('m2').checked) {
		mt = parseInt(document.getElementById('m2').value,10);
	}
	var pp = parseInt((document.getElementById("range").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
	var dpv = parseInt((document.getElementById("range3").value).toString().replace(/[^a-zA-Z 0-9]+/g,''),10);
	var ir = parseFloat(document.getElementById("interest").value,10);
	var princ = pp - dpv;
	var intRate = (ir/100)/12;
    var months = mt * 12;
	document.getElementById("range4").innerHTML = "$"+numberWithCommas((((princ*intRate)/(1-Math.pow(1+intRate,(-1*months)))*100)/100).toFixed(2));
}
function verify() {
	if(document.getElementById("interest").value.trim() != "") {
		document.getElementById("calc").disabled = false;
		show();
	} else {
		document.getElementById("calc").disabled = true;
	}
}
function enterCheck() {
	if(characterCode == 13) {
		show();
	}
}

Leave a Comment

Your email address will not be published. Required fields are marked *