Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ea47391

Browse files
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‎

Lines changed: 21 additions & 46 deletions
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‎

Lines changed: 12 additions & 9 deletions
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‎

Lines changed: 8 additions & 17 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /