{"id":4681,"date":"2026-04-09T09:44:53","date_gmt":"2026-04-09T09:44:53","guid":{"rendered":"https:\/\/fisdemoprojects.com\/espertamanagement\/?page_id=4681"},"modified":"2026-04-09T09:51:25","modified_gmt":"2026-04-09T09:51:25","slug":"vat-calculator","status":"publish","type":"page","link":"https:\/\/fisdemoprojects.com\/espertamanagement\/vat-calculator\/","title":{"rendered":"VAT Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4681\" class=\"elementor elementor-4681\">\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-vat-wrapper\">\r\n    <style>\r\n        .uk-vat-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        .vat-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        .vat-header {\r\n            background: #003da6;\r\n            padding: 20px 24px;\r\n            color: white;\r\n        }\r\n        \r\n        .vat-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        .vat-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        .form-field select {\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        .form-field select: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        .radio-group {\r\n            display: flex;\r\n            gap: 24px;\r\n            align-items: center;\r\n            background: white;\r\n            padding: 8px 16px;\r\n            border-radius: 8px;\r\n            border: 1px solid #cbd5e1;\r\n            min-height: 42px;\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        .radio-group label {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            font-weight: 500;\r\n            font-size: 14px;\r\n            text-transform: none;\r\n            margin-bottom: 0;\r\n        }\r\n        \r\n        .radio-group input {\r\n            width: 16px;\r\n            height: 16px;\r\n            margin: 0;\r\n        }\r\n        \r\n        .btn-group {\r\n            display: flex;\r\n            gap: 12px;\r\n            margin-top: 8px;\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 Tables *\/\r\n        .results-section {\r\n            padding: 24px;\r\n        }\r\n        \r\n        .tables-wrapper {\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        .table-box {\r\n            border: 1px solid #e2e8f0;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            background: white;\r\n        }\r\n        \r\n        .table-header {\r\n            background: #003da6;\r\n            color: white;\r\n            padding: 12px 20px;\r\n            font-weight: 700;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        .vat-table {\r\n            width: 100%;\r\n        }\r\n        \r\n        .vat-table td {\r\n            padding: 14px 20px;\r\n            border-bottom: 1px solid #f1f5f9;\r\n        }\r\n        \r\n        .vat-table td:first-child {\r\n            font-weight: 600;\r\n            color: #334155;\r\n        }\r\n        \r\n        .vat-table td:last-child {\r\n            text-align: right;\r\n            font-family: monospace;\r\n            font-weight: 700;\r\n            font-size: 16px;\r\n            color: #003da6;\r\n        }\r\n        \r\n        .total-row td {\r\n            background: #f0fdf4;\r\n            font-weight: 800;\r\n        }\r\n        \r\n        .total-row td:last-child {\r\n            color: #166534;\r\n            font-size: 18px;\r\n        }\r\n        \r\n        .vat-row td:last-child {\r\n            color: #1e3a8a;\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        @media (max-width: 768px) {\r\n            .tables-wrapper {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            .form-section {\r\n                padding: 20px;\r\n            }\r\n            .results-section {\r\n                padding: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- VAT Calculator -->\r\n    <div class=\"vat-card\">\r\n        <div class=\"vat-header\">\r\n            <h2>\ud83e\uddfe VAT Calculator<\/h2>\r\n            <p>Add VAT \u2022 Remove VAT \u2022 Net \u2022 Gross \u2022 VAT Amount<\/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 (\u00a3)<\/label>\r\n                    <input type=\"number\" id=\"amountInput\" value=\"1000\" step=\"0.01\" placeholder=\"Enter amount\">\r\n                <\/div>\r\n                \r\n                <div class=\"form-field\">\r\n                    <label>\ud83d\udcca VAT Rate<\/label>\r\n                    <select id=\"vatRate\">\r\n                        <option value=\"20\">Standard Rate (20%)<\/option>\r\n                        <option value=\"5\">Reduced Rate (5%)<\/option>\r\n                        <option value=\"0\">Zero Rate (0%)<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"form-row\">\r\n                <div class=\"form-field\">\r\n                    <label>\ud83d\udd04 Calculation Type<\/label>\r\n                    <div class=\"radio-group\">\r\n                        <label>\r\n                            <input type=\"radio\" name=\"calcType\" value=\"add\" checked> Add VAT (Net \u2192 Gross)\r\n                        <\/label>\r\n                        <label>\r\n                            <input type=\"radio\" name=\"calcType\" value=\"remove\"> Remove VAT (Gross \u2192 Net)\r\n                        <\/label>\r\n                    <\/div>\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=\"tables-wrapper\">\r\n                <!-- Results Panel 1 -->\r\n                <div class=\"table-box\">\r\n                    <div class=\"table-header\">\ud83d\udccb VAT BREAKDOWN<\/div>\r\n                    <table class=\"vat-table\">\r\n                        <tr>\r\n                            <td>Net amount (excl. VAT)<\/td>\r\n                            <td id=\"netAmount\">\u00a30.00<\/td>\r\n                        <\/tr>\r\n                        <tr class=\"vat-row\">\r\n                            <td>VAT amount<\/td>\r\n                            <td id=\"vatAmount\">\u00a30.00<\/td>\r\n                        <\/tr>\r\n                        <tr class=\"total-row\">\r\n                            <td>Gross amount (incl. VAT)<\/td>\r\n                            <td id=\"grossAmount\">\u00a30.00<\/td>\r\n                        <\/tr>\r\n                    <\/table>\r\n                <\/div>\r\n                \r\n                <!-- Summary Panel -->\r\n                <div class=\"table-box\">\r\n                    <div class=\"table-header\">\ud83d\udcca SUMMARY<\/div>\r\n                    <table class=\"vat-table\">\r\n                        <tr>\r\n                            <td>VAT Rate Applied<\/td>\r\n                            <td id=\"rateDisplay\">20%<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>Calculation Mode<\/td>\r\n                            <td id=\"modeDisplay\">Add VAT<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>Input Amount<\/td>\r\n                            <td id=\"inputDisplay\">\u00a31,000.00<\/td>\r\n                        <\/tr>\r\n                    <\/table>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"info-note\">\r\n                <h4>\ud83d\udccb UK VAT Information (2025-2026)<\/h4>\r\n                <p><strong>Standard Rate (20%):<\/strong> Most goods and services<\/p>\r\n                <p><strong>Reduced Rate (5%):<\/strong> Some services like home energy, children's car seats<\/p>\r\n                <p><strong>Zero Rate (0%):<\/strong> Food, books, children's clothes, public transport<\/p>\r\n                <p id=\"formulaInfo\" style=\"background: #e6f0fa; padding: 8px 12px; border-radius: 8px; margin-top: 10px;\">\ud83d\udca1 Formula: When adding VAT: Gross = Net \u00d7 (1 + Rate) | When removing VAT: Net = Gross \u00f7 (1 + Rate)<\/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 amountInput = document.getElementById('amountInput');\r\n            const vatRateSelect = document.getElementById('vatRate');\r\n            const calcTypeRadios = document.querySelectorAll('input[name=\"calcType\"]');\r\n            const calculateBtn = document.getElementById('calculateBtn');\r\n            const resetBtn = document.getElementById('resetBtn');\r\n            \r\n            \/\/ Display elements\r\n            const netAmountSpan = document.getElementById('netAmount');\r\n            const vatAmountSpan = document.getElementById('vatAmount');\r\n            const grossAmountSpan = document.getElementById('grossAmount');\r\n            const rateDisplaySpan = document.getElementById('rateDisplay');\r\n            const modeDisplaySpan = document.getElementById('modeDisplay');\r\n            const inputDisplaySpan = document.getElementById('inputDisplay');\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 updateCalculator() {\r\n                let amount = parseFloat(amountInput.value) || 0;\r\n                let vatRatePercent = parseFloat(vatRateSelect.value) || 0;\r\n                let isAddingVAT = document.querySelector('input[name=\"calcType\"]:checked').value === 'add';\r\n                let vatRateDecimal = vatRatePercent \/ 100;\r\n                \r\n                let net = 0, vat = 0, gross = 0;\r\n                \r\n                if (isAddingVAT) {\r\n                    \/\/ Input is NET amount, calculate VAT and GROSS\r\n                    net = amount;\r\n                    vat = net * vatRateDecimal;\r\n                    gross = net + vat;\r\n                } else {\r\n                    \/\/ Input is GROSS amount, calculate NET and VAT\r\n                    gross = amount;\r\n                    net = gross \/ (1 + vatRateDecimal);\r\n                    vat = gross - net;\r\n                }\r\n                \r\n                \/\/ Update displays\r\n                netAmountSpan.textContent = formatMoney(net);\r\n                vatAmountSpan.textContent = formatMoney(vat);\r\n                grossAmountSpan.textContent = formatMoney(gross);\r\n                rateDisplaySpan.textContent = vatRatePercent + '%';\r\n                modeDisplaySpan.textContent = isAddingVAT ? 'Add VAT (Net \u2192 Gross)' : 'Remove VAT (Gross \u2192 Net)';\r\n                inputDisplaySpan.textContent = formatMoney(amount);\r\n                \r\n                \/\/ Update formula info\r\n                if (isAddingVAT) {\r\n                    formulaInfo.innerHTML = `\ud83d\udca1 Formula: Gross = Net \u00d7 (1 + ${vatRatePercent}%)<br>\r\n                    \u2192 \u00a3${formatNumber(net)} \u00d7 ${(1 + vatRateDecimal).toFixed(2)} = \u00a3${formatNumber(gross)}<br>\r\n                    \u2192 VAT = Net \u00d7 ${vatRatePercent}% = \u00a3${formatNumber(vat)}`;\r\n                } else {\r\n                    formulaInfo.innerHTML = `\ud83d\udca1 Formula: Net = Gross \u00f7 (1 + ${vatRatePercent}%)<br>\r\n                    \u2192 \u00a3${formatNumber(gross)} \u00f7 ${(1 + vatRateDecimal).toFixed(2)} = \u00a3${formatNumber(net)}<br>\r\n                    \u2192 VAT = Gross - Net = \u00a3${formatNumber(vat)}`;\r\n                }\r\n            }\r\n            \r\n            function resetForm() {\r\n                amountInput.value = '1000';\r\n                vatRateSelect.value = '20';\r\n                document.querySelector('input[name=\"calcType\"][value=\"add\"]').checked = true;\r\n                updateCalculator();\r\n            }\r\n            \r\n            \/\/ Event listeners\r\n            calculateBtn.addEventListener('click', updateCalculator);\r\n            resetBtn.addEventListener('click', resetForm);\r\n            amountInput.addEventListener('input', updateCalculator);\r\n            vatRateSelect.addEventListener('change', updateCalculator);\r\n            calcTypeRadios.forEach(radio => {\r\n                radio.addEventListener('change', updateCalculator);\r\n            });\r\n            \r\n            \/\/ Initialize\r\n            updateCalculator();\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>\ud83e\uddfe VAT Calculator Add VAT \u2022 Remove VAT \u2022 Net \u2022 Gross \u2022 VAT Amount \ud83d\udcb0 Amount (\u00a3) \ud83d\udcca VAT Rate Standard Rate (20%)Reduced Rate (5%)Zero Rate (0%) \ud83d\udd04 Calculation Type Add VAT (Net \u2192 Gross) Remove VAT (Gross \u2192 Net) \u27f3 Calculate Reset \ud83d\udccb VAT BREAKDOWN Net amount (excl. VAT) \u00a30.00 VAT amount \u00a30.00 [&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-4681","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages\/4681","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=4681"}],"version-history":[{"count":10,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages\/4681\/revisions"}],"predecessor-version":[{"id":4691,"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/pages\/4681\/revisions\/4691"}],"wp:attachment":[{"href":"https:\/\/fisdemoprojects.com\/espertamanagement\/wp-json\/wp\/v2\/media?parent=4681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}