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 aab0626e6..1b8253e9d 100644 --- a/index.html +++ b/index.html @@ -1112,6 +1112,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

@@ -1951,7 +1965,7 @@

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

- + @@ -1993,4 +2007,4 @@

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

- \ No newline at end of file +