Skip to content

Commit bf8de21

Browse files
harshita2216harshita2216
authored
Merge pull request #339 from khushi-purwar/dev-khushiP
Added Loan Calculator
2 parents 45f3573 + 0b20284 commit bf8de21

File tree

7 files changed

+126
-0
lines changed

7 files changed

+126
-0
lines changed

‎Index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,5 +128,7 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
128128
| [Magic-Color-Changer](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Magic-Color-Changer)| This is a pure javascript project.
129129
|[Fetch API using react app](https://github.com/abhishektyagi2912/Web-dev-mini-projects/tree/main/Fetch%20API%20%20using%20react%20app)| That we add get user button to API calls to get user data and have a loader while API fetch the data .
130130
|[Product Landing Page](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/saloni-15-project-1/Product%20Landing%20Page)| A beginner-friendly single-page product landing website built with HTML and CSS for understanding the concept of responsive websites using CSS Grids.
131+
| [Loan Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Loan%20Calculator)| This is a simple loan calculator which calculates the Loan EMI (Equated Monthly Installment).
131132
|[My Online Meal](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/My-Online-Meal)| It is a simple and responsive website.
133+
132134

‎Loan Calculator/Screenshots/demo.gif

300 KB
Loading

‎Loan Calculator/Screenshots/ss1.png

26.8 KB
Loading

‎Loan Calculator/Screenshots/ss2.png

39 KB
Loading

‎Loan Calculator/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Loan Calculator</title>
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<h3>Loan Calculator</h3>
15+
<p>Loan Amount:
16+
<input type="number" value="1" id="amount" min="0" onchange="calculateLoan()"> ₹</p>
17+
<p>Interest Rate:
18+
<input type="number" value="0.1" id="interest" min="0" onchange="calculateLoan()"> % </p>
19+
<p>Months to Pay:
20+
<input type="number" value="1" id="months" min="0" onchange="calculateLoan()"> </p>
21+
<h2 id="payment"></h2> </div>
22+
<script src="script.js">
23+
function calculateLoan() {
24+
const amount = document.querySelector("#amount").value;
25+
const interestRate = document.querySelector("#interest").value;
26+
const months = document.querySelector("#months").value;
27+
const monthlyRate = (interestRate) / (12 * 100);
28+
const onePlusR = Math.pow(1 + monthlyRate, months);
29+
const den = onePlusR - 1;
30+
const emi = (amount * monthlyRate * (onePlusR / den)).toFixed(2);
31+
const totalPay = (emi * months).toFixed(2);
32+
document.querySelector("#payment").innerHTML = `EMI: ₹ ${emi} <br><br> Total Payment: ₹${totalPay}`
33+
}
34+
</script>
35+
</body>
36+
37+
</html>

‎Loan Calculator/readme.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Loan Calculator using JS
2+
3+
## About the Project
4+
<p>User enters three values - Loan Amount, interest and number of months. After that, EMI and total payment will be displayed on the screen </p>
5+
6+
## Use of the Project:
7+
8+
<p>To Calculates the Loan EMI (Equated Monthly Installment)</p>
9+
10+
## Tech Stacks Used
11+
12+
13+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
14+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
15+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
16+
17+
## Steps to Use:
18+
19+
---
20+
21+
- Download or clone the repository
22+
23+
```
24+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
25+
```
26+
27+
- Go to the directory
28+
- Run the index.html file
29+
- Start Calculating!
30+
31+
## Screenshots
32+
33+
Initially, the calculator have some default values:
34+
35+
<img src="./Screenshots/ss1.png" />
36+
37+
After entering the values, UI looks like:
38+
39+
<img src="./Screenshots/ss2.png" />
40+
41+
## Live Demo
42+
43+
<img src="./Screenshots/demo.gif" />

‎Loan Calculator/style.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
body {
2+
background-color: pink;
3+
}
4+
5+
.container {
6+
width: 400px;
7+
height: 450px;
8+
background-color: #ff4a7a;
9+
position: absolute;
10+
top: 50%;
11+
left: 50%;
12+
transform: translateX(-50%) translateY(-50%);
13+
color: white;
14+
padding: 20px 0 0 100px;
15+
border-radius: 50px;
16+
}
17+
18+
h3 {
19+
font-size: 35px;
20+
}
21+
22+
input {
23+
width: 80%;
24+
padding: 8px;
25+
border: none;
26+
margin-top: 10px;
27+
}
28+
29+
input:focus {
30+
outline: none;
31+
}
32+
33+
h2 {
34+
margin-top: 30px;
35+
}
36+
37+
@media screen and (max-width: 360px) {
38+
.container {
39+
border-radius: 0;
40+
top: 37%;
41+
}
42+
}
43+
44+

0 commit comments

Comments
 (0)