-
Notifications
You must be signed in to change notification settings - Fork 330
/
Copy pathemi_calculator.html
99 lines (83 loc) · 2.76 KB
/
emi_calculator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EMI Calculator</title>
<!-- script for calculating EMI -->
<script>
function EmiCalc(){
var mt = document.getElementById("emiMonth").value;
var r =document.getElementById("InterestRate").value;
var p =document.getElementById("prncipleAmount").value;
document.getElementById("period").innerHTML=mt;
document.getElementById("rate").innerHTML=r;
document.getElementById("amt").innerHTML=p;
var monthlyInterestRatio = (r/1200);
var monthlyInterest = (monthlyInterestRatio*p);
var top = Math.pow((1+monthlyInterestRatio),mt);
var bottom = top -1;
var sp = top / bottom;
var emi = ((p * monthlyInterestRatio) * sp);
var result = emi.toFixed(2);
var totalAmount = emi*mt;
var yearlyInteret = totalAmount-p;
var downPayment = p*0.2;
//alert(emi);
document.getElementById("emi").innerHTML=result;
}
</script>
<style>
h2{
color:blue;
}
#box{
margin-top:10%;
margin-left: 100px;
width: 500px;
border:2px solid #001 ;
padding-bottom:20px;
}
table{
margin-left: 30px;
}
</style>
</head>
<body>
<div class="container">
<div id="box" align="center">
<h2> <center> EMI Calculator </center></h2>
<table width="85%" align="center">
<tr><br>
<td width="147" style="font-size: 120%;"> Interest Rate </td>
<td width="193" style="padding-top:10px;"> 1<input type="range" min="1" max="20" id="InterestRate" name="InterestRate" required class="form-control" placeholder="Enter Rate of Interest" onchange="EmiCalc()" /> 20</td>
<td> <label id="rate"></label> </td>
</tr>
<tr>
<td width="147" style="font-size: 120%;"> Loan Amount </td>
<td width="250">1000 <input type="range" min="1000" max="500000" id="prncipleAmount" name="prncipleAmount" required class="form-control" placeholder="Enter Loan Amount" onchange="EmiCalc()" /> 500000</td>
<td> <label id="amt"></label> </td>
</tr>
<tr>
<td width="147" style="font-size: 120%;">
Loan Period (in month)
</td>
<td style="padding-top:10px;">
0 <input type="range" min="0" max="12" id="emiMonth" name="emiMonth" required class="form-control" placeholder="Enter Period in Month" onchange="EmiCalc()" />12
<td> <label id="period"></label> </td>
</td>
</tr>
<tr>
<td style="padding-top:10px; " colspan="2"><br><br>
<center><button class="btn btn-success btn-block" onclick="EmiCalc();" style="size: 100px;"> Find EMI </button></center>
</td>
</tr>
<tr>
<td style="font-size: 120%;">
<center> Total EMI: <label id="emi"></label></center>
</td>
</tr>
</table>
<div id="result" align="center" style="color:#006;margin-top:20px;"> </div></div>
</div>
</body>
</html>