Skip to content

feat: add EMI Loan Planner #1177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cu-sanjay merged 1 commit into from
Jun 15, 2026
Merged

feat: add EMI Loan Planner #1177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions Projects/EMI Loan Planner/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
# EMI Loan Planner

An interactive personal finance utility and loan amortization planner. It calculates Equated Monthly Installments (EMI), models standard and custom prepayments (monthly, annual, and one-time), projects interest and tenure savings, and draws canvas-based visuals.

---

## Amortization Mathematics & Prepayments

The calculator runs dual simulations (a baseline without prepayments vs. an active plan with prepayments) to evaluate savings.

### 1. Equated Monthly Installment (EMI)
Calculated using the standard compounding annuity formula:

$$EMI = P \times r \times \frac{(1 + r)^n}{(1 + r)^n - 1}$$

Where:
- $P$: Loan principal amount.
- $r$: Monthly interest rate ($R_{\text{annual}} / 12 / 100$).
- $n$: Loan tenure in months ($\text{Years} \times 12$).

### 2. Month-by-Month Amortization Schedule
For each month $m = 1, 2, ...$:
- **Interest Portion**:
$$Interest_m = Balance_{m-1} \times r$$
- **Principal Portion**:
$$Principal\_Paid_m = \min(EMI - Interest_m, Balance_{m-1})$$
- **Extra Prepayment ($PP_m$)**: Any extra principal prepaid at month $m$.
- **Ending Balance**:
$$Balance_m = Balance_{m-1} - Principal\_Paid_m - PP_m$$

The loop terminates when $Balance_m \le 0$ or when the max term is reached.

### 3. Savings Calculations
- **Interest Saved**:
$$\text{Interest Saved} = \sum Interest_{\text{baseline}} - \sum Interest_{\text{active}}$$
- **Tenure Saved**:
$$\text{Tenure Saved} = Tenure_{\text{baseline}} - Tenure_{\text{active}} \quad (\text{months})$$

---

## Prepayment Modes Supported

1. **Monthly Prepayment**: An extra fixed amount added to the principal repayment every month.
2. **Annual Prepayment**: An extra lump sum paid at the end of each year (every 12th month).
3. **One-Time Prepayment**: A single lump sum payment credited at a specific month/year.

---

## Standalone Execution

1. Clone or download this directory.
2. Open `index.html` in any modern web browser to launch.
3. No server or internet connection required.
239 changes: 239 additions & 0 deletions Projects/EMI Loan Planner/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EMI Loan Planner - Dynamic Amortization Workspace</title>
<!-- Google Fonts: Inter & Outfit -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container">
<!-- Header Command Block -->
<header class="dashboard-header">
<div class="header-logo-title">
<div class="loan-logo">
<svg viewBox="0 0 100 100" class="logo-svg">
<circle cx="50" cy="50" r="45" fill="none" stroke="var(--color-primary)" stroke-width="4"/>
<path d="M 30 65 L 45 40 L 55 50 L 70 25" fill="none" stroke="var(--color-primary)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- scales balance symbol -->
<line x1="25" y1="70" x2="75" y2="70" stroke="var(--color-accent)" stroke-width="3"/>
<line x1="50" y1="50" x2="50" y2="70" stroke="var(--color-text-secondary)" stroke-width="2"/>
</svg>
</div>
<div class="title-meta">
<h1>EMI LOAN PLANNER <span class="pro-badge">PRO</span></h1>
<p class="subtitle">AMORTIZATION SCHEDULER & PREPAYMENT SAVINGS ENGINE</p>
</div>
</div>

<!-- Preset Selector -->
<div class="preset-selector">
<label for="presetSelect">LOAN CATEGORY</label>
<select id="presetSelect" class="styled-select">
<option value="home">Home Mortgage (30Y, 6.5%)</option>
<option value="car">Auto Loan (5Y, 5.0%)</option>
<option value="student">Student Education (10Y, 4.5%)</option>
<option value="personal">Personal Loan (3Y, 12.0%)</option>
<option value="custom" selected>Custom Parameters</option>
</select>
</div>
</header>

