{"id":1417,"date":"2026-02-23T12:19:43","date_gmt":"2026-02-23T12:19:43","guid":{"rendered":"http:\/\/localhost\/a3mortgages\/?page_id=1417"},"modified":"2026-02-27T04:44:12","modified_gmt":"2026-02-27T04:44:12","slug":"loan-repayment-calculator","status":"publish","type":"page","link":"https:\/\/bestcoachinginstitute.com\/project\/a3mortgages\/loan-repayment-calculator\/","title":{"rendered":"Loan Repayment Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1417\" class=\"elementor elementor-1417\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb7c4b2 e-flex e-con-boxed e-con e-parent\" data-id=\"bb7c4b2\" 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-5612f22 elementor-widget elementor-widget-html\" data-id=\"5612f22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"gold-mortgage\">\r\n\r\n    <h2>Mortgage Repayment Calculator<\/h2>\r\n\r\n    <div class=\"input-section\">\r\n\r\n        <div class=\"field\">\r\n            <label>Property Price (AUD)<\/label>\r\n            <input type=\"number\" id=\"price\" value=\"800000\">\r\n        <\/div>\r\n\r\n        <div class=\"field\">\r\n            <label>Deposit (AUD)<\/label>\r\n            <input type=\"number\" id=\"deposit\" value=\"100000\">\r\n        <\/div>\r\n\r\n        <div class=\"field\">\r\n            <label>Interest Rate (%)<\/label>\r\n            <input type=\"number\" id=\"rate\" value=\"6.5\" step=\"0.1\">\r\n        <\/div>\r\n\r\n        <div class=\"field\">\r\n            <label>Loan Term (Years)<\/label>\r\n            <input type=\"number\" id=\"years\" value=\"30\">\r\n        <\/div>\r\n\r\n        <div class=\"field\">\r\n            <label>Extra Monthly Repayment<\/label>\r\n            <input type=\"number\" id=\"extra\" value=\"0\">\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"results-box results-flex\">\r\n\r\n        <div class=\"results-left\">\r\n            <div>Loan Amount <span id=\"loanAmount\"><\/span><\/div>\r\n            <div>Monthly Repayment <span id=\"repayment\"><\/span><\/div>\r\n            <div>Total Interest <span id=\"interest\"><\/span><\/div>\r\n            <div>Total Repayment <span id=\"total\"><\/span><\/div>\r\n            <div>Loan Term  Extra Payment <span id=\"newTerm\"><\/span><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"results-right\">\r\n            <div class=\"chart-wrapper\">\r\n                <canvas id=\"chart\"><\/canvas>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- \u2705 TABLE (button removed, table added) -->\r\n    <div class=\"table-wrap\">\r\n        <h3 class=\"table-title\">Repayment Schedule<\/h3>\r\n        <div class=\"table-scroll\">\r\n            <table class=\"rep-table\">\r\n                <thead>\r\n                    <tr>\r\n                        <th>Month<\/th>\r\n                        <th>Total Payment<\/th>\r\n                        <th>Principal<\/th>\r\n                        <th>Interest<\/th>\r\n                        <th>Balance<\/th>\r\n                    <\/tr>\r\n                <\/thead>\r\n                <tbody id=\"scheduleBody\">\r\n                    <!-- rows injected by JS -->\r\n                <\/tbody>\r\n            <\/table>\r\n        <\/div>\r\n    <\/div>\r\n\r\n\r\n<\/div>\r\n\r\n<style>\r\n    .gold-mortgage {\r\n        max-width: 950px;\r\n        margin: 0px auto;\r\n        padding: 50px;\r\n        background: linear-gradient(145deg, #ffffff, #f9f5ea);\r\n        border-radius: 20px;\r\n        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);\r\n        font-family: \"Montserrat\", Sans-serif;\r\n    }\r\n\r\n    .results-flex {\r\n        display: flex;\r\n        gap: 25px;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n    }\r\n\r\n    .results-left {\r\n        flex: 1;\r\n        min-width: 320px;\r\n    }\r\n\r\n    .results-right {\r\n        width: 300px;\r\n        flex: 0 0 300px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .chart-wrapper {\r\n        width: 300px;\r\n        height: 300px;\r\n    }\r\n\r\n    .chart-wrapper canvas {\r\n        width: 100% !important;\r\n        height: 100% !important;\r\n    }\r\n\r\n    \/* Mobile: chart neeche aa jayega *\/\r\n    @media(max-width: 850px) {\r\n        .results-flex {\r\n            flex-direction: column;\r\n        }\r\n\r\n        .results-right {\r\n            width: 100%;\r\n            flex: 0 0 auto;\r\n        }\r\n\r\n        .chart-wrapper {\r\n            margin: 0 auto;\r\n        }\r\n    }\r\n\r\n    .gold-mortgage h2 {\r\n        text-align: center;\r\n        margin-bottom: 40px;\r\n        font-size: 32px;\r\n        color: #FFCC00;\r\n\r\n    }\r\n\r\n    .input-section {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n        gap: 25px;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .field label {\r\n        display: block;\r\n        font-weight: 600;\r\n        margin-bottom: 8px;\r\n        color: #444;\r\n    }\r\n\r\n    .field input {\r\n        width: 100%;\r\n        padding: 14px;\r\n        border-radius: 12px;\r\n        border: 1px solid #e6d8a8;\r\n        background: #fffdf6;\r\n        font-size: 15px;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .field input:focus {\r\n        outline: none;\r\n        border-color: #d4af37;\r\n        box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);\r\n    }\r\n\r\n    .results-box {\r\n        background: linear-gradient(135deg, #fff9e6, #f3e2a9);\r\n        padding: 30px;\r\n        border-radius: 16px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .results-box div {\r\n        margin-bottom: 12px;\r\n        font-size: 16px;\r\n    }\r\n\r\n    .results-box span {\r\n        float: right;\r\n        font-weight: bold;\r\n        color: #8b7500;\r\n    }\r\n\r\n    \/* \u2705 Table styles *\/\r\n    .table-wrap {\r\n        margin-top: 10px;\r\n        background: #fff;\r\n        border: 1px solid #f0e0b5;\r\n        border-radius: 16px;\r\n        padding: 18px;\r\n        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    .table-title {\r\n        margin: 0 0 12px 0;\r\n        font-size: 18px;\r\n        font-weight: 700;\r\n        color: #FFCC00;\r\n    }\r\n\r\n    .table-scroll {\r\n        max-height: 360px;\r\n        \/* scroll for long schedules *\/\r\n        overflow: auto;\r\n        border-radius: 12px;\r\n        border: 1px solid #f3e2a9;\r\n    }\r\n\r\n    .rep-table {\r\n        width: 100%;\r\n        border-collapse: collapse;\r\n        min-width: 700px;\r\n    }\r\n\r\n    .rep-table thead th {\r\n        position: sticky;\r\n        top: 0;\r\n        background: linear-gradient(135deg, #fff9e6, #f3e2a9);\r\n        color: #5f4d00;\r\n        text-align: left;\r\n        padding: 12px;\r\n        font-size: 14px;\r\n        border-bottom: 1px solid #ead9a8;\r\n        z-index: 1;\r\n    }\r\n\r\n    .rep-table tbody td {\r\n        padding: 12px;\r\n        border-bottom: 1px solid #f4ecd1;\r\n        font-size: 14px;\r\n        color: #333;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    .rep-table tbody tr:nth-child(even) {\r\n        background: #fffdf6;\r\n    }\r\n\r\n    .chart-wrapper {\r\n        width: 300px;\r\n        height: 300px;\r\n        margin: 30px auto;\r\n    }\r\n\r\n    .chart-wrapper canvas {\r\n        width: 100% !important;\r\n        height: 100% !important;\r\n    }\r\n\r\n\r\n\r\n    @media(max-width:600px) {\r\n        .gold-mortgage {\r\n            padding: 10px;\r\n        }\r\n        .gold-mortgage{\r\n            max-width: 100%;\r\n        }\r\n\r\n        .rep-table {\r\n            min-width: 650px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n<script>\r\n    let loanChart;\r\n    let schedule = [];\r\n\r\n    function formatAUD(val) {\r\n        return Number(val).toLocaleString('en-AU', { style: 'currency', currency: 'AUD' });\r\n    }\r\n\r\n    function renderTable() {\r\n        const tbody = document.getElementById(\"scheduleBody\");\r\n        tbody.innerHTML = \"\";\r\n\r\n        schedule.forEach(r => {\r\n            const tr = document.createElement(\"tr\");\r\n\r\n            \/\/ r = {month, payment, principal, interest, balance}\r\n            tr.innerHTML = `\r\n        <td>${r.month}<\/td>\r\n        <td>${formatAUD(r.payment)}<\/td>\r\n        <td>${formatAUD(r.principal)}<\/td>\r\n        <td>${formatAUD(r.interest)}<\/td>\r\n        <td>${formatAUD(r.balance)}<\/td>\r\n      `;\r\n            tbody.appendChild(tr);\r\n        });\r\n    }\r\n\r\n    function calculate() {\r\n        const priceEl = document.getElementById(\"price\");\r\n        const depositEl = document.getElementById(\"deposit\");\r\n        const rateEl = document.getElementById(\"rate\");\r\n        const yearsEl = document.getElementById(\"years\");\r\n        const extraEl = document.getElementById(\"extra\");\r\n\r\n        let price = parseFloat(priceEl.value || 0);\r\n        let deposit = parseFloat(depositEl.value || 0);\r\n        let annualRate = parseFloat(rateEl.value || 0) \/ 100;\r\n        let years = parseFloat(yearsEl.value || 0);\r\n        let extra = parseFloat(extraEl.value || 0);\r\n\r\n        let loan = Math.max(price - deposit, 0);\r\n        let months = Math.max(years * 12, 0);\r\n        let monthlyRate = annualRate \/ 12;\r\n\r\n        \/\/ Monthly repayment (P&I)\r\n        let repayment = 0;\r\n        if (loan > 0 && months > 0) {\r\n            if (monthlyRate === 0) {\r\n                repayment = loan \/ months;\r\n            } else {\r\n                const pow = Math.pow(1 + monthlyRate, months);\r\n                repayment = loan * (monthlyRate * pow) \/ (pow - 1);\r\n            }\r\n        }\r\n\r\n        let balance = loan;\r\n        let totalInterest = 0;\r\n        schedule = [];\r\n\r\n        let count = 0;\r\n        const maxMonthsSafety = 1200; \/\/ safety\r\n\r\n        while (balance > 0.01 && count < maxMonthsSafety) {\r\n            let interest = balance * monthlyRate;\r\n            let payment = repayment + extra;\r\n\r\n            \/\/ if payment is too small, prevent infinite loop\r\n            if (payment <= interest && monthlyRate > 0) {\r\n                \/\/ can't amortize\r\n                break;\r\n            }\r\n\r\n            let principal = payment - interest;\r\n            balance -= principal;\r\n            if (balance < 0) balance = 0;\r\n\r\n            totalInterest += interest;\r\n\r\n            schedule.push({\r\n                month: count + 1,\r\n                payment: payment,\r\n                principal: principal,\r\n                interest: interest,\r\n                balance: balance\r\n            });\r\n\r\n            count++;\r\n        }\r\n\r\n        document.getElementById(\"loanAmount\").innerText = formatAUD(loan);\r\n        document.getElementById(\"repayment\").innerText = formatAUD(repayment);\r\n        document.getElementById(\"interest\").innerText = formatAUD(totalInterest);\r\n        document.getElementById(\"total\").innerText = formatAUD((repayment * months));\r\n        document.getElementById(\"newTerm\").innerText = (count \/ 12).toFixed(1) + \" Years\";\r\n\r\n        renderTable();\r\n\r\n        if (loanChart) loanChart.destroy();\r\n\r\n        loanChart = new Chart(document.getElementById(\"chart\"), {\r\n            type: \"doughnut\",\r\n            data: {\r\n                labels: [\"Principal\", \"Interest\"],\r\n                datasets: [{\r\n                    data: [loan, totalInterest],\r\n                    backgroundColor: [\"#d4af37\", \"#b8860b\"]\r\n                }]\r\n            },\r\n            options: {\r\n                responsive: true,\r\n                maintainAspectRatio: false,\r\n                plugins: {\r\n                    legend: { position: \"bottom\" }\r\n                }\r\n            }\r\n        });\r\n    }\r\n\r\n    document.querySelectorAll(\".gold-mortgage input\").forEach(el => {\r\n        el.addEventListener(\"input\", calculate);\r\n    });\r\n\r\n    calculate();\r\n<\/script>\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>Mortgage Repayment Calculator Property Price (AUD) Deposit (AUD) Interest Rate (%) Loan Term (Years) Extra Monthly Repayment Loan Amount Monthly [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1417","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bestcoachinginstitute.com\/project\/a3mortgages\/wp-json\/wp\/v2\/pages\/1417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bestcoachinginstitute.com\/project\/a3mortgages\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bestcoachinginstitute.com\/project\/a3mortgages\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bestcoachinginstitute.com\/project\/a3mortgages\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bestcoachinginstitute.com\/project\/a3mortgages\/wp-json\/wp\/v2\/comments?post=1417"}],"version-history":[{"count":35,"href":"https:\/\/bestcoachinginstitute.com\/project\/a3mortgages\/wp-json\/wp\/v2\/pages\/1417\/revisions"}],"predecessor-version":[{"id":1725,"href":"https:\/\/bestcoachinginstitute.com\/project\/a3mortgages\/wp-json\/wp\/v2\/pages\/1417\/revisions\/1725"}],"wp:attachment":[{"href":"https:\/\/bestcoachinginstitute.com\/project\/a3mortgages\/wp-json\/wp\/v2\/media?parent=1417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}