June 21, 2026

EMI Calculator

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Home Loan EMI Calculator – Varadhi Properties</title>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link href=”https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Inter:wght@400;500;600&display=swap” rel=”stylesheet”>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
–green: #1B4D35;
–green-mid: #2E7D52;
–green-light: #E8F2EC;
–gold: #C9A84C;
–gold-light: #FDF6E3;
–text: #1A1A1A;
–text-muted: #6B7280;
–bg: #FFFFFF;
–surface: #F8FAF9;
–border: #E2EAE6;
–radius: 12px;
}

body {
font-family: ‘Inter’, sans-serif;
background: var(–bg);
color: var(–text);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 1rem 3rem;
}

/* Header */
.header {
text-align: center;
margin-bottom: 2.5rem;
max-width: 560px;
}
.brand-tag {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(–gold);
border: 1px solid var(–gold);
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 1rem;
}
.header h1 {
font-family: ‘Playfair Display’, serif;
font-size: clamp(1.6rem, 4vw, 2.2rem);
font-weight: 600;
color: var(–green);
line-height: 1.2;
margin-bottom: .5rem;
}
.header p {
font-size: 14px;
color: var(–text-muted);
line-height: 1.6;
}

/* Main card */
.calc-card {
background: var(–bg);
border: 1px solid var(–border);
border-radius: 20px;
width: 100%;
max-width: 780px;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
box-shadow: 0 4px 24px rgba(27,77,53,.07);
}

/* Left: inputs */
.inputs-panel {
padding: 2rem;
border-right: 1px solid var(–border);
}
.inputs-panel h2 {
font-size: 13px;
font-weight: 600;
color: var(–green);
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 1.5rem;
}

.field { margin-bottom: 1.6rem; }
.field label {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13px;
color: var(–text-muted);
font-weight: 500;
margin-bottom: .5rem;
}
.field label span {
font-size: 14px;
font-weight: 600;
color: var(–green);
}

input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 3px;
background: var(–border);
outline: none;
cursor: pointer;
position: relative;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(–green);
border: 3px solid #fff;
box-shadow: 0 0 0 1px var(–green);
cursor: pointer;
transition: transform .15s;
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]::-moz-range-thumb {
width: 20px; height: 20px;
border-radius: 50%;
background: var(–green);
border: 3px solid #fff;
box-shadow: 0 0 0 1px var(–green);
cursor: pointer;
}

.range-ends {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(–text-muted);
margin-top: 4px;
}

.toggle-row {
display: flex;
gap: 6px;
margin-top: .5rem;
}
.toggle-btn {
flex: 1;
padding: 7px 0;
font-size: 12px;
font-weight: 500;
border: 1px solid var(–border);
border-radius: 8px;
background: var(–surface);
color: var(–text-muted);
cursor: pointer;
transition: all .15s;
text-align: center;
}
.toggle-btn.active {
background: var(–green);
border-color: var(–green);
color: #fff;
}

/* Right: results */
.results-panel {
padding: 2rem;
background: var(–surface);
display: flex;
flex-direction: column;
gap: 1rem;
}
.results-panel h2 {
font-size: 13px;
font-weight: 600;
color: var(–green);
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: .25rem;
}

