Skip to content

Commit ea47391

Browse files
sahandghavidelsahandghavidel
committed
edit loan calculator project
1 parent 8788085 commit ea47391

File tree

3 files changed

+41
-72
lines changed

3 files changed

+41
-72
lines changed

‎projects/loan-calculator/index.html

+21-46
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<link rel="stylesheet" href="style.css" />
8-
<title>Loan Calculator</title>
9-
</head>
10-
11-
<body>
12-
<div id="loancal">
13-
<h1>Loan Calculator</h1>
14-
<p>
15-
Loan Amount: $<input
16-
id="amount"
17-
type="number"
18-
min="1"
19-
max="5000000"
20-
onchange="computeLoan()"
21-
/>
22-
</p>
23-
<p>
24-
Interest Rate: %<input
25-
id="interest_rate"
26-
min="0"
27-
max="100"
28-
value="10"
29-
step=".1"
30-
type="number"
31-
onchange="computeLoan()"
32-
/>
33-
</p>
34-
<p>
35-
Months to Pay:
36-
<input
37-
id="months"
38-
type="number"
39-
min="1"
40-
max="300"
41-
value="1"
42-
step="1"
43-
onchange="computeLoan()"
44-
/>
45-
</p>
46-
<h2 id="payment"></h2>
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>loan calculator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>loan calculator</h1>
13+
<p>loan amount $
14+
<input onchange="calculateLoan()" class="input" type="number" id="amount" min="1" max="500000">
15+
</p>
16+
<p>interest rate % <input onchange="calculateLoan()" class="input" type="number" id="interest_rate" min="0" max="100" step=".1">
17+
</p>
18+
<p>month to pay
19+
<input onchange="calculateLoan()" class="input" type="number" id="months" min="1" max="500000">
20+
</p>
21+
<p id="payment">monthly payment: </p>
4722
</div>
4823
<script src="index.js"></script>
49-
</body>
50-
</html>
24+
</body>
25+
</html>

‎projects/loan-calculator/index.js

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
function computeLoan() {
2-
const amount = document.querySelector("#amount").value;
3-
const interest_rate = document.querySelector("#interest_rate").value;
4-
const months = document.querySelector("#months").value;
5-
const interest = (amount * (interest_rate * 0.01)) / months;
6-
const payment = (amount / months + interest).toFixed(2);
7-
8-
document.querySelector("#payment").innerHTML = `Monthly Payment = ${payment}`;
9-
}
1+
function calculateLoan() {
2+
const amount = document.getElementById("amount").value
3+
const interest_rate = document.getElementById("interest_rate").value
4+
const months = document.getElementById("months").value
5+
const interest = (amount * (interest_rate * .01)) / months
6+
7+
const payment = (amount / months + interest).toFixed(2)
8+
9+
document.getElementById("payment").innerHTML = `monthly payment: ${payment}`
10+
11+
12+
}

‎projects/loan-calculator/style.css

+8-17
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,23 @@
1-
21
body{
32
padding: 0;
43
margin: 0;
54
display: flex;
5+
height: 100vh;
66
justify-content: center;
77
align-items: center;
8-
height: 100vh;
98
font-family: 'Courier New', Courier, monospace;
109
}
1110

12-
#loancal {
13-
padding: 20px;
14-
border-radius: 10px;
15-
background-color:darkcyan;
11+
.container{
12+
background-color: darkcyan;
1613
color: aliceblue;
14+
padding: 20px;
15+
border-radius: 10px;
16+
1717
}
1818

19-
#months, #amount, #interest_rate{
19+
.input{
2020
width: 100%;
21-
height: 40px;
21+
height: 100%;
2222
font-size: 20px;
23-
24-
}
25-
26-
#interest_rate {
27-
margin-left: 2px;
28-
}
29-
30-
h1 {
31-
font-size:40px;
3223
}

0 commit comments

Comments
 (0)