/* ========================================================= VJ CAPITAL FUNDING RESPONSIVE LOAN EMI CALCULATOR Desktop + Tablet + Mobile ========================================================= */ #vj-loan-emi-calculator { --vj-navy: #143d52; --vj-navy-dark: #103447; --vj-gold: #d2ad61; --vj-gold-dark: #bd964b; --vj-cream: #f7f5ef; --vj-text: #263f4c; --vj-muted: #77848b; --vj-white: #ffffff; width: 100%; max-width: 1100px; margin: 0 auto; font-family: "Nunito", Arial, sans-serif; font-size: 10px; box-sizing: border-box; } #vj-loan-emi-calculator *, #vj-loan-emi-calculator *::before, #vj-loan-emi-calculator *::after { box-sizing: border-box; } /* ========================================================= MAIN LAYOUT ========================================================= */ #vj-loan-emi-calculator .vj-emi-main { width: 100%; display: grid; grid-template-columns: 56% 44%; gap: 18px; align-items: center; } /* ========================================================= LEFT INPUT PANEL ========================================================= */ #vj-loan-emi-calculator .vj-emi-input-panel { width: 100%; min-height: 300px; background: linear-gradient( 145deg, #143d52, #103447 ); border-radius: 8px; padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; color: #ffffff; } /* ========================================================= EYEBROW ========================================================= */ #vj-loan-emi-calculator .vj-emi-eyebrow { font-size: 10px; line-height: 1; letter-spacing: 1.3px; font-weight: 700; color: #d9b96f; text-transform: uppercase; margin: 0 0 7px; } /* ========================================================= HEADING ========================================================= */ #vj-loan-emi-calculator .vj-emi-title { font-size: 20px; line-height: 1.2; font-weight: 700; color: #ffffff; margin: 0 0 8px; } /* ========================================================= DESCRIPTION - 12PX ========================================================= */ #vj-loan-emi-calculator .vj-emi-description { font-size: 12px; line-height: 1.5; font-weight: 400; color: #dce5e9; max-width: 400px; margin: 0 0 20px; } /* ========================================================= INPUT GRID ========================================================= */ #vj-loan-emi-calculator .vj-emi-fields { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ========================================================= FIELD ========================================================= */ #vj-loan-emi-calculator .vj-emi-field { width: 100%; min-width: 0; } /* ========================================================= LABEL - 10PX ========================================================= */ #vj-loan-emi-calculator .vj-emi-field label { display: block; width: 100%; font-size: 10px; line-height: 1.2; font-weight: 600; color: #ffffff; margin: 0 0 6px; } /* ========================================================= INPUT + SELECT SAME SIZE ========================================================= */ #vj-loan-emi-calculator .vj-emi-field input, #vj-loan-emi-calculator .vj-emi-field select { display: block; width: 100%; height: 40px; min-height: 40px; max-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 4px; background: #ffffff; color: #263c47; font-family: "Nunito", Arial, sans-serif; font-size: 10px; font-weight: 600; outline: none; margin: 0; -webkit-appearance: auto; appearance: auto; } /* ========================================================= FOCUS ========================================================= */ #vj-loan-emi-calculator .vj-emi-field input:focus, #vj-loan-emi-calculator .vj-emi-field select:focus { border-color: #d2ad61; box-shadow: 0 0 0 2px rgba(210,173,97,.18); } /* ========================================================= BUTTON WRAPPER ========================================================= */ #vj-loan-emi-calculator .vj-emi-button-wrap { width: 100%; } /* ========================================================= BUTTON ALIGNMENT LABEL ========================================================= */ #vj-loan-emi-calculator .vj-emi-button-label { display: block; height: 18px; margin: 0 0 6px; visibility: hidden; } /* ========================================================= CALCULATE BUTTON SAME HEIGHT AS INPUTS ========================================================= */ #vj-loan-emi-calculator .vj-emi-calculate { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; min-height: 40px; max-height: 40px; padding: 0 12px; border: none; border-radius: 4px; background: #d2ad61; color: #ffffff; font-family: "Nunito", Arial, sans-serif; font-size: 10px; font-weight: 700; cursor: pointer; margin: 0; -webkit-tap-highlight-color: transparent; transition: background .2s ease, transform .2s ease; } #vj-loan-emi-calculator .vj-emi-calculate:hover { background: #bd964b; } #vj-loan-emi-calculator .vj-emi-calculate:active { transform: scale(.99); } /* ========================================================= ERROR ========================================================= */ #vj-loan-emi-calculator .vj-emi-error { min-height: 15px; margin-top: 7px; color: #ffd4d4; font-size: 10px; line-height: 1.3; } /* ========================================================= RIGHT RESULT PANEL DESKTOP APPROX 80% HEIGHT ========================================================= */ #vj-loan-emi-calculator .vj-emi-result-panel { width: 100%; height: 80%; min-height: 240px; background: #f7f5ef; border-radius: 8px; padding: 9px; display: flex; align-items: center; } /* ========================================================= RESULT CARD ========================================================= */ #vj-loan-emi-calculator .vj-emi-result-card { width: 100%; height: 100%; background: #ffffff; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; } /* ========================================================= RESULT CONTENT ========================================================= */ #vj-loan-emi-calculator .vj-emi-result-content { flex: 1; width: 100%; display: grid; grid-template-columns: 43% 57%; align-items: center; padding: 20px 18px 12px; } /* ========================================================= CHART ========================================================= */ #vj-loan-emi-calculator .vj-emi-chart-area { width: 100%; display: flex; align-items: center; justify-content: center; } #vj-loan-emi-calculator .vj-emi-chart { width: 105px; height: 105px; min-width: 105px; border-radius: 50%; background: conic-gradient( #143d52 0% 75%, #d7c39b 75% 100% ); position: relative; } #vj-loan-emi-calculator .vj-emi-chart::after { content: ""; position: absolute; width: 59px; height: 59px; background: #ffffff; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* ========================================================= RESULT DETAILS ========================================================= */ #vj-loan-emi-calculator .vj-emi-result-details { width: 100%; min-width: 0; } /* ========================================================= RESULT LABEL - 10PX ========================================================= */ #vj-loan-emi-calculator .vj-emi-result-label { font-size: 10px; line-height: 1.3; color: #77848b; margin: 0 0 4px; } /* ========================================================= EMI VALUE ========================================================= */ #vj-loan-emi-calculator .vj-emi-amount { font-size: 22px; line-height: 1.1; font-weight: 800; color: #143d52; margin: 0 0 14px; } /* ========================================================= RESULT LIST ========================================================= */ #vj-loan-emi-calculator .vj-emi-result-list { display: flex; flex-direction: column; gap: 8px; width: 100%; } /* ========================================================= RESULT ROW ========================================================= */ #vj-loan-emi-calculator .vj-emi-result-row { width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; column-gap: 6px; } /* ========================================================= DOT ========================================================= */ #vj-loan-emi-calculator .vj-emi-dot { width: 7px; height: 7px; border-radius: 50%; background: #d6c29a; } #vj-loan-emi-calculator .vj-emi-dot.navy { background: #143d52; } /* ========================================================= RESULT TEXT - 10PX ========================================================= */ #vj-loan-emi-calculator .vj-emi-row-label { min-width: 0; font-size: 10px; line-height: 1.25; color: #718089; } #vj-loan-emi-calculator .vj-emi-row-value { font-size: 10px; line-height: 1.25; color: #304651; font-weight: 700; white-space: nowrap; } /* ========================================================= REPAYMENT BUTTON ========================================================= */ #vj-loan-emi-calculator .vj-emi-schedule-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; padding: 8px 12px; border: none; border-top: 1px solid #eeeeeb; background: #ffffff; color: #a17b36; font-family: "Nunito", Arial, sans-serif; font-size: 10px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ========================================================= MODAL ========================================================= */ #vj-loan-emi-calculator .vj-emi-modal { position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(9,31,42,.65); z-index: 999999; display: none; align-items: center; justify-content: center; padding: 20px; } #vj-loan-emi-calculator .vj-emi-modal.active { display: flex; } /* ========================================================= MODAL BOX ========================================================= */ #vj-loan-emi-calculator .vj-emi-modal-box { width: 100%; max-width: 900px; max-height: 90%; background: #ffffff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } /* ========================================================= MODAL HEADER ========================================================= */ #vj-loan-emi-calculator .vj-emi-modal-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 18px; background: #143d52; color: #ffffff; } #vj-loan-emi-calculator .vj-emi-modal-title { margin: 0; color: #ffffff; font-family: "Nunito", Arial, sans-serif; font-size: 16px; font-weight: 700; } #vj-loan-emi-calculator .vj-emi-modal-close { width: 40px; height: 40px; min-width: 40px; border: none; background: transparent; color: #ffffff; font-size: 26px; line-height: 1; cursor: pointer; } /* ========================================================= MODAL BODY ========================================================= */ #vj-loan-emi-calculator .vj-emi-modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px; } /* ========================================================= SUMMARY ========================================================= */ #vj-loan-emi-calculator .vj-emi-summary { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; } #vj-loan-emi-calculator .vj-emi-summary-item { background: #f7f5ef; border-radius: 6px; padding: 12px; } #vj-loan-emi-calculator .vj-emi-summary-label { display: block; font-size: 10px; color: #78858c; margin-bottom: 4px; } #vj-loan-emi-calculator .vj-emi-summary-value { font-size: 14px; color: #143d52; font-weight: 700; } /* ========================================================= REPAYMENT TABLE ========================================================= */ #vj-loan-emi-calculator .vj-emi-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } #vj-loan-emi-calculator .vj-emi-table { width: 100%; min-width: 600px; border-collapse: collapse; font-family: "Nunito", Arial, sans-serif; font-size: 10px; } #vj-loan-emi-calculator .vj-emi-table th { background: #143d52; color: #ffffff; padding: 9px 7px; font-size: 10px; font-weight: 700; text-align: right; } #vj-loan-emi-calculator .vj-emi-table th:first-child, #vj-loan-emi-calculator .vj-emi-table td:first-child { text-align: center; } #vj-loan-emi-calculator .vj-emi-table td { padding: 8px 7px; border-bottom: 1px solid #eeeeee; color: #43555e; text-align: right; font-size: 10px; } #vj-loan-emi-calculator .vj-emi-table tr:nth-child(even) td { background: #fafafa; } /* ========================================================= TABLET 768px - 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { #vj-loan-emi-calculator { max-width: 94%; } #vj-loan-emi-calculator .vj-emi-main { grid-template-columns: 55% 45%; gap: 14px; } #vj-loan-emi-calculator .vj-emi-input-panel { min-height: 290px; padding: 24px; } #vj-loan-emi-calculator .vj-emi-result-panel { height: 80%; min-height: 230px; padding: 8px; } #vj-loan-emi-calculator .vj-emi-result-content { padding: 18px 14px 12px; grid-template-columns: 42% 58%; } #vj-loan-emi-calculator .vj-emi-chart { width: 90px; height: 90px; min-width: 90px; } #vj-loan-emi-calculator .vj-emi-chart::after { width: 51px; height: 51px; } } /* ========================================================= MOBILE Up to 767px ========================================================= */ @media (max-width: 767px) { #vj-loan-emi-calculator { width: 100%; max-width: 100%; margin: 0; padding: 0; } /* ONE COLUMN */ #vj-loan-emi-calculator .vj-emi-main { width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; } /* INPUT PANEL */ #vj-loan-emi-calculator .vj-emi-input-panel { width: 100%; min-height: auto; padding: 24px 20px; border-radius: 8px; } /* HEADING */ #vj-loan-emi-calculator .vj-emi-title { font-size: 21px; } /* DESCRIPTION */ #vj-loan-emi-calculator .vj-emi-description { font-size: 12px; line-height: 1.5; max-width: 100%; margin-bottom: 18px; } /* INPUT GRID */ #vj-loan-emi-calculator .vj-emi-fields { grid-template-columns: 1fr 1fr; gap: 10px; } /* LABEL */ #vj-loan-emi-calculator .vj-emi-field label { font-size: 10px; margin-bottom: 6px; } /* INPUTS */ #vj-loan-emi-calculator .vj-emi-field input, #vj-loan-emi-calculator .vj-emi-field select, #vj-loan-emi-calculator .vj-emi-calculate { width: 100%; height: 44px; min-height: 44px; max-height: 44px; font-size: 10px; } /* RESULT PANEL */ #vj-loan-emi-calculator .vj-emi-result-panel { width: 100%; height: auto; min-height: 0; padding: 7px; border-radius: 8px; align-items: stretch; } /* RESULT CARD */ #vj-loan-emi-calculator .vj-emi-result-card { width: 100%; height: auto; min-height: 270px; } /* RESULT CONTENT */ #vj-loan-emi-calculator .vj-emi-result-content { width: 100%; grid-template-columns: 40% 60%; padding: 24px 14px 18px; gap: 5px; } /* CHART */ #vj-loan-emi-calculator .vj-emi-chart { width: 100px; height: 100px; min-width: 100px; } #vj-loan-emi-calculator .vj-emi-chart::after { width: 56px; height: 56px; } /* EMI */ #vj-loan-emi-calculator .vj-emi-amount { font-size: 22px; margin-bottom: 13px; } /* RESULT TEXT */ #vj-loan-emi-calculator .vj-emi-row-label, #vj-loan-emi-calculator .vj-emi-row-value { font-size: 10px; } /* REPAYMENT */ #vj-loan-emi-calculator .vj-emi-schedule-button { min-height: 44px; font-size: 10px; } /* MODAL */ #vj-loan-emi-calculator .vj-emi-modal { padding: 10px; align-items: center; } #vj-loan-emi-calculator .vj-emi-modal-box { width: 100%; max-height: 92%; } #vj-loan-emi-calculator .vj-emi-modal-body { padding: 12px; } /* SUMMARY */ #vj-loan-emi-calculator .vj-emi-summary { grid-template-columns: 1fr; gap: 8px; } } /* ========================================================= SMALL MOBILE Up to 480px ========================================================= */ @media (max-width: 480px) { #vj-loan-emi-calculator .vj-emi-input-panel { padding: 22px 16px; } #vj-loan-emi-calculator .vj-emi-fields { grid-template-columns: 1fr; } #vj-loan-emi-calculator .vj-emi-field input, #vj-loan-emi-calculator .vj-emi-field select, #vj-loan-emi-calculator .vj-emi-calculate { height: 44px; min-height: 44px; max-height: 44px; } #vj-loan-emi-calculator .vj-emi-result-content { grid-template-columns: 1fr; gap: 20px; text-align: center; padding: 25px 14px 18px; } #vj-loan-emi-calculator .vj-emi-chart-area { justify-content: center; } #vj-loan-emi-calculator .vj-emi-result-details { width: 100%; } #vj-loan-emi-calculator .vj-emi-result-list { width: 100%; max-width: 290px; margin: 0 auto; text-align: left; gap: 9px; } #vj-loan-emi-calculator .vj-emi-amount { font-size: 23px; } #vj-loan-emi-calculator .vj-emi-chart { width: 115px; height: 115px; min-width: 115px; } #vj-loan-emi-calculator .vj-emi-chart::after { width: 65px; height: 65px; } } /* ========================================================= VERY SMALL PHONES ========================================================= */ @media (max-width: 350px) { #vj-loan-emi-calculator .vj-emi-input-panel { padding: 20px 14px; } #vj-loan-emi-calculator .vj-emi-title { font-size: 19px; } #vj-loan-emi-calculator .vj-emi-description { font-size: 12px; } #vj-loan-emi-calculator .vj-emi-chart { width: 100px; height: 100px; min-width: 100px; } #vj-loan-emi-calculator .vj-emi-chart::after { width: 56px; height: 56px; } }
PLAN SMARTER