<div class="dashboard-grid">
<!-- Left Panel: Input Sliders -->
<aside class="panel parameter-deck">
<div class="panel-header">
<h2>LOAN PARAMETERS</h2>
</div>

<div class="scrollable-content">
<!-- Core Parameters -->
<section class="control-group">
<h3><span class="group-icon">💵</span> CORE LOAN DETAILS</h3>

<div class="slider-wrapper">
<div class="slider-labels">
<label for="inputLoanAmount">Loan Amount (Principal)</label>
<div class="input-val-container">
<span>$</span>
<input type="number" id="boxLoanAmount" class="num-box" min="1000" max="10000000" value="250000">
</div>
</div>
<input type="range" id="inputLoanAmount" min="5000" max="1000000" step="5000" value="250000">
<span class="slider-description">Total borrowing amount (principal).</span>
</div>

<div class="slider-wrapper">
<div class="slider-labels">
<label for="inputInterestRate">Interest Rate (p.a.)</label>
<div class="input-val-container">
<input type="number" id="boxInterestRate" class="num-box" min="0.5" max="30" step="0.05" value="6.5">
<span>%</span>
</div>
</div>
<input type="range" id="inputInterestRate" min="1.0" max="20.0" step="0.05" value="6.5">
<span class="slider-description">Annual compounding rate percentage.</span>
</div>

<div class="slider-wrapper">
<div class="slider-labels">
<label for="inputTenure">Tenure (Years)</label>
<div class="input-val-container">
<input type="number" id="boxTenure" class="num-box" min="1" max="40" value="30">
<span>Y</span>
</div>
</div>
<input type="range" id="inputTenure" min="1" max="40" step="1" value="30">
<span class="slider-description">Loan duration in years.</span>
</div>
</section>

<!-- Prepayment Parameters -->
<section class="control-group">
<h3><span class="group-icon">⏳</span> PREPAYMENT SAVINGS MODELER</h3>

<div class="slider-wrapper">
<div class="slider-labels">
<label for="inputMonthlyPrepay">Monthly Extra Payment</label>
<div class="input-val-container">
<span>$</span>
<input type="number" id="boxMonthlyPrepay" class="num-box" min="0" max="50000" value="0">
</div>
</div>
<input type="range" id="inputMonthlyPrepay" min="0" max="5000" step="50" value="0">
<span class="slider-description">Additional amount paid every single month.</span>
</div>

<div class="slider-wrapper">
<div class="slider-labels">
<label for="inputAnnualPrepay">Annual Extra Payment</label>
<div class="input-val-container">
<span>$</span>
<input type="number" id="boxAnnualPrepay" class="num-box" min="0" max="100000" value="0">
</div>
</div>
<input type="range" id="inputAnnualPrepay" min="0" max="20000" step="100" value="0">
<span class="slider-description">Additional lump sum paid at the end of each year.</span>
</div>

<div class="slider-wrapper">
<div class="slider-labels">
<label for="inputOnetimePrepay">One-Time Prepayment</label>
<div class="input-val-container">
<span>$</span>
<input type="number" id="boxOnetimePrepay" class="num-box" min="0" max="1000000" value="0">
</div>
</div>
<input type="range" id="inputOnetimePrepay" min="0" max="50000" step="250" value="0">
<span class="slider-description">A single one-off payment credited once.</span>
</div>

<div class="slider-wrapper">
<div class="slider-labels">
<label for="inputOnetimeMonth">One-Time Prepay Month</label>
<div class="input-val-container">
<input type="number" id="boxOnetimeMonth" class="num-box" min="1" max="480" value="12">
<span>M</span>
</div>
</div>
<input type="range" id="inputOnetimeMonth" min="1" max="120" step="1" value="12">
<span class="slider-description">Month index when the one-time prepayment is made.</span>
</div>
</section>
</div>
</aside>

