Skip to content

Commit 8e8d21c

Browse files
avnee-gyavnee-gy
committed
EMI calculator added
1 parent 33f73b2 commit 8e8d21c

File tree

3 files changed

+390
-0
lines changed

3 files changed

+390
-0
lines changed

‎EmiCalculator/avnee-gy/home.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>EMI Calculator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<nav>
12+
<h2>EMI CALCULATOR</h2>
13+
</nav>
14+
<section class="inputs_">
15+
<div class="container">
16+
<div class="inputs_labels">
17+
Principal Amount (₹):
18+
</div>
19+
<!-- <div class="sliders">
20+
<div class="sliderValue">
21+
<input type="range" min="1000" max="10000000" value="100" steps="1000" id="amt">
22+
</div>
23+
<div class="field">
24+
<div class="val1">0</div>
25+
</div>
26+
</div> -->
27+
<div class="sliders">
28+
<input type="number" id="amt">
29+
</div>
30+
</div>
31+
<div class="container">
32+
<div class="inputs_labels">
33+
Loan Tenure (months):
34+
</div>
35+
<div class="sliders">
36+
<div class="sliderValue">
37+
<input type="range" min="0" max="360" value="100" steps="1" id="time">
38+
</div>
39+
<div class="field">
40+
<div class="val2">0</div>
41+
</div>
42+
</div>
43+
</div>
44+
<div class="container">
45+
<div class="inputs_labels">
46+
Interest Rate (%) :
47+
</div>
48+
<div class="sliders">
49+
<input type="number" id="rate">
50+
</div>
51+
</div>
52+
</section>
53+
54+
<div class="btn">
55+
<button class="custom-btn btn-3" id="calc"><span>Calculate</span></button>
56+
</div>
57+
58+
<section class="output_">
59+
<div class="labels" id="a">
60+
Total Amount to be paid: (₹):
61+
<div class="out pay"></div>
62+
</div>
63+
<div class="labels" id="b">
64+
EMI per Month (₹):
65+
<div class="out emi"></div>
66+
</div>
67+
<div class="labels" id="c">
68+
Compound Interest: (₹):
69+
<div class="out inter"></div>
70+
</div>
71+
72+
</section>
73+
74+
75+
76+
77+
78+
79+
<script src='./js/script.js'></script>
80+
</body>
81+
</html>

‎EmiCalculator/avnee-gy/js/script.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const loanAmount = document.getElementById("amt");
2+
const loanTenure = document.getElementById("time");
3+
const loanRate = document.getElementById("rate");
4+
5+
const out1 = document.querySelector(".val1");
6+
const out2 = document.querySelector(".val2");
7+
8+
9+
loanTenure.oninput = (()=>{
10+
let value = loanTenure.value;
11+
out2.textContent = value;
12+
out2.style.left = (value/2) + "%";
13+
out2.classList.add("show");
14+
});
15+
loanTenure.onblur = (()=>{
16+
out2.classList.remove("show");
17+
});
18+
19+
loanAmount.oninput = (()=>{
20+
let value = loanAmount.value;
21+
out1.textContent = value;
22+
out1.style.left = (value/2) + "%";
23+
out1.classList.add("show");
24+
}
25+
);
26+
loanAmount.onblur = (()=>{
27+
out1.classList.remove("show");
28+
});
29+
30+
31+
32+
33+
const loanEmi = document.querySelector(".emi");
34+
// const loanPrinciple = document.querySelector(".loan_principle");
35+
const loanTotal = document.querySelector(".pay");
36+
const loanInterest = document.querySelector(".inter");
37+
console.log("Developed By Avnee Goyal :)")
38+
39+
40+
41+
const submitBtn = document.querySelector("#calc");
42+
43+
submitBtn.addEventListener("click", function(){
44+
45+
// amount = loanAmount.value;
46+
// tenure = (loanTenure.value); // 1Year = 12 months
47+
// let time = tenure/12;
48+
// rate = (loanRate.value); // loan rate per year / 100 = loan percentage
49+
// total= amount*(Math.pow(1+(rate/100),time)) //compound interest formula
50+
// emi = total/(tenure*12);
51+
// emi = amount*rate*Math.pow((1+rate),tenure)/(Math.pow((1+r), tenure)-1);
52+
// // total = emi * tenure; // total amount to be paid including interest
53+
// interest = total - amount // interest = total amount - principle amount
54+
55+
56+
amount = loanAmount.value;
57+
tenure = (loanTenure.value); // 1Year = 12 months
58+
time = tenure/12;
59+
rate = (loanRate.value); // loan rate per year / 100 = loan percentage
60+
total= amount*(Math.pow(1+(rate/100),time)) ;//compound interest formula
61+
// emi = amount*rate*Math.pow((1+rate),tenure*12)/(Math.pow((1+r), tenure*12)-1);
62+
monthly_rate = rate/(12*100);
63+
frst_int = monthly_rate*amount;
64+
emi = Math.pow((1+ monthly_rate), (tenure-1)) / (Math.pow((1+ monthly_rate), (tenure-1)) -1) * frst_int;
65+
// total = emi * tenure; // total amount to be paid including interest
66+
interest = total - amount ;
67+
68+
69+
loanEmi.innerHTML = Math.floor(emi);
70+
// loanPrinciple.innerHTML = Math.floor(amount);
71+
loanTotal.innerHTML = Math.floor (total);
72+
loanInterest.innerHTML = Math.floor (interest);
73+
74+
75+
76+
77+
78+
79+
80+
81+
});

‎EmiCalculator/avnee-gy/style.css

