From 78334c4bdd25ad0565cf3e3893106f0d4a1703c4 Mon Sep 17 00:00:00 2001 From: Manish kumar gupta <97523900+manishh12@users.noreply.github.com> Date: Fri, 24 May 2024 14:27:54 +0530 Subject: [PATCH] Added Loan Amount Calculator (#804) --- Calculators/Loan-Amount-Calculator/README.md | 15 ++ Calculators/Loan-Amount-Calculator/index.html | 81 ++++++++ Calculators/Loan-Amount-Calculator/script.js | 36 ++++ Calculators/Loan-Amount-Calculator/style.css | 176 ++++++++++++++++++ index.html | 16 +- 5 files changed, 323 insertions(+), 1 deletion(-) create mode 100644 Calculators/Loan-Amount-Calculator/README.md create mode 100644 Calculators/Loan-Amount-Calculator/index.html create mode 100644 Calculators/Loan-Amount-Calculator/script.js create mode 100644 Calculators/Loan-Amount-Calculator/style.css diff --git a/Calculators/Loan-Amount-Calculator/README.md b/Calculators/Loan-Amount-Calculator/README.md new file mode 100644 index 000000000..44bbe0212 --- /dev/null +++ b/Calculators/Loan-Amount-Calculator/README.md @@ -0,0 +1,15 @@ +#

Loan Amount Calculator

+ +## Description :- + +This is a calculator which provides the amount of money you will pay as compound interest. This calculator requires inputs for the loan amount, the interest rate, and the number of months for repayment. It calculates the monthly payment and provides a breakdown of the principal and interest payments. + +## Tech Stacks:- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/617e5a3c-2e07-4585-b020-3f71598465a1) diff --git a/Calculators/Loan-Amount-Calculator/index.html b/Calculators/Loan-Amount-Calculator/index.html new file mode 100644 index 000000000..f37410058 --- /dev/null +++ b/Calculators/Loan-Amount-Calculator/index.html @@ -0,0 +1,81 @@ + + + + + + Loan Amount Calculator + + + + +
+
+

Loan Amount Calculator

+
+ +
+
+ 1 + +
+
+ (in rupees) + +
+
+ + +
+
+ 2 + +
+
+ (in percent) + +
+
+ + +
+
+ 3 + +
+
+ (in months) + +
+
+ +
+ + +
+
+
+
+

Your Monthly Payments

+
+
+

Loan Amount

+ — +
+
+

Interest Rate

+ — +
+
+

Number of Months

+ — +
+
+

Monthly Payments

+ — +
+
+
+
+ + + diff --git a/Calculators/Loan-Amount-Calculator/script.js b/Calculators/Loan-Amount-Calculator/script.js new file mode 100644 index 000000000..4fd16688e --- /dev/null +++ b/Calculators/Loan-Amount-Calculator/script.js @@ -0,0 +1,36 @@ +const calcForm = document.getElementById('calc-form'), + loanAmount = document.getElementById('loan-amount'), + interestRate = document.getElementById('interest-rate'), + noOfMonth = document.getElementById('no-of-month'), + calcBtn = document.getElementById('calc-btn'), + clearBtn = document.getElementById('clear-btn'), + paymentInfoList = document.querySelectorAll('.payment-info div span'); + +calcForm.addEventListener('submit', (e) => { + e.preventDefault(); + showPaymentInfo(); +}); + +clearBtn.addEventListener('click', clearInputAndResult); + +// show payment info +function showPaymentInfo() { + let monthlyPayment = calcMonthlyPayment(loanAmount.value, interestRate.value, noOfMonth.value); + paymentInfoList[0].innerHTML = `₹${loanAmount.value.toLocaleString()}`; + paymentInfoList[1].innerHTML = `${interestRate.value}%`; + paymentInfoList[2].innerHTML = noOfMonth.value; + paymentInfoList[3].innerHTML = `₹${parseFloat(monthlyPayment).toLocaleString()}`; +} + +function calcMonthlyPayment(PV, i, n) { + i = (i / 100) / 12; + let PMT = (PV * i * Math.pow(1 + i, n)) / (Math.pow(1 + i, n) - 1); + return PMT.toFixed(2); +} + +function clearInputAndResult() { + calcForm.reset(); + paymentInfoList.forEach(item => { + item.innerHTML = "—"; + }); +} diff --git a/Calculators/Loan-Amount-Calculator/style.css b/Calculators/Loan-Amount-Calculator/style.css new file mode 100644 index 000000000..6e964f0c4 --- /dev/null +++ b/Calculators/Loan-Amount-Calculator/style.css @@ -0,0 +1,176 @@ +@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap'); + +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Fira Sans', sans-serif; +} + +body { + background-color: #f4f7f6; + line-height: 1.6; + font-size: 1.1rem; + color: #333; +} + +.calc-wrapper { + max-width: 800px; + padding: 3rem 1rem; + margin: 0 auto; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + background: #ffffff; + border-radius: 10px; +} + +.calc-wrapper > div { + padding: 1.5rem 2.5rem; +} + +.calc-content { + margin-bottom: 1.6rem; +} + +.calc-content h2, +.result-content h2 { + font-size: 1.5rem; + font-weight: 700; + text-align: center; + color: #06d6a0; + text-transform: uppercase; + letter-spacing: 1.5px; + padding: 0.5rem 0; + border-bottom: 2px solid rgba(0, 0, 0, 0.1); +} + +#calc-form, +.payment-info { + margin-top: 1.6rem; +} + +.form-item { + margin: 1rem 0; + display: flex; + align-items: center; + justify-content: space-between; +} + +.input-name span { + background-color: #089de2; + display: block; + width: 30px; + height: 30px; + border-radius: 50%; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-weight: 800; +} + +.input-name { + display: flex; + align-items: center; +} + +.input-name label { + padding-left: 0.8rem; + font-weight: 500; + color: #555; +} + +.input-control input { + font-size: 1rem; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 0.5rem 0.7rem; + border-radius: 5px; + width: 100%; +} + +.input-control input:focus { + outline: none; + border-color: #089de2; +} + +.input-control span { + padding-right: 0.6rem; + font-weight: 300; + opacity: 0.7; +} + +.btns { + margin-top: 2rem; + display: flex; + justify-content: space-between; +} + +.btns input { + background-color: #089de2; + border: none; + font-family: inherit; + text-transform: uppercase; + font-size: 1.1rem; + color: #fff; + padding: 0.7rem 1rem; + border-radius: 5px; + outline: 0; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.btns input:hover { + background-color: #089de2; +} + +.payment-info { + display: grid; + grid-template-columns: repeat(4, 1fr); + text-align: center; + gap: 1rem; + margin-top: 2rem; +} + +.payment-info div { + padding: 1rem 0; + background: #089de2; + color: #fff; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.payment-info div h4 { + font-weight: 500; + padding: 0.6rem 0; +} + +.payment-info div span { + font-weight: 400; + font-size: 1.75rem; +} + +@media screen and (max-width: 992px) { + .payment-info { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (max-width: 680px) { + .form-item { + flex-direction: column; + align-items: flex-start; + } + .input-name { + margin-bottom: 0.6rem; + } + .input-control span { + display: block; + } + .btns { + flex-direction: column; + align-items: center; + } + .btns input { + margin-bottom: 1rem; + width: 100%; + } +} diff --git a/index.html b/index.html index bb4ce1309..17b6c2d4b 100644 --- a/index.html +++ b/index.html @@ -1140,6 +1140,20 @@

Calculates values of variables from linear equation in two variables.

+
+
+

Loan Amount Calculator

+

Calculator that calculates the amount of money to pay as compound interest.

+
+ + + + + Source Code + +
+
+

Loan Repayment Date Calculator

@@ -2035,7 +2049,7 @@

Calculates the linear density of the yarn from unit system to another.

- +