Loan EMI Calculator

Calculate your monthly EMI and plan your finances better with our easy-to-use calculator.

8% 9% 10% 11% 12% 13% 14% 15% 16% 18% 20%
1 Year 2 Years 3 Years 4 Years 5 Years 7 Years 10 Years 15 Years 20 Years 25 Years 30 Years
Calculate
Your Estimated EMI
₹11,122
Principal Amount ₹5,00,000
Total Interest ₹1,67,322
Total Repayment ₹6,67,322
(function () { "use strict"; /* ===================================================== GET ELEMENTS ===================================================== */ const calculator = document.getElementById( "vj-loan-emi-calculator" ); if (!calculator) { return; } const amount = calculator.querySelector( "#vj-loan-amount" ); const rate = calculator.querySelector( "#vj-interest-rate" ); const tenure = calculator.querySelector( "#vj-loan-tenure" ); const calculateButton = calculator.querySelector( "#vj-calculate-emi" ); const emiOutput = calculator.querySelector( "#vj-emi-value" ); const principalOutput = calculator.querySelector( "#vj-principal-value" ); const interestOutput = calculator.querySelector( "#vj-interest-value" ); const totalOutput = calculator.querySelector( "#vj-total-value" ); const chart = calculator.querySelector( "#vj-emi-chart" ); const error = calculator.querySelector( "#vj-emi-error" ); const modal = calculator.querySelector( "#vj-emi-modal" ); const openSchedule = calculator.querySelector( "#vj-open-schedule" ); const closeSchedule = calculator.querySelector( "#vj-close-schedule" ); const repaymentBody = calculator.querySelector( "#vj-repayment-body" ); const summaryLoan = calculator.querySelector( "#vj-summary-loan" ); const summaryRate = calculator.querySelector( "#vj-summary-rate" ); const summaryTenure = calculator.querySelector( "#vj-summary-tenure" ); /* ===================================================== FORMAT INDIAN RUPEES ===================================================== */ function money(value) { if (!Number.isFinite(value)) { return "₹0"; } return ( "₹" + Math.round(value) .toLocaleString("en-IN") ); } /* ===================================================== CALCULATE ===================================================== */ function calculate() { let principal = Number(amount.value); let annualRate = Number(rate.value); let years = Number(tenure.value); /* VALIDATE */ if ( !Number.isFinite(principal) || principal < 1000 ) { error.textContent = "Please enter a valid loan amount."; return; } if ( !Number.isFinite(annualRate) || annualRate < 0 ) { error.textContent = "Please select a valid interest rate."; return; } if ( !Number.isFinite(years) || years <= 0 ) { error.textContent = "Please select a valid loan tenure."; return; } error.textContent = ""; /* MONTHLY RATE */ const monthlyRate = annualRate / 12 / 100; /* MONTHS */ const months = Math.round(years * 12); /* EMI */ let emi; if (monthlyRate === 0) { emi = principal / months; } else { const factor = Math.pow( 1 + monthlyRate, months ); emi = principal * monthlyRate * factor / (factor - 1); } /* TOTAL */ const total = emi * months; const interest = total - principal; /* ================================================= DISPLAY ================================================= */ emiOutput.textContent = money(emi); principalOutput.textContent = money(principal); interestOutput.textContent = money(interest); totalOutput.textContent = money(total); /* ================================================= DONUT ================================================= */ let principalPercent = (principal / total) * 100; if (!Number.isFinite(principalPercent)) { principalPercent = 100; } principalPercent = Math.max( 0, Math.min( 100, principalPercent ) ); chart.style.background = "conic-gradient(" + "#143d52 0% " + principalPercent + "%, " + "#d7c39b " + principalPercent + "% 100%)"; /* ================================================= SUMMARY ================================================= */ summaryLoan.textContent = money(principal); summaryRate.textContent = annualRate + "%"; summaryTenure.textContent = years + ( years === 1 ? " Year" : " Years" ); /* ================================================= REPAYMENT SCHEDULE ================================================= */ createSchedule( principal, monthlyRate, months, emi ); } /* ===================================================== REPAYMENT SCHEDULE ===================================================== */ function createSchedule( principal, monthlyRate, months, emi ) { repaymentBody.innerHTML = ""; let balance = principal; for ( let month = 1; month balance ) { principalPaid = balance; emi = principalPaid + interest; } balance = balance - principalPaid; if ( balance < 0 ) { balance = 0; } const row = document.createElement( "tr" ); const monthCell = document.createElement( "td" ); monthCell.textContent = month; const emiCell = document.createElement( "td" ); emiCell.textContent = money(emi); const principalCell = document.createElement( "td" ); principalCell.textContent = money(principalPaid); const interestCell = document.createElement( "td" ); interestCell.textContent = money(interest); const balanceCell = document.createElement( "td" ); balanceCell.textContent = money(balance); row.appendChild( monthCell ); row.appendChild( emiCell ); row.appendChild( principalCell ); row.appendChild( interestCell ); row.appendChild( balanceCell ); repaymentBody.appendChild( row ); } } /* ===================================================== CALCULATE BUTTON ===================================================== */ calculateButton.addEventListener( "click", calculate ); /* ===================================================== LIVE CALCULATION ===================================================== */ amount.addEventListener( "input", calculate ); rate.addEventListener( "change", calculate ); tenure.addEventListener( "change", calculate ); /* ===================================================== OPEN SCHEDULE ===================================================== */ openSchedule.addEventListener( "click", function () { calculate(); modal.classList.add( "active" ); modal.setAttribute( "aria-hidden", "false" ); } ); /* ===================================================== CLOSE SCHEDULE ===================================================== */ function closeModal() { modal.classList.remove( "active" ); modal.setAttribute( "aria-hidden", "true" ); } closeSchedule.addEventListener( "click", closeModal ); /* ===================================================== CLICK OUTSIDE ===================================================== */ modal.addEventListener( "click", function (event) { if ( event.target === modal ) { closeModal(); } } ); /* ===================================================== ESCAPE ===================================================== */ document.addEventListener( "keydown", function (event) { if ( event.key === "Escape" && modal.classList.contains( "active" ) ) { closeModal(); } } ); /* ===================================================== INITIAL CALCULATION ===================================================== */ calculate(); })();
Scroll to Top