{"id":4628,"date":"2026-06-04T05:07:18","date_gmt":"2026-06-04T05:07:18","guid":{"rendered":"https:\/\/monksvision.com\/?page_id=4628"},"modified":"2026-06-04T06:28:24","modified_gmt":"2026-06-04T06:28:24","slug":"loan","status":"publish","type":"page","link":"https:\/\/monksvision.com\/?page_id=4628","title":{"rendered":"loan"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n&lt;<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@300;400;600;700;800&amp;family=DM+Sans:wght@300;400;500&amp;display=swap\" rel=\"stylesheet\">\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --blue: #1A6BFF;\n    --blue-light: #EBF1FF;\n    --gold: #F5A623;\n    --gold-light: #FFF7E6;\n    --pink: #E8206A;\n    --pink-light: #FDE8F1;\n    --bg: #F0F4FF;\n    --card: #FFFFFF;\n    --text: #0D1B3E;\n    --muted: #6B7A99;\n    --border: #D9E2F5;\n    --shadow: 0 8px 40px rgba(26,107,255,0.10);\n    --radius: 20px;\n    --radius-sm: 12px;\n  }\n\n  body {\n    font-family: 'DM Sans', sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    min-height: 100vh;\n    padding: 32px 16px;\n  }\n\n  .lc-wrap {\n    max-width: 900px;\n    margin: 0 auto;\n  }\n\n  \/* Header *\/\n  .lc-header {\n    text-align: center;\n    margin-bottom: 36px;\n  }\n  .lc-header h1 {\n    font-family: 'Sora', sans-serif;\n    font-size: clamp(1.6rem, 4vw, 2.4rem);\n    font-weight: 800;\n    color: var(--text);\n    letter-spacing: -0.5px;\n  }\n  .lc-header h1 span { color: var(--blue); }\n  .lc-header p {\n    margin-top: 8px;\n    color: var(--muted);\n    font-size: 0.92rem;\n    max-width: 480px;\n    margin-left: auto;\n    margin-right: auto;\n    line-height: 1.6;\n  }\n\n  \/* Main Card *\/\n  .lc-card {\n    background: var(--card);\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    padding: 36px;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 40px;\n    align-items: start;\n  }\n\n  \/* Left \u2013 Inputs *\/\n  .lc-inputs { display: flex; flex-direction: column; gap: 28px; }\n\n  .lc-field label {\n    display: block;\n    font-family: 'Sora', sans-serif;\n    font-size: 0.82rem;\n    font-weight: 600;\n    color: var(--muted);\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    margin-bottom: 10px;\n  }\n\n  .lc-input-box {\n    display: flex;\n    align-items: center;\n    border: 1.5px solid var(--border);\n    border-radius: var(--radius-sm);\n    padding: 12px 16px;\n    gap: 8px;\n    transition: border-color 0.2s;\n  }\n  .lc-input-box:focus-within { border-color: var(--blue); }\n  .lc-input-box .symbol {\n    font-family: 'Sora', sans-serif;\n    font-weight: 700;\n    font-size: 1rem;\n    color: var(--blue);\n  }\n  .lc-input-box input, .lc-input-box select {\n    flex: 1;\n    border: none;\n    outline: none;\n    font-family: 'Sora', sans-serif;\n    font-size: 1.05rem;\n    font-weight: 600;\n    color: var(--text);\n    background: transparent;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n  .lc-input-box select { cursor: pointer; }\n\n  \/* Range slider *\/\n  .lc-range { margin-top: 10px; position: relative; }\n  input[type=range] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 6px;\n    border-radius: 3px;\n    background: linear-gradient(to right, var(--blue) 0%, var(--blue) 50%, var(--border) 50%, var(--border) 100%);\n    outline: none;\n    cursor: pointer;\n  }\n  input[type=range]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    background: var(--blue);\n    box-shadow: 0 2px 8px rgba(26,107,255,0.35);\n    border: 3px solid #fff;\n    cursor: pointer;\n    transition: transform 0.15s;\n  }\n  input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }\n  input[type=range]::-moz-range-thumb {\n    width: 22px; height: 22px;\n    border-radius: 50%;\n    background: var(--blue);\n    box-shadow: 0 2px 8px rgba(26,107,255,0.35);\n    border: 3px solid #fff;\n    cursor: pointer;\n  }\n  .range-labels {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 6px;\n    font-size: 0.75rem;\n    color: var(--muted);\n  }\n\n  \/* Rate display *\/\n  .rate-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    background: var(--blue-light);\n    color: var(--blue);\n    font-family: 'Sora', sans-serif;\n    font-weight: 600;\n    font-size: 0.85rem;\n    border-radius: 8px;\n    padding: 6px 12px;\n    margin-top: 8px;\n  }\n\n  \/* EMI Result *\/\n  .emi-box {\n    background: linear-gradient(135deg, var(--blue) 0%, #3B8BFF 100%);\n    border-radius: var(--radius-sm);\n    padding: 22px 20px;\n    text-align: center;\n    color: #fff;\n  }\n  .emi-box .emi-label {\n    font-size: 0.8rem;\n    font-weight: 500;\n    opacity: 0.82;\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n  }\n  .emi-box .emi-amount {\n    font-family: 'Sora', sans-serif;\n    font-size: clamp(1.8rem, 4vw, 2.4rem);\n    font-weight: 800;\n    margin-top: 4px;\n    letter-spacing: -1px;\n  }\n  .emi-box .emi-sub {\n    font-size: 0.78rem;\n    opacity: 0.75;\n    margin-top: 3px;\n  }\n\n  \/* Right \u2013 Chart *\/\n  .lc-right { display: flex; flex-direction: column; gap: 24px; }\n\n  .chart-area {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n  canvas#donut { max-width: 240px; width: 100%; }\n  .chart-center {\n    position: absolute;\n    text-align: center;\n    pointer-events: none;\n  }\n  .chart-center .ct-label {\n    font-size: 0.72rem;\n    color: var(--muted);\n    font-weight: 500;\n    letter-spacing: 0.4px;\n    text-transform: uppercase;\n  }\n  .chart-center .ct-value {\n    font-family: 'Sora', sans-serif;\n    font-size: clamp(1.05rem, 2.5vw, 1.35rem);\n    font-weight: 800;\n    color: var(--text);\n    margin-top: 2px;\n  }\n\n  \/* Legend *\/\n  .legend { display: flex; flex-direction: column; gap: 10px; }\n  .legend-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: #F8FAFF;\n    border-radius: var(--radius-sm);\n    padding: 12px 14px;\n  }\n  .legend-left { display: flex; align-items: center; gap: 10px; }\n  .legend-dot {\n    width: 12px; height: 12px;\n    border-radius: 50%;\n    flex-shrink: 0;\n  }\n  .legend-name {\n    font-size: 0.83rem;\n    font-weight: 500;\n    color: var(--muted);\n  }\n  .legend-val {\n    font-family: 'Sora', sans-serif;\n    font-size: 0.92rem;\n    font-weight: 700;\n    color: var(--text);\n  }\n\n  \/* Amortization Table *\/\n  .lc-table-section {\n    margin-top: 28px;\n    background: var(--card);\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    padding: 28px;\n    overflow: hidden;\n  }\n  .lc-table-section h3 {\n    font-family: 'Sora', sans-serif;\n    font-size: 1rem;\n    font-weight: 700;\n    color: var(--text);\n    margin-bottom: 16px;\n  }\n  .table-wrap { overflow-x: auto; }\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 0.83rem;\n    min-width: 480px;\n  }\n  thead tr {\n    background: var(--blue);\n    color: #fff;\n  }\n  thead th {\n    padding: 10px 14px;\n    text-align: right;\n    font-family: 'Sora', sans-serif;\n    font-weight: 600;\n    font-size: 0.78rem;\n    letter-spacing: 0.3px;\n  }\n  thead th:first-child { text-align: center; border-radius: 8px 0 0 8px; }\n  thead th:last-child { border-radius: 0 8px 8px 0; }\n  tbody tr:nth-child(even) { background: #F8FAFF; }\n  tbody td {\n    padding: 9px 14px;\n    text-align: right;\n    color: var(--text);\n    border-bottom: 1px solid var(--border);\n  }\n  tbody td:first-child { text-align: center; font-weight: 600; color: var(--blue); }\n  tfoot td {\n    padding: 10px 14px;\n    text-align: right;\n    font-family: 'Sora', sans-serif;\n    font-weight: 700;\n    background: #EBF1FF;\n    color: var(--blue);\n    font-size: 0.85rem;\n  }\n  tfoot td:first-child { text-align: center; border-radius: 8px 0 0 8px; }\n  tfoot td:last-child { border-radius: 0 8px 8px 0; }\n\n  .show-more-btn {\n    display: block;\n    margin: 14px auto 0;\n    background: none;\n    border: 1.5px solid var(--blue);\n    color: var(--blue);\n    font-family: 'Sora', sans-serif;\n    font-weight: 600;\n    font-size: 0.82rem;\n    padding: 8px 24px;\n    border-radius: 50px;\n    cursor: pointer;\n    transition: background 0.2s, color 0.2s;\n  }\n  .show-more-btn:hover { background: var(--blue); color: #fff; }\n\n  \/* Disclaimer *\/\n  .lc-disclaimer {\n    text-align: center;\n    color: var(--muted);\n    font-size: 0.75rem;\n    margin-top: 20px;\n    line-height: 1.6;\n  }\n\n  \/* Responsive *\/\n  @media (max-width: 680px) {\n    .lc-card {\n      grid-template-columns: 1fr;\n      padding: 24px 18px;\n      gap: 28px;\n    }\n    .chart-area canvas#donut { max-width: 200px; }\n    .lc-table-section { padding: 20px 14px; }\n    body { padding: 20px 10px; }\n  }\n  @media (max-width: 400px) {\n    .lc-card { padding: 18px 12px; }\n    .emi-box { padding: 18px 14px; }\n  }\n<\/style>\n\n\n\n<div class=\"lc-wrap\">\n\n  <div class=\"lc-card\">\n\n    <!-- LEFT: Inputs -->\n    <div class=\"lc-inputs\">\n\n      <div class=\"lc-field\">\n        <label>Loan Amount<\/label>\n        <div class=\"lc-input-box\">\n          <span class=\"symbol\">\u20b9<\/span>\n          <input type=\"number\" id=\"amountInput\" value=\"500000\" min=\"10000\" max=\"10000000\" step=\"1000\">\n        <\/div>\n        <div class=\"lc-range\">\n          <input type=\"range\" id=\"amountSlider\" min=\"10000\" max=\"10000000\" step=\"1000\" value=\"500000\">\n          <div class=\"range-labels\"><span>\u20b910K<\/span><span>\u20b91Cr<\/span><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"lc-field\">\n        <label>Interest Rate (per annum)<\/label>\n        <div class=\"lc-input-box\">\n          <input type=\"number\" id=\"rateInput\" value=\"10.5\" min=\"1\" max=\"36\" step=\"0.1\">\n          <span class=\"symbol\">%<\/span>\n        <\/div>\n        <div class=\"lc-range\">\n          <input type=\"range\" id=\"rateSlider\" min=\"1\" max=\"36\" step=\"0.1\" value=\"10.5\">\n          <div class=\"range-labels\"><span>1%<\/span><span>36%<\/span><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"lc-field\">\n        <label>Loan Tenure<\/label>\n        <div class=\"lc-input-box\">\n          <select id=\"tenureSelect\">\n            <option value=\"6\">6 Months<\/option>\n            <option value=\"12\">12 Months (1 Year)<\/option>\n            <option value=\"18\">18 Months<\/option>\n            <option value=\"24\" selected=\"\">24 Months (2 Years)<\/option>\n            <option value=\"36\">36 Months (3 Years)<\/option>\n            <option value=\"48\">48 Months (4 Years)<\/option>\n            <option value=\"60\">60 Months (5 Years)<\/option>\n            <option value=\"72\">72 Months (6 Years)<\/option>\n            <option value=\"84\">84 Months (7 Years)<\/option>\n          <\/select>\n        <\/div>\n      <\/div>\n\n      <div class=\"emi-box\">\n        <div class=\"emi-label\">Monthly EMI<\/div>\n        <div class=\"emi-amount\" id=\"emiDisplay\">\u20b90<\/div>\n        <div class=\"emi-sub\">Per Month<\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- RIGHT: Chart & Legend -->\n    <div class=\"lc-right\">\n      <div class=\"chart-area\">\n        <canvas id=\"donut\" width=\"260\" height=\"260\"><\/canvas>\n        <div class=\"chart-center\">\n          <div class=\"ct-label\">In Total<\/div>\n          <div class=\"ct-value\" id=\"totalDisplay\">\u20b90<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"legend\">\n        <div class=\"legend-item\">\n          <div class=\"legend-left\">\n            <div class=\"legend-dot\" style=\"background:#1A6BFF\"><\/div>\n            <span class=\"legend-name\">Principal<\/span>\n          <\/div>\n          <span class=\"legend-val\" id=\"lgPrincipal\">\u20b90<\/span>\n        <\/div>\n        <div class=\"legend-item\">\n          <div class=\"legend-left\">\n            <div class=\"legend-dot\" style=\"background:#F5A623\"><\/div>\n            <span class=\"legend-name\">Processing Fee (est. 2%)<\/span>\n          <\/div>\n          <span class=\"legend-val\" id=\"lgFee\">\u20b90<\/span>\n        <\/div>\n        <div class=\"legend-item\">\n          <div class=\"legend-left\">\n            <div class=\"legend-dot\" style=\"background:#E8206A\"><\/div>\n            <span class=\"legend-name\">Total Interest<\/span>\n          <\/div>\n          <span class=\"legend-val\" id=\"lgInterest\">\u20b90<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- \/.lc-card -->\n\n  <!-- Amortization Table -->\n  <div class=\"lc-table-section\">\n    <h3>\ud83d\udccb Amortization Schedule<\/h3>\n    <div class=\"table-wrap\">\n      <table id=\"amorTable\">\n        <thead>\n          <tr>\n            <th>#<\/th>\n            <th>EMI (\u20b9)<\/th>\n            <th>Principal (\u20b9)<\/th>\n            <th>Interest (\u20b9)<\/th>\n            <th>Balance (\u20b9)<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody id=\"amorBody\"><\/tbody>\n        <tfoot id=\"amorFoot\"><\/tfoot>\n      <\/table>\n    <\/div>\n    <button class=\"show-more-btn\" id=\"toggleBtn\">Show All Months<\/button>\n  <\/div>\n\n  <p class=\"lc-disclaimer\">* This calculator provides an estimate only. Actual EMI may vary based on lender policies, processing fees, GST, and other charges. Please consult your lender for exact figures.<\/p>\n\n<\/div><!-- \/.lc-wrap -->\n\n<script>\n\/\/ \u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst fmt = v => '\u20b9' + Math.round(v).toLocaleString('en-IN');\n\nfunction calcEMI(P, annualRate, months) {\n  if (annualRate === 0) return P \/ months;\n  const r = annualRate \/ 12 \/ 100;\n  return P * r * Math.pow(1 + r, months) \/ (Math.pow(1 + r, months) - 1);\n}\n\n\/\/ \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet showAll = false;\n\n\/\/ \u2500\u2500 DOM refs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst amountInput  = document.getElementById('amountInput');\nconst amountSlider = document.getElementById('amountSlider');\nconst rateInput    = document.getElementById('rateInput');\nconst rateSlider   = document.getElementById('rateSlider');\nconst tenureSelect = document.getElementById('tenureSelect');\nconst emiDisplay   = document.getElementById('emiDisplay');\nconst totalDisplay = document.getElementById('totalDisplay');\nconst lgPrincipal  = document.getElementById('lgPrincipal');\nconst lgFee        = document.getElementById('lgFee');\nconst lgInterest   = document.getElementById('lgInterest');\nconst amorBody     = document.getElementById('amorBody');\nconst amorFoot     = document.getElementById('amorFoot');\nconst toggleBtn    = document.getElementById('toggleBtn');\nconst canvas       = document.getElementById('donut');\nconst ctx          = canvas.getContext('2d');\n\n\/\/ \u2500\u2500 Sync sliders \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\namountInput.addEventListener('input', () => { amountSlider.value = amountInput.value; updateSliderBg(amountSlider); calculate(); });\namountSlider.addEventListener('input', () => { amountInput.value = amountSlider.value; updateSliderBg(amountSlider); calculate(); });\nrateInput.addEventListener('input', () => { rateSlider.value = rateInput.value; updateSliderBg(rateSlider); calculate(); });\nrateSlider.addEventListener('input', () => { rateInput.value = rateSlider.value; updateSliderBg(rateSlider); calculate(); });\ntenureSelect.addEventListener('change', calculate);\n\nfunction updateSliderBg(slider) {\n  const min = +slider.min, max = +slider.max, val = +slider.value;\n  const pct = ((val - min) \/ (max - min)) * 100;\n  slider.style.background = `linear-gradient(to right, #1A6BFF 0%, #1A6BFF ${pct}%, #D9E2F5 ${pct}%, #D9E2F5 100%)`;\n}\n\n\/\/ \u2500\u2500 Donut Chart \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction drawDonut(principal, fee, interest) {\n  const dpr = window.devicePixelRatio || 1;\n  const size = canvas.offsetWidth || 240;\n  canvas.width  = size * dpr;\n  canvas.height = size * dpr;\n  ctx.scale(dpr, dpr);\n\n  const W = size, H = size;\n  const cx = W \/ 2, cy = H \/ 2;\n  const outerR = W * 0.44, innerR = W * 0.30;\n\n  const total = principal + fee + interest;\n  const segments = [\n    { val: principal, color: '#1A6BFF' },\n    { val: fee,       color: '#F5A623' },\n    { val: interest,  color: '#E8206A' },\n  ];\n\n  ctx.clearRect(0, 0, W, H);\n  let startAngle = -Math.PI \/ 2;\n  const gap = 0.025;\n\n  segments.forEach(seg => {\n    if (seg.val <= 0) return;\n    const slice = (seg.val \/ total) * (2 * Math.PI) - gap;\n    ctx.beginPath();\n    ctx.moveTo(cx, cy);\n    ctx.arc(cx, cy, outerR, startAngle, startAngle + slice);\n    ctx.arc(cx, cy, innerR, startAngle + slice, startAngle, true);\n    ctx.closePath();\n    ctx.fillStyle = seg.color;\n    ctx.shadowColor = seg.color + '55';\n    ctx.shadowBlur = 10;\n    ctx.fill();\n    ctx.shadowBlur = 0;\n    startAngle += slice + gap;\n  });\n}\n\n\/\/ \u2500\u2500 Main Calculate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction calculate() {\n  const P       = Math.max(0, +amountInput.value  || 0);\n  const rate    = Math.max(0, +rateInput.value     || 0);\n  const months  = Math.max(1, +tenureSelect.value  || 12);\n  const fee     = P * 0.02;\n  const emi     = calcEMI(P, rate, months);\n  const totalPay = emi * months;\n  const totalInterest = totalPay - P;\n  const grandTotal = totalPay + fee;\n\n  emiDisplay.textContent   = fmt(emi);\n  totalDisplay.textContent = fmt(grandTotal);\n  lgPrincipal.textContent  = fmt(P);\n  lgFee.textContent        = fmt(fee);\n  lgInterest.textContent   = fmt(totalInterest);\n\n  drawDonut(P, fee, totalInterest);\n  buildTable(P, rate, months, emi);\n}\n\n\/\/ \u2500\u2500 Amortization Table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction buildTable(P, annualRate, months, emi) {\n  const r = annualRate \/ 12 \/ 100;\n  let balance = P;\n  let sumPrin = 0, sumInt = 0, sumEmi = 0;\n  const rows = [];\n\n  for (let m = 1; m <= months; m++) {\n    const intPart  = balance * r;\n    const prinPart = emi - intPart;\n    balance = Math.max(0, balance - prinPart);\n    sumPrin += prinPart; sumInt += intPart; sumEmi += emi;\n    rows.push({ m, emi, prinPart, intPart, balance });\n  }\n\n  const maxRows = showAll ? rows.length : 6;\n  amorBody.innerHTML = rows.slice(0, maxRows).map(r =>\n    `<tr>\n      <td>${r.m}<\/td>\n      <td>${Math.round(r.emi).toLocaleString('en-IN')}<\/td>\n      <td>${Math.round(r.prinPart).toLocaleString('en-IN')}<\/td>\n      <td>${Math.round(r.intPart).toLocaleString('en-IN')}<\/td>\n      <td>${Math.round(r.balance).toLocaleString('en-IN')}<\/td>\n    <\/tr>`).join('');\n\n  amorFoot.innerHTML = `<tr>\n    <td>Total<\/td>\n    <td>${Math.round(sumEmi).toLocaleString('en-IN')}<\/td>\n    <td>${Math.round(sumPrin).toLocaleString('en-IN')}<\/td>\n    <td>${Math.round(sumInt).toLocaleString('en-IN')}<\/td>\n    <td>0<\/td>\n  <\/tr>`;\n\n  toggleBtn.style.display = months <= 6 ? 'none' : 'block';\n  toggleBtn.textContent = showAll ? 'Show Less' : `Show All ${months} Months`;\n}\n\ntoggleBtn.addEventListener('click', () => {\n  showAll = !showAll;\n  calculate();\n  if (showAll) toggleBtn.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n});\n\n\/\/ \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n[amountSlider, rateSlider].forEach(updateSliderBg);\nwindow.addEventListener('resize', calculate);\ncalculate();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>&lt; Loan Amount \u20b9 \u20b910K\u20b91Cr Interest Rate (per annum) % 1%36% Loan Tenure 6 Months12 Months (1 Year)18 Months24 Months (2 Years)36 Months (3 Years)48 Months (4 Years)60 Months (5 Years)72 Months (6 Years)84 Months (7 Years) Monthly EMI \u20b90 Per Month In Total \u20b90 Principal \u20b90 Processing Fee (est. 2%) \u20b90 Total Interest \u20b90 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-4628","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/monksvision.com\/index.php?rest_route=\/wp\/v2\/pages\/4628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monksvision.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/monksvision.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/monksvision.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monksvision.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4628"}],"version-history":[{"count":2,"href":"https:\/\/monksvision.com\/index.php?rest_route=\/wp\/v2\/pages\/4628\/revisions"}],"predecessor-version":[{"id":4633,"href":"https:\/\/monksvision.com\/index.php?rest_route=\/wp\/v2\/pages\/4628\/revisions\/4633"}],"wp:attachment":[{"href":"https:\/\/monksvision.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}