{"id":4724,"date":"2026-04-09T10:47:47","date_gmt":"2026-04-09T10:47:47","guid":{"rendered":"https:\/\/fisdemoprojects.com\/espertamanagement\/?page_id=4724"},"modified":"2026-04-09T10:48:27","modified_gmt":"2026-04-09T10:48:27","slug":"loan-calculator","status":"publish","type":"page","link":"https:\/\/fisdemoprojects.com\/espertamanagement\/loan-calculator\/","title":{"rendered":"Loan Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4724\" class=\"elementor elementor-4724\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7179436 e-flex e-con-boxed e-con e-parent\" data-id=\"7179436\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8507b7 elementor-widget elementor-widget-html\" data-id=\"d8507b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"uk-loan-wrapper\">\r\n    <style>\r\n        .uk-loan-wrapper {\r\n            max-width: 100%;\r\n            margin: 0 auto;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n        \r\n        .loan-card {\r\n            background: #ffffff;\r\n            border-radius: 12px;\r\n            box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);\r\n            overflow: hidden;\r\n            margin-bottom: 24px;\r\n        }\r\n        \r\n        .loan-header {\r\n            background: #003da6;\r\n            padding: 20px 24px;\r\n            color: white;\r\n        }\r\n        \r\n        .loan-header h2 {\r\n            margin: 0;\r\n            font-size: 24px;\r\n            font-weight: 600;\r\n            color: white;\r\n        }\r\n        \r\n        .loan-header p {\r\n            margin: 8px 0 0;\r\n            opacity: 0.85;\r\n            font-size: 14px;\r\n            color: #fff;\r\n        }\r\n        \r\n        .form-section {\r\n            padding: 24px;\r\n            background: #f8fafc;\r\n            border-bottom: 1px solid #e2e8f0;\r\n        }\r\n        \r\n        .form-row {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n            gap: 20px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .form-field {\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n        \r\n        .form-field label {\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n            color: #334155;\r\n            margin-bottom: 6px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.3px;\r\n        }\r\n        \r\n        .form-field input {\r\n            padding: 10px 14px;\r\n            border: 1px solid #cbd5e1;\r\n            border-radius: 8px;\r\n            font-size: 15px;\r\n            font-family: monospace;\r\n            font-weight: 500;\r\n            background: white;\r\n        }\r\n        \r\n        .form-field input:focus {\r\n            outline: none;\r\n            border-color: #003da6;\r\n            box-shadow: 0 0 0 3px rgba(0,61,166,0.1);\r\n        }\r\n        \r\n        .btn-group {\r\n            display: flex;\r\n            gap: 12px;\r\n            margin-top: 8px;\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        .btn {\r\n            padding: 10px 24px;\r\n            border-radius: 40px;\r\n            font-weight: 600;\r\n            font-size: 14px;\r\n            border: none;\r\n            cursor: pointer;\r\n            transition: all 0.2s;\r\n        }\r\n        \r\n        .btn-primary {\r\n            background: #003da6;\r\n            color: white;\r\n        }\r\n        \r\n        .btn-primary:hover {\r\n            background: #002a70;\r\n        }\r\n        \r\n        .btn-secondary {\r\n            background: #e2e8f0;\r\n            color: #334155;\r\n        }\r\n        \r\n        .btn-secondary:hover {\r\n            background: #cbd5e1;\r\n        }\r\n        \r\n        \/* Results Section *\/\r\n        .results-section {\r\n            padding: 24px;\r\n        }\r\n        \r\n        .results-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 24px;\r\n            margin-bottom: 24px;\r\n        }\r\n        \r\n        .results-card {\r\n            background: white;\r\n            border: 1px solid #e2e8f0;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .results-header {\r\n            background: #003da6;\r\n            color: white;\r\n            padding: 14px 20px;\r\n            font-weight: 700;\r\n            font-size: 16px;\r\n        }\r\n        \r\n        .results-header h3 {\r\n            margin: 0;\r\n            font-size: 16px;\r\n            color: white;\r\n        }\r\n        \r\n        .result-row {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding: 16px 20px;\r\n            border-bottom: 1px solid #f1f5f9;\r\n        }\r\n        \r\n        .result-row:last-child {\r\n            border-bottom: none;\r\n        }\r\n        \r\n        .result-label {\r\n            font-weight: 600;\r\n            color: #334155;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        .result-label .badge {\r\n            display: inline-block;\r\n            background: #e6f0fa;\r\n            padding: 3px 10px;\r\n            border-radius: 20px;\r\n            font-size: 10px;\r\n            font-weight: 500;\r\n            color: #003da6;\r\n            margin-left: 10px;\r\n        }\r\n        \r\n        .result-value {\r\n            font-family: monospace;\r\n            font-weight: 800;\r\n            font-size: 20px;\r\n            color: #003da6;\r\n        }\r\n        \r\n        .payment-row .result-value {\r\n            color: #166534;\r\n            font-size: 24px;\r\n        }\r\n        \r\n        .interest-row .result-value {\r\n            color: #b91c1c;\r\n        }\r\n        \r\n        .info-note {\r\n            background: #f1f5f9;\r\n            padding: 16px 20px;\r\n            border-radius: 12px;\r\n            font-size: 13px;\r\n            line-height: 1.6;\r\n            color: #475569;\r\n        }\r\n        \r\n        .info-note h4 {\r\n            margin: 0 0 8px;\r\n            font-size: 14px;\r\n            color: #003da6;\r\n        }\r\n        \r\n        .info-note p {\r\n            margin: 5px 0;\r\n        }\r\n        \r\n        .warning-note {\r\n            background: #fef3c7;\r\n            border-left: 3px solid #f59e0b;\r\n            padding: 10px 14px;\r\n            border-radius: 8px;\r\n            margin-top: 12px;\r\n            font-size: 12px;\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .results-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 16px;\r\n            }\r\n            .result-value {\r\n                font-size: 16px;\r\n            }\r\n            .payment-row .result-value {\r\n                font-size: 20px;\r\n            }\r\n            .form-section {\r\n                padding: 20px;\r\n            }\r\n            .results-section {\r\n                padding: 20px;\r\n            }\r\n            .result-row {\r\n                padding: 12px 16px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- Loan Calculator - Fixed Monthly Repayments -->\r\n    <div class=\"loan-card\">\r\n        <div class=\"loan-header\">\r\n            <h2>\ud83c\udfe6 Loan Calculator<\/h2>\r\n            <p>Calculate fixed monthly repayments and total interest<\/p>\r\n        <\/div>\r\n        \r\n        <div class=\"form-section\">\r\n            <div class=\"form-row\">\r\n                <div class=\"form-field\">\r\n                    <label>\ud83d\udcb0 Amount of loan (\u00a3)<\/label>\r\n                    <input type=\"number\" id=\"loanAmount\" value=\"10000\" step=\"1000\" placeholder=\"Enter loan amount\">\r\n                <\/div>\r\n                \r\n                <div class=\"form-field\">\r\n                    <label>\ud83d\udcc8 APR (%)<\/label>\r\n                    <input type=\"number\" id=\"aprRate\" value=\"5.9\" step=\"0.1\" placeholder=\"Enter annual interest rate\">\r\n                <\/div>\r\n                \r\n                <div class=\"form-field\">\r\n                    <label>\ud83d\udcc5 Number of monthly payments<\/label>\r\n                    <input type=\"number\" id=\"numPayments\" value=\"48\" step=\"12\" placeholder=\"Enter number of months\">\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"btn-group\">\r\n                <button class=\"btn btn-primary\" id=\"calculateBtn\">\u27f3 Calculate<\/button>\r\n                <button class=\"btn btn-secondary\" id=\"resetBtn\">Reset<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"results-section\">\r\n            <div class=\"results-grid\">\r\n                <!-- Left Card: Loan Results -->\r\n                <div class=\"results-card\">\r\n                    <div class=\"results-header\">\r\n                        <h3>\ud83d\udcca Loan Repayment Summary<\/h3>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"result-row payment-row\">\r\n                        <div class=\"result-label\">\r\n                            Monthly repayment\r\n                            <span class=\"badge\">per month<\/span>\r\n                        <\/div>\r\n                        <div class=\"result-value\" id=\"monthlyPayment\">\u00a30.00<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"result-row\">\r\n                        <div class=\"result-label\">Total of payments<\/div>\r\n                        <div class=\"result-value\" id=\"totalPayments\">\u00a30.00<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"result-row interest-row\">\r\n                        <div class=\"result-label\">Total interest charged<\/div>\r\n                        <div class=\"result-value\" id=\"totalInterest\">\u00a30.00<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- Right Card: Input Summary -->\r\n                <div class=\"results-card\">\r\n                    <div class=\"results-header\">\r\n                        <h3>\ud83d\udccb Loan Details<\/h3>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"result-row\">\r\n                        <div class=\"result-label\">Loan amount<\/div>\r\n                        <div class=\"result-value\" id=\"summaryLoan\" style=\"font-size: 16px;\">\u00a30.00<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"result-row\">\r\n                        <div class=\"result-label\">APR (annual rate)<\/div>\r\n                        <div class=\"result-value\" id=\"summaryApr\" style=\"font-size: 16px;\">0%<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"result-row\">\r\n                        <div class=\"result-label\">Monthly interest rate<\/div>\r\n                        <div class=\"result-value\" id=\"summaryMonthlyRate\" style=\"font-size: 16px;\">0%<\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"result-row\">\r\n                        <div class=\"result-label\">Loan term<\/div>\r\n                        <div class=\"result-value\" id=\"summaryTerm\" style=\"font-size: 16px;\">0 months<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"info-note\">\r\n                <h4>\ud83d\udccb How loan repayments are calculated<\/h4>\r\n                <p><strong>Monthly Payment Formula (Amortizing Loan):<\/strong><\/p>\r\n                <p>M = P \u00d7 (r \u00d7 (1 + r)^n) \/ ((1 + r)^n - 1)<\/p>\r\n                <p>Where: P = Loan amount, r = Monthly interest rate (APR \u00f7 12 \u00f7 100), n = Number of monthly payments<\/p>\r\n                <p><strong>Total of Payments<\/strong> = Monthly Payment \u00d7 Number of Payments<\/p>\r\n                <p><strong>Total Interest Charged<\/strong> = Total Payments - Loan Amount<\/p>\r\n                <div class=\"warning-note\">\r\n                    \ud83d\udca1 <strong>Important:<\/strong> This calculator assumes fixed interest rate and fixed monthly payments throughout the loan term. Actual loan terms may vary by lender.\r\n                <\/div>\r\n                <p id=\"formulaInfo\" style=\"background: #e6f0fa; padding: 8px 12px; border-radius: 8px; margin-top: 10px;\">\ud83d\udca1 Enter loan amount, APR, and number of monthly payments then click Calculate.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            \/\/ DOM Elements\r\n            const loanAmountInput = document.getElementById('loanAmount');\r\n            const aprRateInput = document.getElementById('aprRate');\r\n            const numPaymentsInput = document.getElementById('numPayments');\r\n            const calculateBtn = document.getElementById('calculateBtn');\r\n            const resetBtn = document.getElementById('resetBtn');\r\n            \r\n            \/\/ Display Elements\r\n            const monthlyPaymentSpan = document.getElementById('monthlyPayment');\r\n            const totalPaymentsSpan = document.getElementById('totalPayments');\r\n            const totalInterestSpan = document.getElementById('totalInterest');\r\n            const summaryLoanSpan = document.getElementById('summaryLoan');\r\n            const summaryAprSpan = document.getElementById('summaryApr');\r\n            const summaryMonthlyRateSpan = document.getElementById('summaryMonthlyRate');\r\n            const summaryTermSpan = document.getElementById('summaryTerm');\r\n            const formulaInfo = document.getElementById('formulaInfo');\r\n            \r\n            function formatMoney(value) {\r\n                return '\u00a3' + value.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n            }\r\n            \r\n            function formatNumber(value) {\r\n                return value.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n            }\r\n            \r\n            function calculateLoan() {\r\n                \/\/ Get input values\r\n                let loanAmount = parseFloat(loanAmountInput.value) || 0;\r\n                let aprPercent = parseFloat(aprRateInput.value) || 0;\r\n                let numPayments = parseInt(numPaymentsInput.value) || 0;\r\n                \r\n                if (loanAmount < 0) loanAmount = 0;\r\n                if (aprPercent < 0) aprPercent = 0;\r\n                if (numPayments < 0) numPayments = 0;\r\n                \r\n                let monthlyPayment = 0;\r\n                let totalPayments = 0;\r\n                let totalInterest = 0;\r\n                \r\n                \/\/ Calculate monthly interest rate\r\n                let monthlyRate = aprPercent \/ 100 \/ 12;\r\n                \r\n                if (numPayments === 0) {\r\n                    monthlyPayment = 0;\r\n                    totalPayments = 0;\r\n                    totalInterest = 0;\r\n                } else if (monthlyRate === 0) {\r\n                    \/\/ Zero interest loan\r\n                    monthlyPayment = loanAmount \/ numPayments;\r\n                    totalPayments = loanAmount;\r\n                    totalInterest = 0;\r\n                } else {\r\n                    \/\/ Standard amortization formula\r\n                    \/\/ M = P * (r * (1 + r)^n) \/ ((1 + r)^n - 1)\r\n                    let factor = Math.pow(1 + monthlyRate, numPayments);\r\n                    monthlyPayment = loanAmount * (monthlyRate * factor) \/ (factor - 1);\r\n                    totalPayments = monthlyPayment * numPayments;\r\n                    totalInterest = totalPayments - loanAmount;\r\n                }\r\n                \r\n                \/\/ Handle NaN or infinite values\r\n                if (isNaN(monthlyPayment) || !isFinite(monthlyPayment)) {\r\n                    monthlyPayment = 0;\r\n                    totalPayments = 0;\r\n                    totalInterest = 0;\r\n                }\r\n                \r\n                if (totalInterest < 0) totalInterest = 0;\r\n                \r\n                \/\/ Update displays\r\n                monthlyPaymentSpan.textContent = formatMoney(monthlyPayment);\r\n                totalPaymentsSpan.textContent = formatMoney(totalPayments);\r\n                totalInterestSpan.textContent = formatMoney(totalInterest);\r\n                \r\n                \/\/ Update summary\r\n                summaryLoanSpan.textContent = formatMoney(loanAmount);\r\n                summaryAprSpan.textContent = aprPercent + '%';\r\n                summaryMonthlyRateSpan.textContent = (monthlyRate * 100).toFixed(3) + '%';\r\n                summaryTermSpan.textContent = numPayments + ' month' + (numPayments !== 1 ? 's' : '');\r\n                \r\n                \/\/ Update formula info\r\n                if (numPayments === 0) {\r\n                    formulaInfo.innerHTML = `\ud83d\udca1 <strong>Calculation Details:<\/strong><br>\r\n                    Loan term cannot be zero months. Please enter a valid number of monthly payments.`;\r\n                } else if (monthlyRate === 0) {\r\n                    formulaInfo.innerHTML = `\ud83d\udca1 <strong>Calculation Details (0% APR):<\/strong><br>\r\n                    Monthly Payment = Loan Amount \u00f7 Number of Payments<br>\r\n                    \u2192 ${formatMoney(loanAmount)} \u00f7 ${numPayments} = ${formatMoney(monthlyPayment)}<br>\r\n                    Total Payments = ${formatMoney(loanAmount)}<br>\r\n                    Total Interest = \u00a30.00`;\r\n                } else {\r\n                    formulaInfo.innerHTML = `\ud83d\udca1 <strong>Calculation Details:<\/strong><br>\r\n                    Loan Amount: ${formatMoney(loanAmount)}<br>\r\n                    APR: ${aprPercent}% \u2192 Monthly Rate: ${(monthlyRate*100).toFixed(4)}%<br>\r\n                    Term: ${numPayments} months<br><br>\r\n                    <strong>Monthly Payment Formula:<\/strong><br>\r\n                    M = P \u00d7 (r \u00d7 (1 + r)^n) \/ ((1 + r)^n - 1)<br>\r\n                    \u2192 ${formatMoney(loanAmount)} \u00d7 (${(monthlyRate*100).toFixed(4)}% \u00d7 ${(1+monthlyRate).toFixed(6)}^${numPayments}) \/ (${(1+monthlyRate).toFixed(6)}^${numPayments} - 1)<br>\r\n                    = ${formatMoney(monthlyPayment)} per month<br><br>\r\n                    <strong>Total of Payments:<\/strong> ${formatMoney(monthlyPayment)} \u00d7 ${numPayments} = ${formatMoney(totalPayments)}<br>\r\n                    <strong>Total Interest:<\/strong> ${formatMoney(totalPayments)} - ${formatMoney(loanAmount)} = ${formatMoney(totalInterest)}`;\r\n                }\r\n            }\r\n            \r\n            function resetForm() {\r\n                loanAmountInput.value = '10000';\r\n                aprRateInput.value = '5.9';\r\n                numPaymentsInput.value = '48';\r\n                calculateLoan();\r\n            }\r\n            \r\n            \/\/ Event listeners\r\n            calculateBtn.addEventListener('click', calculateLoan);\r\n            resetBtn.addEventListener('click', resetForm);\r\n            \r\n            \/\/ Auto-calculate on input change\r\n            loanAmountInput.addEventListener('input', calculateLoan);\r\n            aprRateInput.addEventListener('input', calculateLoan);\r\n            numPaymentsInput.addEventListener('input', calculateLoan);\r\n            \r\n            \/\/ Initialize\r\n            calculateLoan();\r\n        })();\r\n    <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfe6 Loan Calculator Calculate fixed monthly repayments and total interest \ud83d\udcb0 Amount of loan (\u00a3) \ud83d\udcc8 APR (%) \ud83d\udcc5 Number of monthly payments \u27f3 Calculate Reset \ud83d\udcca Loan Repayment Summary Monthly repayment per month \u00a30.00 Total of payments \u00a30.00 Total interest charged \u00a30.00 \ud83d\udccb Loan Details Loan amount \u00a30.00 APR (annual rate) 0% Monthly interest [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4724","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages\/4724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/comments?post=4724"}],"version-history":[{"count":4,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages\/4724\/revisions"}],"predecessor-version":[{"id":4728,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages\/4724\/revisions\/4728"}],"wp:attachment":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/media?parent=4724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}