{"id":10977,"date":"2025-04-28T12:49:33","date_gmt":"2025-04-28T12:49:33","guid":{"rendered":"https:\/\/www.iibanks.com\/caribbean\/?page_id=10977"},"modified":"2025-12-11T10:05:56","modified_gmt":"2025-12-11T10:05:56","slug":"currency-interest-calculator","status":"publish","type":"page","link":"https:\/\/www.iibanks.com\/caribbean\/currency-interest-calculator\/","title":{"rendered":"Currency Interest Calculator"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row tm_bgimagefixed=&#8221;&#8221; css=&#8221;.vc_custom_1765447549181{padding-top: 100px !important;padding-bottom: 200px !important;}&#8221; el_class=&#8221;calculator_visualroW&#8221;][vc_column]<div id=\"ultimate-heading-88296a4ee23fc0927\" class=\"uvc-heading ult-adjust-bottom-margin ultimate-heading-88296a4ee23fc0927 uvc-4673 calchdnG\" data-hspacer=\"no_spacer\"  data-halign=\"center\" style=\"text-align:center\"><div class=\"uvc-heading-spacer no_spacer\" style=\"top\"><\/div><div class=\"uvc-main-heading ult-responsive\"  data-ultimate-target='.uvc-heading.ultimate-heading-88296a4ee23fc0927 h1'  data-responsive-json-new='{\"font-size\":\"desktop:50px;\",\"line-height\":\"\"}' ><h1 style=\"font-weight:bold;margin-bottom:70px;\">Interest Rate Calculator<\/h1><\/div><\/div>[vc_column_text css=&#8221;.vc_custom_1747648289173{margin-bottom: 0px !important;}&#8221;]    <form id=\"interest-calculator\">\r\n        <div class=\"container\">\r\n            <div class=\"row\">\r\n                <div class=\"col-4\">\r\n                    <div class=\"shaD\">\r\n                        <label>Currency:\r\n                            <select id=\"currency\" required>\r\n                                <option value=\"\">Select Currency<\/option>\r\n                                                                <option value=\"USD\" \r\n                                        data-symbol=\"$\"\r\n                                        data-symbol-image=\"http:\/\/www.iibanks.com\/caribbean\/wp-content\/uploads\/sites\/2\/2025\/12\/usd.png\">\r\n                                    USD                                <\/option>\r\n                                                                <option value=\"EUR\" \r\n                                        data-symbol=\"\u20ac\"\r\n                                        data-symbol-image=\"http:\/\/www.iibanks.com\/caribbean\/wp-content\/uploads\/sites\/2\/2025\/12\/euro.png\">\r\n                                    EUR                                <\/option>\r\n                                                                <option value=\"GBP\" \r\n                                        data-symbol=\"\u00a3\"\r\n                                        data-symbol-image=\"http:\/\/www.iibanks.com\/caribbean\/wp-content\/uploads\/sites\/2\/2025\/12\/gbp.png\">\r\n                                    GBP                                <\/option>\r\n                                                            <\/select>\r\n                        <\/label><br><br>\r\n                        <label>Principal Amount:\r\n                            <div style=\"display: flex; align-items: center;\">\r\n                                <span id=\"currency-symbol-container\" style=\"margin-right: 0; min-width: 40px; display: flex; align-items: center; justify-content: center; padding: 5px; border: 1px solid #ddd; border-right: 0;\">\r\n                                    <img id=\"currency-symbol-image\" src=\"\" alt=\"\" style=\"max-width: 30px; max-height: 30px; display: none;\">\r\n                                    <span id=\"currency-symbol\"><img src=\"\/caribbean\/wp-content\/uploads\/sites\/2\/2025\/05\/usd-30x26-1.png\" \/><\/span>\r\n                                <\/span>\r\n                                <input type=\"text\" id=\"principal\" required oninput=\"formatNumberInput(this)\" placeholder=\"25,000\">                                \r\n                            <\/div>\r\n                            <input type=\"range\" id=\"principal-slider\" min=\"25000\" max=\"5000000\" step=\"500\" value=\"25000\" style=\"width: 100%; margin-top: 10px;height: 1px !important;background: rgb(28 36 90);\">\r\n                            <div class=\"rangespandiV\" style=\"display: flex; justify-content: space-between; font-size: 14px; margin-top: 4px;\">\r\n                            <span id=\"principal-display\">25,000<\/span>\r\n       <span>\r\n5M<\/span>\r\n\r\n                            <\/div>\r\n                        <\/label><br><br>\r\n                        <label>Tenure Unit:\r\n                            <select id=\"tenure_unit\" required>\r\n                                <option value=\"\">Select Tenure Unit<\/option>                                \r\n                                <option value=\"months\">Months<\/option>\r\n                                <option value=\"years\">Years<\/option>\r\n                            <\/select>\r\n                        <\/label><br><br>\r\n                        <label>Tenure:\r\n                            <select id=\"tenure\" required>\r\n                                <option value=\"\">Select Tenure<\/option>\r\n                            <\/select>\r\n                            <div id=\"tenure-error\" style=\"color: red; display: none;\"><\/div>\r\n                        <\/label><br><br>\r\n                        <div class=\"col-12 float-right\">\r\n                            <button type=\"button\" onclick=\"calculateInterest()\">Calculate<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-8\">\r\n                    <div class=\"shaD p-t-0\">\r\n                        <canvas id=\"myHalfDoughnutChart\"><\/canvas>\r\n                        <div class=\"default_result\">\r\n                            <span class=\"totalamounT_tittle\">Total Amount including Interest<\/span>\r\n                            <strong class=\"totalamounT\"><img src=\"\/caribbean\/wp-content\/uploads\/sites\/2\/2025\/05\/usd-30x26-1.png\" \/>0<\/strong>\r\n                            <hr \/>\r\n                            <div class=\"container savingroW\">\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-6\">\r\n                                        <strong>Principal Amount<\/strong><img src=\"\/caribbean\/wp-content\/uploads\/sites\/2\/2025\/05\/usd-30x26-1.png\" \/>0<br>\r\n                                    <\/div>\r\n                                    <div class=\"col-6\">\r\n                                        <strong>Interest Earned<\/strong> <img src=\"\/caribbean\/wp-content\/uploads\/sites\/2\/2025\/05\/usd-30x26-1.png\" \/>0\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div id=\"result\" style=\"margin-top: 20px;\"><\/div>\r\n                    <\/div>   \r\n                        <p class=\"notE\">*All rates are indicative and subject to change.<\/p>            \r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/form>\r\n    <style>\r\n        .notE {\r\n            text-align:right;\r\n            padding:20px 0 0;\r\n        }\r\n        input#principal {\r\n            padding: 8.5px 15px;\r\n        }\r\n        .p-t-0 {\r\n            padding-top:0 !important;\r\n        }\r\n        #investmentChart {\r\n            width: 100%;\r\n            height: 200px;\r\n        } \r\n        #currency-symbol-container {\r\n            color: rgb(28 36 90) !important;\r\n            padding: 1px 10px;\r\n            font-size: 28px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            min-width: 35px;\r\n            height: 40px;\r\n        }\r\n        #currency-symbol {\r\n            font-size: 30px;\r\n            font-weight: bold !important;\r\n            color: #1c245a !important;\r\n        }\r\n        #currency-symbol-image {\r\n            max-width: 25px;\r\n            max-height: 25px;\r\n        }\r\n        #interest-calculator label {\r\n            width: 100%;\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            padding-bottom: 10px;\r\n        }\r\n        .rangespandiV span {\r\n            font-size: 12px;\r\n            font-weight: 500 !important;\r\n        }\r\n        #interest-calculator .shaD {\r\n            box-shadow: 0px 0px 20px 0px #1369EB1A;\r\n            padding: 40px 35px;\r\n            border-radius: 15px;\r\n            position: relative;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n        #interest-calculator button {\r\n            background: #1a2159 !important;            \r\n            color: #fff !important;\r\n            border-radius: 5px;            \r\n            display: block;\r\n            margin-left: auto;\r\n            margin-right: 0;\r\n            padding: 7px 20px;\r\n        }\r\n        .totalamounT {\r\n            font-size: 40px;\r\n            font-weight: 800;\r\n            line-height: 38px;\r\n            color: #1c245a;\r\n            display: block;\r\n            text-align: center;\r\n        }\r\n        .totalamounT img {\r\n            max-width: 40px !important;\r\n            max-height: 35px !important;\r\n            vertical-align: bottom !important;\r\n            margin-right: 5px !important;\r\n        }\r\n        .default_result .totalamounT img {\r\n            width: 38px !important;\r\n        }\r\n        .totalamounT_tittle {\r\n            font-size: 24px;\r\n            font-weight: 500 !important;\r\n            line-height: 20.08px;\r\n            text-align: center;\r\n            padding-bottom: 10px;\r\n            display: block;\r\n        }\r\n        .savingroW {\r\n            padding: 5px 0 0;\r\n        }\r\n        .savingroW strong {\r\n            font-size: 18px;\r\n            font-weight: 500 !important;\r\n            line-height: 20.08px;\r\n            text-align: center;\r\n            padding-bottom: 5px;\r\n            display: block;\r\n        }\r\n        .savingroW .col-6 {\r\n            text-align: center;\r\n            font-size: 25px;\r\n        }\r\n        .savingroW .col-6 img {\r\n            max-width: 28px !important;\r\n            vertical-align: middle;\r\n            margin-right: 5px !important;\r\n        }\r\n        .intrst_rateS {\r\n            font-size: 18px;\r\n            font-weight: 500 !important;\r\n            text-align: center;\r\n        }\r\n        #result {\r\n            margin-top: 0 !important;\r\n        }\r\n        #myHalfDoughnutChart {\r\n            width: 40% !important;\r\n            height: auto !important;\r\n            margin: 0px auto 20px;\r\n        }\r\n        .min25erroR {\r\n            color: red !important;\r\n            text-align: center;\r\n            margin: 0 auto;\r\n            display: block;\r\n            font-weight: 500 !important;\r\n            text-transform: capitalize;\r\n        }\r\n\r\n        \r\n    @media only screen and (max-width: 1792px) {\r\n        .savingroW .col-6 img {\r\n            max-width: 25px !important;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 1366px) {\r\n        #myHalfDoughnutChart {\r\n            width: 50% !important;\r\n        }\r\n        .savingroW .col-6 img {\r\n            max-width: 26px !important;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 1180px) {\r\n        #interest-calculator .row {\r\n            flex-direction: column-reverse;\r\n        }\r\n        #interest-calculator .col-4 {\r\n            width: 100%;    \r\n            margin-top: 50px;        \r\n        }\r\n        #interest-calculator .col-8 {\r\n            width: 100%;            \r\n        }\r\n        #interest-calculator .savingroW .row {\r\n            flex-direction: row;\r\n        }\r\n        .notE {\r\n            text-align: center;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 740px) {\r\n        .calculator_visualroW {\r\n            max-width: 100%;\r\n        }\r\n        .calculator_visualroW .container {\r\n            max-width: 90%;\r\n        }\r\n        #myHalfDoughnutChart {\r\n            width: 60% !important;\r\n        }        \r\n    }\r\n    @media only screen and (max-width: 667px) {\r\n        #myHalfDoughnutChart {\r\n            width: 65% !important;\r\n        }\r\n        .savingroW .col-6 {\r\n            font-size: 20px;\r\n        }\r\n        .savingroW .col-6 img {\r\n            max-width: 20px !important;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 600px) {\r\n        #myHalfDoughnutChart {\r\n            width: 80% !important;\r\n        }\r\n        .savingroW .col-6 {\r\n            font-size: 18px;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 540px) {\r\n        #myHalfDoughnutChart {\r\n            width: 90% !important;\r\n        }\r\n    }   \r\n    @media only screen and (max-width: 480px) {\r\n        #myHalfDoughnutChart {\r\n            width: 100% !important;\r\n        }\r\n        .totalamounT_tittle {\r\n            font-size: 18px;\r\n        }\r\n        #interest-calculator .shaD {\r\n            padding: 40px 25px;\r\n        }\r\n        .totalamounT {\r\n            font-size: 34px;\r\n            line-height: 30px;\r\n        }\r\n        .totalamounT img {\r\n            max-width: 34px !important;\r\n        }\r\n        .savingroW strong {\r\n            font-size: 16px;\r\n        }\r\n        .savingroW .col-6 {\r\n            font-size: 16px;\r\n        }\r\n        #interest-calculator .col-4 {\r\n            padding: 0;\r\n        }\r\n        #interest-calculator .col-8 {\r\n            padding: 0;\r\n        }\r\n        .notE {\r\n            font-size: 14px;\r\n        }\r\n        #interest-calculator button {\r\n            width: 100%;\r\n        }\r\n        #interest-calculator br {\r\n            display: none;\r\n        }\r\n        #interest-calculator label {\r\n            padding-bottom: 20px;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 430px) {\r\n        .savingroW .col-6 {\r\n            font-size: 14px;\r\n        }\r\n        .savingroW .col-6 img {\r\n            max-width: 14px !important;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 414px) {\r\n        .savingroW .col-6 {\r\n            font-size: 16px !important;\r\n            width: 100%;\r\n            padding: 0 0 15px;\r\n        }\r\n        .savingroW .col-6:last-child {\r\n            padding: 0 !important;\r\n        }\r\n        .container.savingroW .col-6 img {\r\n            max-width: 18px !important;\r\n        }\r\n        .savingroW strong {\r\n            font-size: 20px;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 390px) {\r\n        .totalamounT {\r\n            font-size: 30px;\r\n        }\r\n        .totalamounT img {\r\n            max-width: 30px !important;\r\n        }\r\n        .calchdnG .uvc-main-heading h1 {\r\n            font-size: 40px !important;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 360px) {\r\n        .totalamounT_tittle {\r\n            font-size: 16px;\r\n        }\r\n        .totalamounT {\r\n            font-size: 25px;\r\n            line-height: 24px;\r\n        }\r\n        .totalamounT img {\r\n            max-width: 25px !important;\r\n        }\r\n        .notE {\r\n            font-size: 16px;\r\n            line-height: 20px;\r\n        }\r\n    }\r\n    @media only screen and (max-width: 320px) {\r\n        #result p {\r\n            font-size: 14px !important;\r\n        }\r\n        .totalamounT_tittle {\r\n            font-size: 14px !important;\r\n        }\r\n        .intrst_rateS {\r\n            font-size: 15px;\r\n        }\r\n    }\r\n    <\/style>\r\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n    <script>\r\n        \/\/ Get saved settings from PHP\r\n        const savedCurrencies = {\"USD\":{\"symbol\":\"$\",\"symbol_image\":\"http:\\\/\\\/www.iibanks.com\\\/caribbean\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/12\\\/usd.png\",\"name\":\"US Dollar\",\"months_early_rate\":5,\"months_middle_rate\":5.1,\"months_late_rate\":5.1,\"years\":{\"max\":3,\"rate\":5.15}},\"EUR\":{\"symbol\":\"\\u20ac\",\"symbol_image\":\"http:\\\/\\\/www.iibanks.com\\\/caribbean\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/12\\\/euro.png\",\"name\":\"Euro\",\"months_early_rate\":3,\"months_middle_rate\":3.15,\"months_late_rate\":3.15,\"years\":{\"max\":3,\"rate\":3.15}},\"GBP\":{\"symbol\":\"\\u00a3\",\"symbol_image\":\"http:\\\/\\\/www.iibanks.com\\\/caribbean\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2025\\\/12\\\/gbp.png\",\"name\":\"British Pound\",\"months_early_rate\":3,\"months_middle_rate\":3.15,\"months_late_rate\":3.15,\"years\":{\"max\":3,\"rate\":3.15}}};\r\n        const minPrincipal = 25000;\r\n        const maxPrincipal = 5000000;\r\n        \r\n        function formatNumberInput(input) {\r\n            let value = input.value.replace(\/[^0-9]\/g, '');\r\n            if (value === '') {\r\n                input.value = '';\r\n                return;\r\n            }\r\n            const numericValue = parseInt(value);\r\n            input.value = new Intl.NumberFormat('en-US').format(numericValue);\r\n            const slider = document.getElementById('principal-slider');\r\n            if (!isNaN(numericValue) && numericValue >= parseInt(slider.min) && numericValue <= parseInt(slider.max)) {\r\n                slider.value = numericValue;\r\n            }\r\n        }\r\n        \r\n        function getRawNumber(formatted) {\r\n            return parseFloat(formatted.replace(\/,\/g, ''));\r\n        }\r\n        \r\n       function getRate(currency, unit, tenure) {\r\n            const currencyData = savedCurrencies[currency];\r\n            if (!currencyData) return 0;\r\n\r\n            if (unit === 'months') {\r\n                \/\/ Early: 1\u20133 months (we use 3 in dropdown)\r\n                if (tenure >= 1 && tenure <= 3) {\r\n                    return currencyData.months_early_rate;\r\n                }\r\n                \/\/ Middle: 4\u20136 months (we use 6 in dropdown)\r\n                if (tenure >= 4 && tenure <= 6) {\r\n                    return currencyData.months_middle_rate;\r\n                }\r\n                \/\/ Late: 7\u20139 months (we use 9 in dropdown)\r\n                if (tenure >= 7 && tenure <= 9) {\r\n                    return currencyData.months_late_rate;\r\n                }\r\n            }\r\n\r\n            if (unit === 'years' && tenure <= currencyData.years.max) {\r\n                return currencyData.years.rate;\r\n            }\r\n\r\n            return 0;\r\n        }\r\n\r\n\r\n        \r\n      function getMaxTenure(unit) {\r\n    const currency = document.getElementById('currency').value;\r\n    if (!currency || !savedCurrencies[currency]) return 0;\r\n\r\n    const currencyData = savedCurrencies[currency];\r\n\r\n    if (unit === 'years') {\r\n        return currencyData.years.max;\r\n    }\r\n\r\n    return 0;\r\n}\r\n\r\n\r\n        \r\nfunction populateTenureDropdown() {\r\n    const unit = document.getElementById('tenure_unit').value;\r\n    const tenureSelect = document.getElementById('tenure');\r\n    const currency = document.getElementById('currency').value;\r\n\r\n    tenureSelect.innerHTML = '<option value=\"\">Select Tenure<\/option>';\r\n\r\n    if (!currency || !savedCurrencies[currency]) return;\r\n\r\n    const currencyData = savedCurrencies[currency];\r\n\r\n    if (unit === 'months') {\r\n        \/\/ Only 3, 6, 9 months\r\n        [3, 6, 9].forEach(function(m) {\r\n            const option = document.createElement('option');\r\n            option.value = m;\r\n            option.textContent = m;\r\n            tenureSelect.appendChild(option);\r\n        });\r\n    } else if (unit === 'years') {\r\n        const maxYears = currencyData.years.max;\r\n        for (let y = 1; y <= maxYears; y++) {\r\n            const option = document.createElement('option');\r\n            option.value = y;\r\n            option.textContent = y;\r\n            tenureSelect.appendChild(option);\r\n        }\r\n    }\r\n}\r\n\r\n\r\n        \r\n        function calculateInterest() {\r\n            const principalInput = document.getElementById('principal');\r\n            const tenureSelect = document.getElementById('tenure');\r\n            const unit = document.getElementById('tenure_unit').value;\r\n            const currencySelect = document.getElementById('currency');\r\n            const selectedOption = currencySelect.options[currencySelect.selectedIndex];\r\n            \r\n            \/\/ Get symbol info - either image or text\r\n            const symbolImageUrl = selectedOption.getAttribute('data-symbol-image');\r\n            const textSymbol = selectedOption.getAttribute('data-symbol') || '';\r\n            \r\n            const currency = currencySelect.value;\r\n            const principal = getRawNumber(principalInput.value);\r\n            const tenure = parseInt(tenureSelect.value);\r\n            \r\n            if (!currency || !unit || isNaN(principal) || isNaN(tenure)) {\r\n                document.getElementById('result').innerHTML = '<span class=\"min25erroR\">Please fill in all fields correctly.<\/span>';\r\n                return;\r\n            }\r\n            \r\n            if (principal < minPrincipal) {\r\n                document.getElementById('result').innerHTML = `<span class=\"min25erroR\">The minimum principal amount should be ${new Intl.NumberFormat('en-US').format(minPrincipal)}.<\/span>`;\r\n                return;\r\n            }\r\n            \r\n            if (principal > maxPrincipal) {\r\n                document.getElementById('result').innerHTML = `<span class=\"min25erroR\">The maximum principal amount should be ${new Intl.NumberFormat('en-US').format(maxPrincipal)}.<\/span>`;\r\n                return;\r\n            }\r\n            \r\n            const rate = getRate(currency, unit, tenure);\r\n            let time;\r\n            switch (unit) {\r\n                case 'weeks':\r\n                    time = tenure \/ 52;\r\n                    break;\r\n                case 'months':\r\n                    time = tenure \/ 12;\r\n                    break;\r\n                case 'years':\r\n                    time = tenure;\r\n                    break;\r\n                default:\r\n                    time = 0;\r\n            }\r\n            \r\n            const interestEarned = principal * (rate \/ 100) * time;\r\n            const totalAmount = principal + interestEarned;\r\n            \r\n            const formattedAmount = new Intl.NumberFormat('en-US', {\r\n                minimumFractionDigits: 0,\r\n                maximumFractionDigits: 0\r\n            }).format(totalAmount);\r\n            \r\n            const formattedPrincipal = new Intl.NumberFormat('en-US', {\r\n                minimumFractionDigits: 0,\r\n                maximumFractionDigits: 0\r\n            }).format(principal);\r\n            \r\n            const formattedInterest = new Intl.NumberFormat('en-US', {\r\n                minimumFractionDigits: 0,\r\n                maximumFractionDigits: 0\r\n            }).format(interestEarned);\r\n            \r\n            \/\/ Create symbol HTML based on available image or text fallback\r\n            let symbolHtml = '';\r\n            if (symbolImageUrl) {\r\n                symbolHtml = `<img src=\"${symbolImageUrl}\" alt=\"${currency}\" style=\"max-width: 25px; max-height: 25px; vertical-align: middle; margin-right: 3px;\">`;\r\n            } else {\r\n                symbolHtml = textSymbol;\r\n            }\r\n            \r\n            document.getElementById('result').innerHTML = `\r\n                <span class=\"totalamounT_tittle\">Total Amount including Interest<\/span>\r\n                <strong class=\"totalamounT\">${symbolHtml}${formattedAmount}<\/strong>\r\n                <p style=\"text-align:center; font-size: 16px; margin-top: 10px;\">\r\n                    at <span class=\"intrst_rateS\"> ${rate}% <\/span> interest rate for ${tenure} ${unit}\r\n                <\/p>\r\n                <hr \/>\r\n                <div class=\"container savingroW\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-6\">\r\n                            <strong>Principal Amount<\/strong> ${symbolHtml}${formattedPrincipal}<br>\r\n                        <\/div>\r\n                        <div class=\"col-6\">\r\n                            <strong>Interest Earned<\/strong> ${symbolHtml}${formattedInterest}\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>`;\r\n                \r\n            updateChart(principal, interestEarned);\r\n        }\r\n        \r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            const tenureSelect = document.getElementById('tenure');\r\n            const unitSelect = document.getElementById('tenure_unit');\r\n            const errorDiv = document.getElementById('tenure-error');\r\n            const principalInput = document.getElementById('principal');\r\n            const principalSlider = document.getElementById('principal-slider');\r\n            const principalDisplay = document.getElementById('principal-display');\r\n            const currencySelect = document.getElementById('currency');\r\n            const symbolText = document.getElementById('currency-symbol');\r\n            const symbolImage = document.getElementById('currency-symbol-image');\r\n            \r\n            function updatePrincipalDisplay(value) {\r\n                const formatted = new Intl.NumberFormat('en-US').format(value);\r\n                principalDisplay.textContent = formatted;\r\n            }\r\n            \r\n            \/\/ Update when input changes\r\n            principalInput.addEventListener('input', () => {\r\n                const raw = principalInput.value.replace(\/[^0-9]\/g, '');\r\n                if (raw !== '') updatePrincipalDisplay(raw);\r\n            });\r\n            \r\n            \/\/ Update when slider changes\r\n            principalSlider.addEventListener('input', () => {\r\n                principalInput.value = new Intl.NumberFormat('en-US').format(principalSlider.value);\r\n                updatePrincipalDisplay(principalSlider.value);\r\n            });\r\n            \r\n            \/\/ Update tenure dropdown when unit changes\r\n            unitSelect.addEventListener('change', populateTenureDropdown);\r\n            \r\n            principalInput.addEventListener('input', function() {\r\n                const num = getRawNumber(this.value);\r\n                if (!isNaN(num)) {\r\n                    principalSlider.value = num;\r\n                }\r\n            });\r\n            \r\n            principalSlider.addEventListener('input', function() {\r\n                principalInput.value = new Intl.NumberFormat('en-US').format(this.value);\r\n            });\r\n            \r\n            \/\/ Handle currency change and update symbol\r\n            currencySelect.addEventListener('change', function() {\r\n                const selectedOption = this.options[this.selectedIndex];\r\n                const symbolImageUrl = selectedOption.getAttribute('data-symbol-image');\r\n                const textSymbol = selectedOption.getAttribute('data-symbol') || '$';\r\n                \r\n                \/\/ Update display based on whether we have an image or not\r\n                if (symbolImageUrl) {\r\n                    symbolText.style.display = 'none';\r\n                    symbolImage.src = symbolImageUrl;\r\n                    symbolImage.style.display = 'inline-block';\r\n                } else {\r\n                    symbolImage.style.display = 'none';\r\n                    symbolText.style.display = 'inline-block';\r\n                    symbolText.textContent = textSymbol;\r\n                }\r\n                \r\n                \/\/ Update tenure dropdown when currency changes\r\n                populateTenureDropdown();\r\n            });\r\n            \r\n            \/\/ Set initial currency symbol\r\n            if (currencySelect.selectedIndex > 0) {\r\n                const selectedOption = currencySelect.options[currencySelect.selectedIndex];\r\n                const symbolImageUrl = selectedOption.getAttribute('data-symbol-image');\r\n                const textSymbol = selectedOption.getAttribute('data-symbol') || '$';\r\n                \r\n                if (symbolImageUrl) {\r\n                    symbolText.style.display = 'none';\r\n                    symbolImage.src = symbolImageUrl;\r\n                    symbolImage.style.display = 'inline-block';\r\n                } else {\r\n                    symbolImage.style.display = 'none';\r\n                    symbolText.textContent = textSymbol;\r\n                }\r\n            }\r\n        });\r\n        \r\n        jQuery(document).ready(function($) {\r\n            \/\/ Show the default result section initially\r\n            $('.default_result').show();\r\n            \r\n            \/\/ Modify your calculateInterest function or hook into its trigger\r\n            $('button').on('click', function() {\r\n                \/\/ Perform your calculations here...\r\n                \/\/ Then hide the default result when user clicks calculate\r\n                $('.default_result').hide();\r\n            });\r\n        });\r\n        \r\n        \/**chart start*\/\r\n        const ctx = document.getElementById('myHalfDoughnutChart').getContext('2d');\r\n        let myHalfDoughnutChart = new Chart(ctx, {\r\n            type: 'doughnut',\r\n            data: {\r\n                labels: ['Principal Amount', 'Interest Earned'],\r\n                datasets: [{\r\n                    data: [100, 0],\r\n                    backgroundColor: ['#1C245A', '#106BB2'],\r\n                    borderWidth: 0\r\n                }]\r\n            },\r\n            options: {\r\n                responsive: true,\r\n                cutout: '70%', \/\/ inner radius\r\n                rotation: -90, \/\/ start angle\r\n                circumference: 180, \/\/ half circle\r\n                plugins: {\r\n                    legend: {\r\n                        display: true,\r\n                        position: 'bottom'\r\n                    }\r\n                }\r\n            }\r\n        });\r\n        \/**chart end*\/\r\n        \r\n        function updateChart(principal, interest) {\r\n            myHalfDoughnutChart.data.datasets[0].data = [principal, interest];\r\n            myHalfDoughnutChart.update();\r\n        }\r\n    <\/script>\r\n    [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>[vc_row tm_bgimagefixed=&#8221;&#8221; css=&#8221;.vc_custom_1765447549181{padding-top: 100px !important;padding-bottom: 200px !important;}&#8221; el_class=&#8221;calculator_visualroW&#8221;][vc_column][vc_column_text css=&#8221;.vc_custom_1747648289173{margin-bottom: 0px !important;}&#8221;][\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.iibanks.com\/caribbean\/wp-json\/wp\/v2\/pages\/10977"}],"collection":[{"href":"https:\/\/www.iibanks.com\/caribbean\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.iibanks.com\/caribbean\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.iibanks.com\/caribbean\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iibanks.com\/caribbean\/wp-json\/wp\/v2\/comments?post=10977"}],"version-history":[{"count":18,"href":"https:\/\/www.iibanks.com\/caribbean\/wp-json\/wp\/v2\/pages\/10977\/revisions"}],"predecessor-version":[{"id":11710,"href":"https:\/\/www.iibanks.com\/caribbean\/wp-json\/wp\/v2\/pages\/10977\/revisions\/11710"}],"wp:attachment":[{"href":"https:\/\/www.iibanks.com\/caribbean\/wp-json\/wp\/v2\/media?parent=10977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}