Skip to content

Commit 8f870b7

Browse files
sahandghavidelsahandghavidel
committed
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

+11-9
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

+10-7
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-
const payment = (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

+7-3
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)