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 8f870b7

Browse files
update the loan calculator project
1 parent 266dca8 commit 8f870b7

File tree

3 files changed

+28
-19
lines changed

3 files changed

+28
-19
lines changed

‎projects/loan-calculator/index.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,24 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>loan calculator</title>
7+
<title>Loan Calculator</title>
88
<link rel="stylesheet" href="style.css">
99
</head>
1010
<body>
1111
<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">
12+
<h1>Loan Calculator</h1>
13+
<p>Loan Amount $
14+
<input onchange="calculateLoan()" class="input" type="number" id="loan-amount" min="1" max="500000" value="10000">
1515
</p>
16-
<p>interest rate % <input onchange="calculateLoan()" class="input" type="number" id="interest_rate" min="0" max="100" step=".1">
16+
<p>Interest Rate %
17+
<input onchange="calculateLoan()" class="input" type="number" id="interest-rate" min="0" max="100" value="10" step=".1">
1718
</p>
18-
<p>month to pay
19-
<input onchange="calculateLoan()" class="input" type="number" id="months" min="1" max="500000">
19+
<p>Months to pay
20+
<input onchange="calculateLoan()" class="input" type="number" id="months-to-pay" min="6" max="48" value="12">
2021
</p>
21-
<p id="payment">monthly payment: </p>
22+
<p class="payment" id="payment">Monthly Payment:</p>
2223
</div>
24+
2325
<script src="index.js"></script>
2426
</body>
25-
</html>
27+
</html>

‎projects/loan-calculator/index.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
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
2+
loanAmountValue = document.getElementById("loan-amount").value;
63

7-
constpayment=(amount/months+interest).toFixed(2)
4+
interestRateValue=document.getElementById("interest-rate").value;
85

9-
document.getElementById("payment").innerHTML=`monthly payment: ${payment}`
6+
MonthsToPayValue= document.getElementById("months-to-pay").value;
107

8+
interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;
119

12-
}
10+
monthlyPayment = (loanAmountValue / MonthsToPayValue + interest).toFixed(2);
11+
12+
document.getElementById(
13+
"payment"
14+
).innerHTML = `Monthly Payment: ${monthlyPayment}`;
15+
}

‎projects/loan-calculator/style.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,19 @@ body{
99
}
1010

1111
.container{
12-
background-color: darkcyan;
12+
background: darkcyan;
1313
color: aliceblue;
1414
padding: 20px;
1515
border-radius: 10px;
16-
1716
}
1817

1918
.input{
2019
width: 100%;
21-
height: 100%;
20+
font-size: 20px;
21+
height: 30px;
22+
}
23+
24+
.payment{
25+
font-weight: 600;
2226
font-size: 20px;
2327
}

0 commit comments

Comments
(0)

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