diff --git a/Domains/Frontend/MiniProjects/LoanCalculator/._index.html b/Domains/Frontend/MiniProjects/LoanCalculator/._index.html new file mode 100644 index 00000000..bc505ebb Binary files /dev/null and b/Domains/Frontend/MiniProjects/LoanCalculator/._index.html differ diff --git a/Domains/Frontend/MiniProjects/LoanCalculator/README.md b/Domains/Frontend/MiniProjects/LoanCalculator/README.md new file mode 100644 index 00000000..d8615c1e --- /dev/null +++ b/Domains/Frontend/MiniProjects/LoanCalculator/README.md @@ -0,0 +1,12 @@ +**Contributor:** Aaditya-2407 + +## Description +A simple utility to calculate the estimated monthly payment for a loan based on the loan amount, annual interest rate, and term in years. + +## Tech Stack +- HTML +- CSS +- JavaScript (Vanilla) + +## How to Run +1. Open the `index.html` file in your web browser. \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/LoanCalculator/index.html b/Domains/Frontend/MiniProjects/LoanCalculator/index.html new file mode 100644 index 00000000..f864cd9d --- /dev/null +++ b/Domains/Frontend/MiniProjects/LoanCalculator/index.html @@ -0,0 +1,31 @@ + + + + + + Loan Calculator + + + +
+

Loan Calculator

+
+ + +
+
+ + +
+
+ + +
+ +
+

Monthly Payment: $0.00

+
+
+ + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/LoanCalculator/script.js b/Domains/Frontend/MiniProjects/LoanCalculator/script.js new file mode 100644 index 00000000..e589584d --- /dev/null +++ b/Domains/Frontend/MiniProjects/LoanCalculator/script.js @@ -0,0 +1,35 @@ +const loanAmountInput = document.getElementById('loan-amount'); +const interestRateInput = document.getElementById('interest-rate'); +const loanTermInput = document.getElementById('loan-term'); +const calculateBtn = document.getElementById('calculate-btn'); +const monthlyPaymentSpan = document.getElementById('monthly-payment'); +const resultContainer = document.getElementById('result-container'); + +function calculateMonthlyPayment() { + const principal = parseFloat(loanAmountInput.value); + const annualInterestRate = parseFloat(interestRateInput.value); + const years = parseFloat(loanTermInput.value); + + if (isNaN(principal) || isNaN(annualInterestRate) || isNaN(years) || principal <= 0 || annualInterestRate <= 0 || years <= 0) { + monthlyPaymentSpan.textContent = '$0.00'; + resultContainer.style.display = 'block'; + return; + } + + const monthlyInterestRate = annualInterestRate / 100 / 12; + const numberOfPayments = years * 12; + + // M = P [ i(1 + i)^n ] / [ (1 + i)^n – 1] + const monthlyPayment = principal * (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments)) / + (Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1); + + if (isFinite(monthlyPayment)) { + monthlyPaymentSpan.textContent = `$${monthlyPayment.toFixed(2)}`; + resultContainer.style.display = 'block'; + } else { + monthlyPaymentSpan.textContent = '$0.00'; + resultContainer.style.display = 'block'; + } +} + +calculateBtn.addEventListener('click', calculateMonthlyPayment); \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/LoanCalculator/style.css b/Domains/Frontend/MiniProjects/LoanCalculator/style.css new file mode 100644 index 00000000..61ef8619 --- /dev/null +++ b/Domains/Frontend/MiniProjects/LoanCalculator/style.css @@ -0,0 +1,81 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f2f5; + margin: 0; +} + +.calculator-container { + width: 90%; + max-width: 420px; + padding: 2rem; + background-color: #ffffff; + border-radius: 16px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} + +h1 { + color: #333; + text-align: center; + margin-bottom: 1.5rem; +} + +.input-group { + margin-bottom: 1.25rem; +} + +.input-group label { + display: block; + margin-bottom: 0.5rem; + color: #555; + font-weight: 500; +} + +.input-group input { + width: 100%; + padding: 0.75rem; + border: 1px solid #ddd; + border-radius: 8px; + box-sizing: border-box; + font-size: 1rem; +} + +button { + font-size: 1rem; + font-weight: 600; + color: #ffffff; + background-color: #007aff; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.2s ease; + width: 100%; + margin-top: 0.5rem; +} + +button:hover { + background-color: #0056b3; +} + +.result { + margin-top: 1.5rem; + text-align: center; + padding: 1rem; + background-color: #f9f9f9; + border-radius: 8px; +} + +.result h2 { + font-size: 1.25rem; + color: #333; + margin: 0; +} + +#monthly-payment { + color: #007aff; + font-weight: 600; +} \ No newline at end of file