From da7e5efc24b08cf49d2b4cc42c0260e9b391a59d Mon Sep 17 00:00:00 2001 From: Aaditya Kharat Date: Mon, 20 Oct 2025 13:12:52 +0530 Subject: [PATCH 1/2] Add: Frontend - Loan Calculator --- .../MiniProjects/EMICalculator/README.md | 12 +++ .../MiniProjects/EMICalculator/index.html | 31 +++++++ .../MiniProjects/EMICalculator/script.js | 53 ++++++++++++ .../MiniProjects/EMICalculator/style.css | 81 ++++++++++++++++++ .../MiniProjects/LoanCalculator/._index.html | Bin 0 -> 4096 bytes .../MiniProjects/LoanCalculator/README.md | 0 .../MiniProjects/LoanCalculator/index.html | 0 .../MiniProjects/LoanCalculator/script.js | 0 .../MiniProjects/LoanCalculator/style.css | 0 9 files changed, 177 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/EMICalculator/README.md create mode 100644 Domains/Frontend/MiniProjects/EMICalculator/index.html create mode 100644 Domains/Frontend/MiniProjects/EMICalculator/script.js create mode 100644 Domains/Frontend/MiniProjects/EMICalculator/style.css create mode 100644 Domains/Frontend/MiniProjects/LoanCalculator/._index.html create mode 100644 Domains/Frontend/MiniProjects/LoanCalculator/README.md create mode 100644 Domains/Frontend/MiniProjects/LoanCalculator/index.html create mode 100644 Domains/Frontend/MiniProjects/LoanCalculator/script.js create mode 100644 Domains/Frontend/MiniProjects/LoanCalculator/style.css diff --git a/Domains/Frontend/MiniProjects/EMICalculator/README.md b/Domains/Frontend/MiniProjects/EMICalculator/README.md new file mode 100644 index 00000000..d8615c1e --- /dev/null +++ b/Domains/Frontend/MiniProjects/EMICalculator/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/EMICalculator/index.html b/Domains/Frontend/MiniProjects/EMICalculator/index.html new file mode 100644 index 00000000..f864cd9d --- /dev/null +++ b/Domains/Frontend/MiniProjects/EMICalculator/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/EMICalculator/script.js b/Domains/Frontend/MiniProjects/EMICalculator/script.js new file mode 100644 index 00000000..57645d95 --- /dev/null +++ b/Domains/Frontend/MiniProjects/EMICalculator/script.js @@ -0,0 +1,53 @@ +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); + + // Clear previous result or error messages + monthlyPaymentSpan.textContent = '$0.00'; + resultContainer.style.display = 'none'; // Hide result initially + + if (isNaN(principal) || isNaN(annualInterestRate) || isNaN(years) || principal <= 0 || annualInterestRate < 0 || years <= 0) { + // Optionally display an error message + // alert('Please enter valid positive numbers for all fields.'); + return; // Stop calculation if input is invalid + } + + const monthlyInterestRate = annualInterestRate / 100 / 12; + const numberOfPayments = years * 12; + + // Handle edge case: 0% interest rate + if (monthlyInterestRate === 0) { + const monthlyPayment = principal / numberOfPayments; + monthlyPaymentSpan.textContent = `$${monthlyPayment.toFixed(2)}`; + resultContainer.style.display = 'block'; + return; + } + + // Standard loan formula: 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 { + // Should not happen with valid inputs, but good to handle + monthlyPaymentSpan.textContent = 'Error'; + resultContainer.style.display = 'block'; + } +} + +calculateBtn.addEventListener('click', calculateMonthlyPayment); + +// Optional: Calculate on input change as well +// [loanAmountInput, interestRateInput, loanTermInput].forEach(input => { +// input.addEventListener('input', calculateMonthlyPayment); +// }); \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/EMICalculator/style.css b/Domains/Frontend/MiniProjects/EMICalculator/style.css new file mode 100644 index 00000000..61ef8619 --- /dev/null +++ b/Domains/Frontend/MiniProjects/EMICalculator/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 diff --git a/Domains/Frontend/MiniProjects/LoanCalculator/._index.html b/Domains/Frontend/MiniProjects/LoanCalculator/._index.html new file mode 100644 index 0000000000000000000000000000000000000000..d68cdfbaa46d6b8155b06fdc627612aa8191609a GIT binary patch literal 4096 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDJkFz{^v(m+1nBL)UWIUt(=a103vf+zv$ zU|0ae0uVl&WCXGn05MQpDmgz_FR`E?Csi*evACqPI5j0Du_RSFAQ+@t>iO3U5bdh@ z&jdt|g3%Bd4S~@R7!85Z5Eu=C(GVC7fzc2c4S~@R7!85Z5Wp1zpw1=;gMnN~MrN@> zQEG91X;E^jLRx-NwnAoJNorn6W`15`PEMslPHI|-LQ+m*UN*2V4AnKHDOCT%y&}UP H_y0ctNn Date: Mon, 20 Oct 2025 13:14:13 +0530 Subject: [PATCH 2/2] Add: Frontend - EMI Calculator --- .../MiniProjects/LoanCalculator/README.md | 12 +++ .../MiniProjects/LoanCalculator/index.html | 31 +++++++ .../MiniProjects/LoanCalculator/script.js | 35 ++++++++ .../MiniProjects/LoanCalculator/style.css | 81 +++++++++++++++++++ 4 files changed, 159 insertions(+) diff --git a/Domains/Frontend/MiniProjects/LoanCalculator/README.md b/Domains/Frontend/MiniProjects/LoanCalculator/README.md index e69de29b..d8615c1e 100644 --- a/Domains/Frontend/MiniProjects/LoanCalculator/README.md +++ 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 index e69de29b..f864cd9d 100644 --- a/Domains/Frontend/MiniProjects/LoanCalculator/index.html +++ 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 index e69de29b..e589584d 100644 --- a/Domains/Frontend/MiniProjects/LoanCalculator/script.js +++ 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 index e69de29b..61ef8619 100644 --- a/Domains/Frontend/MiniProjects/LoanCalculator/style.css +++ 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