<!-- Center & Right Panel: Graphs & KPI Telemetry -->
<main class="panel workspace-container">
<!-- Telemetry KPIs -->
<div class="telemetry-deck">
<div class="kpi-card">
<span class="kpi-label">MONTHLY EMI PAYMENT</span>
<span class="kpi-value primary" id="kpiEmi">$0</span>
<span class="kpi-sub" id="kpiBaseEmi">Baseline EMI: $0</span>
</div>
<div class="kpi-card">
<span class="kpi-label">TOTAL INTEREST PAYABLE</span>
<span class="kpi-value interest" id="kpiInterest">$0</span>
<span class="kpi-sub" id="kpiInterestPct">0% of total payment</span>
</div>
<div class="kpi-card">
<span class="kpi-label">TOTAL INTEREST SAVED</span>
<span class="kpi-value savings" id="kpiSavedInterest">$0</span>
<span class="kpi-sub" id="kpiPrepaymentTotal">Total Prepayments: $0</span>
</div>
<div class="kpi-card">
<span class="kpi-label">TENURE TIME SAVED</span>
<span class="kpi-value tenure" id="kpiSavedTenure">0 Months</span>
<span class="kpi-sub" id="kpiActiveTenure">Paid in 0 years</span>
</div>
</div>

<!-- Charts Workspace -->
<div class="visualization-workspace">
<div class="chart-container donut-section">
<h3>TOTAL LOAN COST DIVISION</h3>
<div class="canvas-wrapper">
<canvas id="donutChart" width="220" height="220"></canvas>
</div>
<div class="donut-legend">
<div class="legend-item principal"><span class="bullet"></span> Principal: <span id="legendPctPrincipal">0.0%</span></div>
<div class="legend-item interest"><span class="bullet"></span> Interest: <span id="legendPctInterest">0.0%</span></div>
<div class="legend-item prepay"><span class="bullet"></span> Prepayments: <span id="legendPctPrepay">0.0%</span></div>
</div>
</div>

<div class="chart-container area-section">
<h3>AMORTIZATION TIMELINE & BALANCE CURVE</h3>
<div class="canvas-wrapper">
<canvas id="areaChart" width="600" height="250"></canvas>
</div>
</div>
</div>
</main>
</div>

<!-- Bottom Panel: Projections Schedule Table -->
<section class="panel projections-container">
<div class="panel-header">
<h2>LOAN AMORTIZATION SCHEDULE</h2>
<div class="table-actions">
<div class="toggle-view-wrapper">
<span class="view-label">VIEW BY:</span>
<button id="viewAnnualBtn" class="toggle-view-btn active">YEARLY</button>
<button id="viewMonthlyBtn" class="toggle-view-btn">MONTHLY</button>
</div>
<button id="downloadCsvBtn" class="styled-btn" title="Download Full Month Amortization Projections as CSV">
<span class="icon">💾</span> DOWNLOAD LOAN LOG
</button>
</div>
</div>

<div class="table-wrapper">
<table id="projectionsTable">
<thead>
<tr>
<th id="colTimeHeader">Year</th>
<th>Starting Balance</th>
<th>EMI Paid</th>
<th>Prepayment</th>
<th>Principal Paid</th>
<th>Interest Paid</th>
<th>Ending Balance</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Dynamic rows -->
</tbody>
</table>
</div>
</section>
</div>

<script src="script.js"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions Projects/EMI Loan Planner/project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"title": "EMI Loan Planner",
"description": "A premium personal finance workspace to calculate EMI, simulate regular/one-time prepayments, track interest savings, and export amortization schedules.",
"entry": "index.html",
"tags": [
"finance",
"calculator",
"loan-planner",
"data-visualization",
"canvas"
],
"author": {
"name": "Sujal Kamate",
"github": "SujalKamate"
},
"thumbnail": "thumbnail.svg"
}
Loading
Loading