A very simple program that I wrote using JQuery as my JavaScript library to compute for the interest rate of the money being loaned by a customer. The code is very easy to understand and use.
Add me at Facebook my address is jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
<html>
<head>
<title> Interest Calculator in JQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
body {
background-color:lightgreen;
font-family: arial;
font-size:15px;
font-weight:bold;
}
.input_bold {
font-weight: bold;
font-size:15px;
color: red;
}
.left {
width: 15%;
float: left;
text-align: right;
}
.right {
width: 50%;
margin-left: 10px;
float:left;
}
.header {
width: 30%;
float: left;
text-align: right;
}
h4 {
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$("#solve").click(function(){
var amt = $("#amt").val();
var interest = $("#interest").val();
var years = $("#years").val();
remarks = (amt*interest*years/100)
$("#results").val('$ ' + remarks.toFixed(2));
});
$("#clear").click(function(){
$("#amt").val('');
$("#interest").val('');
$("#years").val('');
$("#results").val('');
$("#amt").focus();
});
});
</script>
</head>
<body>
<form>
<br><br><br><br>
<div class="header">
<h3> Interest Calculator in JQuery </h3>
<h4> Written By </h4>
<h3> Mr. Jake R. Pomperada, MAED-IT </h3>
</div>
<br><br><br><br><br><br><br><br>
<div class="left">
Amount Loaned
</div>
<div class="right">
<input type="text" id="amt" size="10" autofocus/><br>
</div>
<br><br>
<div class="left">
Interest Rate
</div>
<div class="right">
<input type="text" id="interest" size="10" /><br>
</div>
<br><br>
<div class="left">
How many years
</div>
<div class="right">
<input type="text" id="years" size="10" />
</div>
<br><br>
<br>
<div class="left">
The interest is
</div>
<div class="right">
<input type="text" id="results" class="input_bold" size="30" readonly/><br>
</div>
<br><br><br><br>
<div class="left">
<button type= "button" id ="solve">Check </button>
</div>
<div class="right">
<button type= "button" id ="clear">Clear </button>
<br>
</div>
</form>
</body>
</html>
No comments:
Post a Comment