{"id":76,"date":"2026-06-25T08:32:45","date_gmt":"2026-06-25T08:32:45","guid":{"rendered":"https:\/\/toolskit.site\/index.php\/emi-loan-calculator\/"},"modified":"2026-06-25T08:32:45","modified_gmt":"2026-06-25T08:32:45","slug":"emi-loan-calculator","status":"publish","type":"page","link":"https:\/\/toolskit.site\/index.php\/emi-loan-calculator\/","title":{"rendered":"EMI \/ Loan Calculator"},"content":{"rendered":"<div class=\"hth-single-tool-shell\" style=\"--hth-color:#b026ff\">\n<div id=\"emi-wrapper\">\n<style>\n    #emi-wrapper { width: 100%; max-width: 1200px; box-sizing: border-box; margin: 0 auto; overflow: hidden; isolation: isolate; position: relative; }\n    #emi-wrapper * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n    #emi-wrapper { background: radial-gradient(circle at 30% 70%, #1a1a2e 0%, #0f0f1a 40%, #05050a 100%); color: #e0e0e0; padding: 24px; border-radius: 16px; border: 1px solid rgba(176, 38, 255, 0.15); box-shadow: 0 0 30px rgba(176, 38, 255, 0.05), inset 0 0 60px rgba(0,0,0,0.3); }\n    #emi-wrapper::before { content: \"\"; position: absolute; top: 50%; left: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%); background: conic-gradient(from 180deg, transparent, rgba(176, 38, 255, 0.04), transparent, rgba(255, 0, 128, 0.04), transparent); animation: emi-rotate 20s linear infinite; z-index: 0; pointer-events: none; will-change: transform; }\n    @keyframes emi-rotate { 100% { transform: translate(-50%, -50%) rotate(360deg); } }\n    #emi-wrapper .emi-content { position: relative; z-index: 1; }\n    #emi-wrapper .emi-header { text-align: center; margin-bottom: 24px; }\n    #emi-wrapper .emi-title { font-size: 28px; font-weight: 800; background: linear-gradient(90deg, #b026ff, #ff0080); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }\n    #emi-wrapper .emi-subtitle { color: #888; font-size: 14px; }\n    #emi-wrapper .emi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n    @media (max-width: 900px) { #emi-wrapper .emi-grid { grid-template-columns: 1fr; } }\n    #emi-wrapper .emi-panel { background: #0a0a12; border: 1px solid #222; border-radius: 12px; padding: 20px; }\n    #emi-wrapper .emi-panel-title { font-size: 16px; color: #b026ff; margin-bottom: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }\n    #emi-wrapper .emi-field { margin-bottom: 20px; }\n    #emi-wrapper .emi-label { display: flex; justify-content: space-between; font-size: 13px; color: #aaa; margin-bottom: 8px; font-weight: 600; }\n    #emi-wrapper .emi-label span { color: #ff0080; font-weight: 700; }\n    #emi-wrapper .emi-range { width: 100%; accent-color: #b026ff; margin-bottom: 8px; }\n    #emi-wrapper .emi-input { width: 100%; background: #12121a; border: 1px solid #333; border-radius: 8px; padding: 10px 14px; color: #fff; font-size: 14px; outline: none; transition: border-color 0.3s; }\n    #emi-wrapper .emi-input:focus { border-color: #b026ff; }\n    #emi-wrapper .emi-toggle { display: flex; background: #12121a; border-radius: 8px; overflow: hidden; border: 1px solid #333; margin-top: 8px; }\n    #emi-wrapper .emi-toggle-btn { flex: 1; padding: 8px; background: transparent; border: none; color: #888; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }\n    #emi-wrapper .emi-toggle-btn.active { background: linear-gradient(135deg, #b026ff, #ff0080); color: #fff; }\n    #emi-wrapper .emi-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }\n    #emi-wrapper .emi-sum-card { background: #12121a; border: 1px solid #2a2a35; border-radius: 10px; padding: 16px; text-align: center; }\n    #emi-wrapper .emi-sum-val { font-size: 20px; font-weight: 800; color: #ff0080; margin-bottom: 4px; }\n    #emi-wrapper .emi-sum-val.principal { color: #00f5ff; }\n    #emi-wrapper .emi-sum-label { font-size: 11px; color: #888; text-transform: uppercase; }\n    #emi-wrapper .emi-chart-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }\n    #emi-wrapper .emi-chart { width: 160px; height: 160px; border-radius: 50%; background: conic-gradient(#00f5ff 0% var(--p-principal), #ff0080 var(--p-principal) 100%); position: relative; }\n    #emi-wrapper .emi-chart-inner { position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; background: #0a0a12; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #888; text-align: center; }\n    #emi-wrapper .emi-legend { display: flex; flex-direction: column; gap: 10px; }\n    #emi-wrapper .emi-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ccc; }\n    #emi-wrapper .emi-legend-dot { width: 12px; height: 12px; border-radius: 3px; }\n    #emi-wrapper .emi-table-wrap { max-height: 300px; overflow-y: auto; border: 1px solid #222; border-radius: 8px; margin-top: 20px; }\n    #emi-wrapper .emi-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n    #emi-wrapper .emi-table th { background: #12121a; padding: 10px; text-align: left; color: #888; font-weight: 600; position: sticky; top: 0; z-index: 1; }\n    #emi-wrapper .emi-table td { padding: 10px; border-bottom: 1px solid #1a1a24; color: #ccc; }\n    #emi-wrapper .emi-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: center; }\n    #emi-wrapper .emi-btn { padding: 10px 18px; border-radius: 8px; border: 1px solid #333; background: #12121a; color: #ccc; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }\n    #emi-wrapper .emi-btn:hover { background: #1a1a2e; border-color: #b026ff; color: #b026ff; transform: translateY(-2px); }\n    #emi-wrapper .emi-btn-primary { background: linear-gradient(135deg, #b026ff22, #ff008022); border-color: #b026ff55; color: #b026ff; }\n    #emi-wrapper .emi-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: #b026ff; color: #fff; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: 14px; z-index: 9999; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; }\n    #emi-wrapper .emi-toast.show { transform: translateX(-50%) translateY(0); }\n    @media (max-width: 600px) { #emi-wrapper { padding: 16px; } #emi-wrapper .emi-title { font-size: 22px; } #emi-wrapper .emi-chart { width: 120px; height: 120px; } }\n  <\/style>\n<div class=\"emi-content\">\n<div class=\"emi-header\">\n<h2 class=\"emi-title\">&#x1F4B0; EMI \/ Loan Calculator<\/h2>\n<p class=\"emi-subtitle\">Calculate EMIs, view amortization schedules, and see interest breakup visually.<\/p>\n<\/p><\/div>\n<div class=\"emi-grid\">\n<div class=\"emi-panel\">\n<div class=\"emi-panel-title\">&#x2699; Loan Details<\/div>\n<div class=\"emi-field\">\n<div class=\"emi-label\">Principal Amount <span id=\"emi-p-val\">10,00,000<\/span><\/div>\n<p>          <input type=\"range\" class=\"emi-range\" id=\"emi-p\" min=\"100000\" max=\"100000000\" step=\"100000\" value=\"1000000\"><br \/>\n          <input type=\"number\" class=\"emi-input\" id=\"emi-p-inp\" value=\"1000000\">\n        <\/div>\n<div class=\"emi-field\">\n<div class=\"emi-label\">Interest Rate (% p.a.) <span id=\"emi-r-val\">8.5<\/span><\/div>\n<p>          <input type=\"range\" class=\"emi-range\" id=\"emi-r\" min=\"1\" max=\"30\" step=\"0.1\" value=\"8.5\"><br \/>\n          <input type=\"number\" class=\"emi-input\" id=\"emi-r-inp\" value=\"8.5\" step=\"0.1\">\n        <\/div>\n<div class=\"emi-field\">\n<div class=\"emi-label\">Tenure <span id=\"emi-t-val\">20 Years<\/span><\/div>\n<p>          <input type=\"range\" class=\"emi-range\" id=\"emi-t\" min=\"1\" max=\"30\" step=\"1\" value=\"20\"><\/p>\n<div class=\"emi-toggle\">\n            <button class=\"emi-toggle-btn active\" data-unit=\"years\">Years<\/button><br \/>\n            <button class=\"emi-toggle-btn\" data-unit=\"months\">Months<\/button>\n          <\/div>\n<\/p><\/div>\n<div class=\"emi-field\">\n<div class=\"emi-label\">Extra Prepayment (Monthly) <span id=\"emi-e-val\">0<\/span><\/div>\n<p>          <input type=\"range\" class=\"emi-range\" id=\"emi-e\" min=\"0\" max=\"100000\" step=\"1000\" value=\"0\"><br \/>\n          <input type=\"number\" class=\"emi-input\" id=\"emi-e-inp\" value=\"0\">\n        <\/div>\n<\/p><\/div>\n<div class=\"emi-panel\">\n<div class=\"emi-panel-title\">&#x1F4CA; Payment Summary<\/div>\n<div class=\"emi-summary\">\n<div class=\"emi-sum-card\">\n<div class=\"emi-sum-val\" id=\"emi-emi\">0<\/div>\n<div class=\"emi-sum-label\">Monthly EMI<\/div>\n<\/div>\n<div class=\"emi-sum-card\">\n<div class=\"emi-sum-val\" id=\"emi-total\">0<\/div>\n<div class=\"emi-sum-label\">Total Payment<\/div>\n<\/div>\n<div class=\"emi-sum-card\">\n<div class=\"emi-sum-val principal\" id=\"emi-princ\">0<\/div>\n<div class=\"emi-sum-label\">Principal<\/div>\n<\/div>\n<div class=\"emi-sum-card\">\n<div class=\"emi-sum-val\" id=\"emi-int\">0<\/div>\n<div class=\"emi-sum-label\">Total Interest<\/div>\n<\/div><\/div>\n<div class=\"emi-chart-wrap\">\n<div class=\"emi-chart\" id=\"emi-chart\">\n<div class=\"emi-chart-inner\" id=\"emi-chart-inner\">Ratio<\/div>\n<\/div>\n<div class=\"emi-legend\">\n<div class=\"emi-legend-item\">\n<div class=\"emi-legend-dot\" style=\"background:#00f5ff;\"><\/div>\n<p> Principal Amount<\/p><\/div>\n<div class=\"emi-legend-item\">\n<div class=\"emi-legend-dot\" style=\"background:#ff0080;\"><\/div>\n<p> Interest Amount<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"emi-panel-title\">&#x1F4C5; Yearly Amortization<\/div>\n<div class=\"emi-table-wrap\">\n<table class=\"emi-table\">\n<thead>\n<tr>\n<th>Year<\/th>\n<th>Principal<\/th>\n<th>Interest<\/th>\n<th>Balance<\/th>\n<\/tr>\n<\/thead>\n<tbody id=\"emi-tbody\"><\/tbody>\n<\/table><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"emi-actions\">\n      <button class=\"emi-btn emi-btn-primary\" id=\"emi-export\">&#x1F4BE; Export CSV<\/button>\n    <\/div>\n<\/p><\/div>\n<div class=\"emi-toast\" id=\"emi-toast\">Done!<\/div>\n<p>  <script>\n    (function() {\n      const $ = id => document.getElementById(id);\n      const p = $('emi-p'), pInp = $('emi-p-inp'), pVal = $('emi-p-val');\n      const r = $('emi-r'), rInp = $('emi-r-inp'), rVal = $('emi-r-val');\n      const t = $('emi-t'), tVal = $('emi-t-val');\n      const e = $('emi-e'), eInp = $('emi-e-inp'), eVal = $('emi-e-val');\n      const tBtns = document.querySelectorAll('.emi-toggle-btn');\n      const toast = $('emi-toast');\n      let unit = 'years';<\/p>\n<p>      function showToast(msg) { toast.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); }\n      function fmt(n) { return Math.round(n).toLocaleString('en-IN'); }<\/p>\n<p>      tBtns.forEach(btn => {\n        btn.addEventListener('click', () => {\n          tBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active');\n          unit = btn.dataset.unit;\n          if(unit === 'months') { t.max = 360; t.value = Math.min(360, t.value * 12); }\n          else { t.max = 30; t.value = Math.max(1, Math.round(t.value \/ 12)); }\n          calculate();\n        });\n      });<\/p>\n<p>      function syncInputs(range, inp, valEl, suffix = '') {\n        range.addEventListener('input', () => { inp.value = range.value; valEl.textContent = fmt(range.value) + suffix; calculate(); });\n        inp.addEventListener('input', () => { range.value = inp.value; valEl.textContent = fmt(inp.value) + suffix; calculate(); });\n      }\n      syncInputs(p, pInp, pVal);\n      syncInputs(r, rInp, rVal);\n      syncInputs(e, eInp, eVal);\n      t.addEventListener('input', () => { tVal.textContent = t.value + (unit === 'years' ? ' Years' : ' Months'); calculate(); });<\/p>\n<p>      function calculate() {\n        const P = parseFloat(p.value) || 0;\n        const R = (parseFloat(r.value) || 0) \/ 12 \/ 100;\n        const N = unit === 'years' ? (parseInt(t.value) || 0) * 12 : (parseInt(t.value) || 0);\n        const E_extra = parseFloat(e.value) || 0;<\/p>\n<p>        if(P <= 0 || N <= 0) return;\n\n        let emi = R === 0 ? P \/ N : (P * R * Math.pow(1 + R, N)) \/ (Math.pow(1 + R, N) - 1);\n        \n        let balance = P;\n        let totalInt = 0;\n        let totalPay = 0;\n        let schedule = [];\n        let yearPrinc = 0, yearInt = 0;\n        let month = 0;\n\n        while(balance > 0 && month < 600) { \n          month++;\n          let intPay = balance * R;\n          let princPay = emi - intPay + E_extra;\n          if(princPay > balance) { princPay = balance; intPay = balance * R; }<\/p>\n<p>          balance -= princPay;\n          if(balance < 0) balance = 0;\n          \n          totalInt += intPay;\n          totalPay += princPay + intPay;\n          yearPrinc += princPay;\n          yearInt += intPay;\n\n          if(month % 12 === 0 || balance === 0) {\n            schedule.push({ year: Math.ceil(month \/ 12), princ: yearPrinc, int: yearInt, bal: balance });\n            yearPrinc = 0; yearInt = 0;\n          }\n        }\n\n        $('emi-emi').textContent = fmt(emi);\n        $('emi-total').textContent = fmt(totalPay);\n        $('emi-princ').textContent = fmt(P);\n        $('emi-int').textContent = fmt(totalInt);\n\n        const pPerc = (P \/ totalPay) * 100;\n        $('emi-chart').style.setProperty('--p-principal', pPerc + '%');\n        $('emi-chart-inner').textContent = `${Math.round(pPerc)}% \/ ${Math.round(100-pPerc)}%`;\n\n        const tbody = $('emi-tbody');\n        tbody.innerHTML = '';\n        schedule.forEach(s => {\n          const tr = document.createElement('tr');\n          tr.innerHTML = `<\/p>\n<td>${s.year}<\/td>\n<td>${fmt(s.princ)}<\/td>\n<td>${fmt(s.int)}<\/td>\n<td>${fmt(s.bal)}<\/td>\n<p>`;\n          tbody.appendChild(tr);\n        });<\/p>\n<p>        window.emiSchedule = schedule;\n      }<\/p>\n<p>      $('emi-export').addEventListener('click', () => {\n        if(!window.emiSchedule) return;\n        let csv = 'Year,Principal,Interest,Balancen';\n        window.emiSchedule.forEach(s => csv += `${s.year},${Math.round(s.princ)},${Math.round(s.int)},${Math.round(s.bal)}n`);\n        const blob = new Blob([csv], { type: 'text\/csv' });\n        const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'emi-schedule.csv'; a.click();\n        showToast('Exported! u{2705}');\n      });<\/p>\n<p>      calculate();\n    })();\n  <\/script>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Calculate EMIs, view amortization schedules, and see interest breakup visually.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-76","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":0,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/76\/revisions"}],"wp:attachment":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/media?parent=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}