+228
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
html{
2+
scroll-behavior: smooth;
3+
}
4+
5+
html,body{
6+
margin: 0;
7+
font-size: 20px;
8+
font-weight: 400;
9+
font-family: Georgia, 'Times New Roman', Times, serif;
10+
color: #7883d3;
11+
/* display: flex; */
12+
/* align-items: center; */
13+
}
14+
15+
nav{
16+
height: 70px;
17+
width: 100%;
18+
overflow: hidden;
19+
background-color: #7883d3;
20+
color: #fff;
21+
display: flex;
22+
justify-content: center; /* Center the content horizontally */
23+
align-items: center;
24+
}
25+
h2{
26+
margin: 0 auto;
27+
}
28+
29+
30+
.inputs_{
31+
/* margin-top: 50px; */
32+
align-items: center;
33+
margin-top: 30px;
34+
35+
}
36+
37+
.container{
38+
display: flex;
39+
padding: 20px 20px 20px 30px;
40+
align-items: center;
41+
place-content: center;
42+
margin-right: 20px;
43+
}
44+
45+
.inputs_labels{
46+
margin-right: 20px;
47+
color: #7883d3;
48+
text-decoration: solid;
49+
}
50+
51+
.sliders{
52+
display: flex;
53+
justify-content: space-around;
54+
}
55+
56+
.container .sliders .sliderValue{
57+
height: 40px;
58+
width: 600px;
59+
display: flex;
60+
}
61+
62+
.container .sliders .sliderValue input{
63+
height: 10px;
64+
width: 100%;
65+
margin-right: 20px;
66+
cursor: pointer;
67+
-webkit-appearance: none;
68+
outline: none;
69+
background: #f2f2f2;
70+
border-radius: 25px;
71+
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
72+
73+
}
74+
75+
/* .sliderValue input::-moz-range-progress{
76+
height: 10px;
77+
border-radius: 25px;
78+
background: #f9cf08;
79+
}
80+
81+
.sliderValue input::-moz-range-thumb{
82+
height: 20px;
83+
width: 20px;
84+
border-radius: 50%;
85+
border: 4px solid white;
86+
background-color: #7883d3;
87+
88+
} */
89+
90+
.sliderValue input::-webkit-slider-runnable-track {
91+
height: 12px;
92+
border-radius: 25px;
93+
background: #f9cf08;
94+
border: none;
95+
}
96+
97+
.sliderValue input::-webkit-slider-thumb {
98+
-webkit-appearance: none;
99+
height: 20px;
100+
width: 20px;
101+
border-radius: 50%;
102+
border: 2px solid white;
103+
background-color: #7883d3;
104+
}
105+
106+
.sliderValue input:focus {
107+
outline: none;
108+
}
109+
110+
.custom-btn {
111+
width: 130px;
112+
height: 40px;
113+
color: #fff;
114+
border-radius: 5px;
115+
padding: 10px 25px;
116+
font-family: Georgia, 'Times New Roman', Times, serif;
117+
font-weight: 500;
118+
background: transparent;
119+
cursor: pointer;
120+
transition: all 0.3s ease;
121+
margin-bottom: 100px;
122+
margin-left: 600px;
123+
position: relative;
124+
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
125+
7px 7px 20px 0px rgba(0,0,0,.1),
126+
4px 4px 5px 0px rgba(0,0,0,.1);
127+
outline: none;
128+
display: flex;
129+
justify-content: center;
130+
align-items: center;
131+
}
132+
133+
.btn-3 {
134+
background: rgb(1,196,223);
135+
/* background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); */
136+
width: 130px;
137+
height: 40px;
138+
line-height: 42px;
139+
padding: 0;
140+
border: none;
141+
142+
}
143+
.btn-3 span {
144+
position: relative;
145+
display: block;
146+
width: 100%;
147+
height: 100%;
148+
color: #7883d3;
149+
text-decoration: solid;
150+
align-items: center;
151+
}
152+
.btn-3:before,
153+
.btn-3:after {
154+
position: absolute;
155+
content: "";
156+
right: 0;
157+
top: 0;
158+
/* left: 0;
159+
bottom: 0; */
160+
background: rgba(1,196,223,1);
161+
transition: all 0.3s ease;
162+
}
163+
.btn-3:before {
164+
height: 0%;
165+
width: 2px;
166+
}
167+
.btn-3:after {
168+
width: 0%;
169+
height: 2px;
170+
}
171+
.btn-3:hover{
172+
background: transparent;
173+
box-shadow: none;
174+
}
175+
.btn-3:hover:before {
176+
height: 100%;
177+
178+
}
179+
.btn-3:hover:after {
180+
width: 100%;
181+
}
182+
.btn-3 span:hover{
183+
color: rgba(1,196,223,1);
184+
}
185+
.btn-3 span:before,
186+
.btn-3 span:after {
187+
position: absolute;
188+
content: "";
189+
left: 0;
190+
bottom: 0;
191+
/* right: 0;
192+
top: 0; */
193+
background: rgba(1,196,223,1);
194+
transition: all 0.3s ease;
195+
}
196+
.btn-3 span:before {
197+
width: 2px;
198+
height: 0%;
199+
}
200+
.btn-3 span:after {
201+
width: 0%;
202+
height: 2px;
203+
}
204+
.btn-3 span:hover:before {
205+
height: 100%;
206+
}
207+
.btn-3 span:hover:after {
208+
width: 100%;
209+
}
210+
.output_{
211+
display: flex;
212+
justify-content:space-evenly;
213+
margin-top: 50px;
214+
}
215+
216+
.labels{
217+
border: 10px;
218+
border-color: gray;
219+
padding: 80px 65px 100px 45px;
220+
background-color: white;
221+
box-shadow :2px;
222+
box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
223+
}
224+
225+
.out{
226+
color: rgb(1,196,223);
227+
align-items: center;
228+
}

0 commit comments

Comments
 (0)