/* EMI highlight */
.emi-box {
background: var(–green);
border-radius: var(–radius);
padding: 1.25rem 1.5rem;
color: #fff;
text-align: center;
}
.emi-box .emi-label {
font-size: 11px;
opacity: .75;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 4px;
}
.emi-box .emi-amount {
font-family: ‘Playfair Display’, serif;
font-size: clamp(1.7rem, 4vw, 2.2rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
}
.emi-box .emi-sub {
font-size: 11px;
opacity: .65;
margin-top: 4px;
}

/* Stat rows */
.stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: .75rem 1rem;
background: var(–bg);
border: 1px solid var(–border);
border-radius: 10px;
}
.stat-row .s-label { font-size: 13px; color: var(–text-muted); }
.stat-row .s-value { font-size: 14px; font-weight: 600; color: var(–text); }
.stat-row .s-value.interest { color: #C0392B; }
.stat-row .s-value.total { color: var(–green); }

/* Donut */
.donut-wrap {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
}
.donut-wrap svg { width: 120px; height: 120px; }
.donut-legend {
display: flex;
gap: 1rem;
font-size: 12px;
color: var(–text-muted);
}
.donut-legend span { display: flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(–green); }
.dot-gold { background: var(–gold); }

/* CTA */
.cta-section {
margin-top: .5rem;
background: var(–gold-light);
border: 1px solid #E8D8A0;
border-radius: var(–radius);
padding: 1rem 1.25rem;
text-align: center;
}
.cta-section p {
font-size: 12px;
color: #7A6020;
margin-bottom: .6rem;
line-height: 1.5;
}
.cta-btn {
display: inline-block;
background: var(–gold);
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 9px 20px;
border-radius: 8px;
text-decoration: none;
transition: background .15s;
border: none;
cursor: pointer;
}
.cta-btn:hover { background: #B8963E; }

/* Footer note */
.footer-note {
margin-top: 1.5rem;
font-size: 11px;
color: var(–text-muted);
text-align: center;
max-width: 560px;
line-height: 1.6;
}
.footer-brand {
margin-top: .75rem;
font-size: 12px;
color: var(–green);
font-weight: 500;
text-align: center;
}

/* Responsive */
@media (max-width: 620px) {
.calc-card {
grid-template-columns: 1fr;
}
.inputs-panel {
border-right: none;
border-bottom: 1px solid var(–border);
}
}
</style>
</head>
<body>

<div class=”header”>
<div class=”brand-tag”>Varadhi Properties</div>
<h1>Home Loan EMI Calculator</h1>
<p>Know your monthly payment before you visit. Adjust loan amount, interest rate, and tenure to plan your dream home budget.</p>
</div>

<!– LEFT: Inputs –>
<div class=”inputs-panel”>
<h2>Your loan details</h2>

<!– Loan Amount –>
<div class=”field”>
<label>Loan amount <span id=”lbl-amount”>₹60,00,000</span></label>
<input type=”range” id=”sl-amount” min=”1000000″ max=”50000000″ step=”500000″ value=”6000000″
oninput=”updateCalc()”>
<div class=”range-ends”><span>₹10 L</span><span>₹5 Cr</span></div>
</div>

<!– Interest Rate –>
<div class=”field”>
<label>Interest rate (p.a.) <span id=”lbl-rate”>8.5%</span></label>
<input type=”range” id=”sl-rate” min=”6″ max=”16″ step=”0.1″ value=”8.5″
oninput=”updateCalc()”>
<div class=”range-ends”><span>6%</span><span>16%</span></div>
</div>

<!– Tenure –>
<div class=”field”>
<label>Loan tenure <span id=”lbl-tenure”>20 years</span></label>
<input type=”range” id=”sl-tenure” min=”1″ max=”30″ step=”1″ value=”20″
oninput=”updateCalc()”>
<div class=”range-ends”><span>1 yr</span><span>30 yrs</span></div>

<!– Year / Month toggle –>
<div class=”toggle-row” style=”margin-top:.75rem”>
<div class=”toggle-btn active” id=”btn-yr” onclick=”setTenureMode(‘year’)”>Years</div>
<div class=”toggle-btn” id=”btn-mo” onclick=”setTenureMode(‘month’)”>Months</div>
</div>
</div>
</div>

<!– RIGHT: Results –>
<div class=”results-panel”>
<h2>Your EMI breakdown</h2>

<!– Monthly EMI hero –>
<div class=”emi-box”>
<div class=”emi-label”>Monthly EMI</div>
<div class=”emi-amount” id=”res-emi”>₹52,165</div>
<div class=”emi-sub”>per month for <span id=”res-months”>240</span> months</div>
</div>

<!– Stat rows –>
<div class=”stat-row”>
<span class=”s-label”>Principal amount</span>
<span class=”s-value” id=”res-principal”>₹60,00,000</span>
</div>
<div class=”stat-row”>
<span class=”s-label”>Total interest payable</span>
<span class=”s-value interest” id=”res-interest”>₹65,19,548</span>
</div>
<div class=”stat-row”>
<span class=”s-label”>Total amount payable</span>
<span class=”s-value total” id=”res-total”>₹1,25,19,548</span>
</div>

<!– Donut chart –>
<div class=”donut-wrap”>
<svg viewBox=”0 0 42 42″ id=”donut-svg”>
<circle cx=”21″ cy=”21″ r=”15.915″ fill=”transparent”
stroke=”#C9A84C” stroke-width=”6″
id=”donut-interest”/>
<circle cx=”21″ cy=”21″ r=”15.915″ fill=”transparent”
stroke=”#1B4D35″ stroke-width=”6″
stroke-dasharray=”50 50″
stroke-dashoffset=”25″
id=”donut-principal”
transform=”rotate(-90 21 21)”/>
</svg>
<div class=”donut-legend”>
<span><i class=”dot dot-green”></i>Principal</span>
<span><i class=”dot dot-gold”></i>Interest</span>
</div>
</div>

<!– CTA –>
<div class=”cta-section”>
<p>Ready to explore your dream home?<br>Our experts will guide you from EMI planning to key handover.</p>
<a class=”cta-btn” href=”https://wa.me/919848525218?text=Hi%2C%20I%20used%20the%20EMI%20calculator%20on%20your%20website%20and%20would%20like%20to%20know%20more%20about%20properties.” target=”_blank”>
Talk to Varadhi Experts
</a>
</div>
</div>
</div>

<p class=”footer-note”>
* EMI calculated using standard reducing balance method. Actual EMI may vary based on lender policies, processing fees, and GST. This calculator is for indicative purposes only.
</p>
<p class=”footer-brand”>Varadhi Properties Pvt. Ltd. · TGRERA: A02400003683 · +91 9848 525218</p>

function updateCalc() {
const amount = +document.getElementById(‘sl-amount’).value;
const annualRate = +document.getElementById(‘sl-rate’).value;
const tenureRaw = +document.getElementById(‘sl-tenure’).value;
const months = tenureMode === ‘year’ ? tenureRaw * 12 : tenureRaw;
const r = annualRate / 12 / 100;

// EMI formula
const emi = r === 0 ? amount / months
: (amount * r * Math.pow(1 + r, months)) / (Math.pow(1 + r, months) – 1);

const totalPayable = emi * months;
const totalInterest = totalPayable – amount;

// Labels
document.getElementById(‘lbl-amount’).textContent = amount >= 10000000
? ‘₹’ + (amount / 10000000).toFixed(2) + ‘ Cr’
: ‘₹’ + (amount / 100000).toFixed(0) + ‘ L’;
document.getElementById(‘lbl-rate’).textContent = annualRate.toFixed(1) + ‘%’;
document.getElementById(‘lbl-tenure’).textContent = tenureMode === ‘year’
? tenureRaw + (tenureRaw === 1 ? ‘ year’ : ‘ years’)
: tenureRaw + ‘ months’;

// Results
document.getElementById(‘res-emi’).textContent = INR(emi);
document.getElementById(‘res-months’).textContent = months;
document.getElementById(‘res-principal’).textContent = INR(amount);
document.getElementById(‘res-interest’).textContent = INR(totalInterest);
document.getElementById(‘res-total’).textContent = INR(totalPayable);

// Donut
const principalPct = Math.round((amount / totalPayable) * 100);
const interestPct = 100 – principalPct;
const circ = 100;
document.getElementById(‘donut-principal’).setAttribute(‘stroke-dasharray’, principalPct + ‘ ‘ + interestPct);
document.getElementById(‘donut-interest’).setAttribute(‘stroke-dasharray’, interestPct + ‘ ‘ + principalPct);
document.getElementById(‘donut-interest’).setAttribute(‘stroke-dashoffset’, 25 – principalPct);
}

updateCalc();
</script>
</body>
</html>

Blog

EMI Calculator

Leave a Comment