└── Loan - Calculator
├── index.js
├── style.css
└── index.html
/Loan - Calculator/index.js:
--------------------------------------------------------------------------------
1 | function calculateLoan() {
2 | loanAmountValue = document.getElementById("loan-amount").value;
3 |
4 | interestRateValue = document.getElementById("interest-rate").value;
5 |
6 | MonthsToPayValue = document.getElementById("months-to-pay").value;
7 |
8 | interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;
9 |
10 | monthlyPayment = (loanAmountValue / MonthsToPayValue + interest).toFixed(2);
11 |
12 | document.getElementById(
13 | "payment"
14 | ).innerHTML = `Monthly Payment: ${monthlyPayment}`;
15 | }
16 |
--------------------------------------------------------------------------------
/Loan - Calculator/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding: 10;
3 | margin: 10;
4 | display: flex;
5 | height: 100vh;
6 | justify-content: center;
7 | align-items: center;
8 | font-family: "Courier New", Courier, monospace;
9 | }
10 |
11 | .container {
12 | background: rgb(235, 165, 230);
13 | color: rgb(206, 214, 222);
14 | padding: 100px;
15 | border-radius: 20px;
16 | }
17 |
18 | .input {
19 | width: 100%;
20 | font-size: 20px;
21 | height: 40px;
22 | }
23 |
24 | .payment {
25 | color: black;
26 |
27 | font-weight: 600;
28 | font-size: 20px;
29 | }
30 | h1 {
31 | color: rgb(224, 15, 15);
32 | background-color: rgb(255, 255, 255);
33 | }
34 | h3 {
35 | color: black;
36 | }
37 |
--------------------------------------------------------------------------------
/Loan - Calculator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loan Calculator
8 |
9 |
10 |
11 |
12 |
Loan Calculator
13 |
Loan Amount $:
14 |
15 |
16 |
Interest Rate %:
17 |
18 |
19 |
Months to pay:
20 |
21 |
22 |
Monthly Payment:
23 |