{"id":778,"date":"2026-07-29T18:31:20","date_gmt":"2026-07-29T18:31:20","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=778"},"modified":"2026-07-31T17:49:48","modified_gmt":"2026-07-31T17:49:48","slug":"778-2","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/778-2\/","title":{"rendered":"Student Percentage Calculator"},"content":{"rendered":"\n<div class=\"opt-wrapper\" id=\"opt-app-root\" aria-label=\"High-Performance Percentage Calculator Suite\">\n    <div class=\"opt-container\">\n        <!-- Header & Quick Actions -->\n        <header class=\"opt-header\">\n            <div>\n                <h2>High-Performance Calculation Engine<\/h2>\n                <p>Optimized with debounce, requestAnimationFrame rendering, memory cleanup, and zero layout thrashing.<\/p>\n            <\/div>\n            <div class=\"opt-header-actions\">\n                <button type=\"button\" id=\"opt-btn-undo\" class=\"opt-btn opt-btn-secondary\" title=\"Undo (Ctrl+Z)\" disabled>\n                    <svg class=\"opt-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 7v6h6\"\/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"\/><\/svg>\n                    <span>Undo<\/span>\n                <\/button>\n                <button type=\"button\" id=\"opt-btn-redo\" class=\"opt-btn opt-btn-secondary\" title=\"Redo (Ctrl+Y)\" disabled>\n                    <svg class=\"opt-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 7v6h-6\"\/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7\"\/><\/svg>\n                    <span>Redo<\/span>\n                <\/button>\n                <button type=\"button\" id=\"opt-btn-print\" class=\"opt-btn opt-btn-secondary\" title=\"Print A4 Report\">\n                    <svg class=\"opt-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"\/><\/svg>\n                    <span>Print<\/span>\n                <\/button>\n                <button type=\"button\" id=\"opt-btn-reset\" class=\"opt-btn opt-btn-danger\" title=\"Reset All Fields\">Reset All<\/button>\n            <\/div>\n        <\/header>\n\n        <!-- Presets & Favorites Bar -->\n        <section class=\"opt-bar-section\" aria-label=\"Presets and Favorites\">\n            <div class=\"opt-presets-group\">\n                <span class=\"opt-label-mini\">Quick Presets:<\/span>\n                <button type=\"button\" class=\"opt-preset-chip\" data-preset=\"standard-exam\">Standard Exam (500)<\/button>\n                <button type=\"button\" class=\"opt-preset-chip\" data-preset=\"retail-sale\">Retail Sale (20% Off)<\/button>\n                <button type=\"button\" class=\"opt-preset-chip\" data-preset=\"tax-invoice\">Standard Tax (18%)<\/button>\n            <\/div>\n            <div class=\"opt-fav-group\">\n                <button type=\"button\" id=\"opt-btn-favorite\" class=\"opt-fav-btn\" aria-pressed=\"false\" title=\"Star current configuration\">\n                    <svg class=\"opt-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n                    <span>Favorite<\/span>\n                <\/button>\n            <\/div>\n        <\/section>\n\n        <!-- Main Workspace Grid -->\n        <div class=\"opt-main-grid\">\n            \n            <!-- Core Calculator Form -->\n            <div class=\"opt-card\">\n                <div class=\"opt-card-header\">\n                    <h3>Debounced Calculation Engine<\/h3>\n                    <p id=\"opt-status-indicator\" class=\"opt-status-live\">\u25cf Memory Optimized (Cache Active)<\/p>\n                <\/div>\n                \n                <form id=\"opt-calc-form\" class=\"opt-form\" novalidate>\n                    <div class=\"opt-form-group\">\n                        <label for=\"opt-val-a\">Primary Value \/ Initial Amount<\/label>\n                        <input type=\"number\" id=\"opt-val-a\" step=\"any\" placeholder=\"e.g., 450\" required aria-describedby=\"opt-err-a\">\n                        <span id=\"opt-err-a\" class=\"opt-error-msg\" aria-live=\"polite\"><\/span>\n                    <\/div>\n\n                    <div class=\"opt-form-group\">\n                        <label for=\"opt-val-b\">Secondary Value \/ Percentage Rate<\/label>\n                        <input type=\"number\" id=\"opt-val-b\" step=\"any\" placeholder=\"e.g., 18\" required aria-describedby=\"opt-err-b\">\n                        <span id=\"opt-err-b\" class=\"opt-error-msg\" aria-live=\"polite\"><\/span>\n                    <\/div>\n\n                    <div class=\"opt-form-group\">\n                        <label for=\"opt-calc-mode\">Calculation Mode<\/label>\n                        <select id=\"opt-calc-mode\" class=\"opt-select\">\n                            <option value=\"percentage-of\">What is X% of Y?<\/option>\n                            <option value=\"percentage-increase\">Increase Value by X%<\/option>\n                            <option value=\"percentage-decrease\">Decrease Value by X%<\/option>\n                            <option value=\"percentage-diff\">Percentage Difference between X and Y<\/option>\n                        <\/select>\n                    <\/div>\n\n                    <div class=\"opt-result-box\" aria-live=\"polite\">\n                        <div class=\"opt-res-label\">Computed Result<\/div>\n                        <div id=\"opt-res-value\" class=\"opt-res-val\">0.00<\/div>\n                        <div id=\"opt-res-breakdown\" class=\"opt-analysis-text\">Enter values above to calculate instantly.<\/div>\n                    <\/div>\n                <\/form>\n            <\/div>\n\n            <!-- Custom Formula & History Tab Section -->\n            <div class=\"opt-card\">\n                <div class=\"opt-tabs\" role=\"tablist\">\n                    <button type=\"button\" class=\"opt-tab-btn opt-active\" role=\"tab\" aria-selected=\"true\" data-target=\"opt-pane-history\">Recent History<\/button>\n                    <button type=\"button\" class=\"opt-tab-btn\" role=\"tab\" aria-selected=\"false\" data-target=\"opt-pane-formula\">Custom Formula<\/button>\n                <\/div>\n\n                <!-- History Pane -->\n                <div id=\"opt-pane-history\" class=\"opt-tab-pane opt-show\" role=\"tabpanel\">\n                    <div class=\"opt-history-header\">\n                        <span>Recent Calculations (Virtualized Document Fragment)<\/span>\n                        <div class=\"opt-history-actions\">\n                            <button type=\"button\" id=\"opt-btn-export-json\" class=\"opt-text-btn\" title=\"Export History as JSON\">Export JSON<\/button>\n                            <span class=\"opt-sep\">|<\/span>\n                            <button type=\"button\" id=\"opt-btn-clear-history\" class=\"opt-text-btn\">Clear History<\/button>\n                        <\/div>\n                    <\/div>\n                    <div id=\"opt-history-list\" class=\"opt-history-list\" tabindex=\"0\" aria-label=\"Calculation history list\">\n                        <!-- Populated dynamically via DocumentFragment -->\n                    <\/div>\n                <\/div>\n\n                <!-- Custom Formula Pane -->\n                <div id=\"opt-pane-formula\" class=\"opt-tab-pane\" role=\"tabpanel\">\n                    <div class=\"opt-form-group\">\n                        <label for=\"opt-formula-input\">Custom Expression (use <strong>a<\/strong> and <strong>b<\/strong>)<\/label>\n                        <input type=\"text\" id=\"opt-formula-input\" placeholder=\"e.g., (a * b) \/ 100 + a\" value=\"(a * b) \/ 100\">\n                    <\/div>\n                    <div class=\"opt-result-box\" style=\"margin-top: 14px;\">\n                        <div class=\"opt-res-label\">Formula Output<\/div>\n                        <div id=\"opt-res-formula\" class=\"opt-res-val\">0.00<\/div>\n                        <div id=\"opt-formula-status\" class=\"opt-analysis-text\">Formula evaluated successfully.<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Responsive Visual Breakdown Chart Card -->\n            <div class=\"opt-card opt-span-full\">\n                <div class=\"opt-card-header\">\n                    <h3>Responsive Visual Distribution Chart<\/h3>\n                    <p>GPU-accelerated transforms and layout-thrashing prevention active.<\/p>\n                <\/div>\n                <div class=\"opt-chart-container\" aria-label=\"Responsive chart visualization\">\n                    <div class=\"opt-chart-track\">\n                        <div id=\"opt-chart-segment-a\" class=\"opt-chart-bar opt-bg-primary\" style=\"width: 50%;\">\n                            <span id=\"opt-chart-lbl-a\">Value A (50%)<\/span>\n                        <\/div>\n                        <div id=\"opt-chart-segment-b\" class=\"opt-chart-bar opt-bg-secondary\" style=\"width: 50%;\">\n                            <span id=\"opt-chart-lbl-b\">Result (50%)<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n        <!-- Keyboard Shortcuts Legend Footer -->\n        <footer class=\"opt-footer-shortcuts\">\n            <span><strong>Shortcuts:<\/strong> <kbd>Ctrl+Z<\/kbd> Undo | <kbd>Ctrl+Y<\/kbd> Redo | <kbd>Ctrl+Shift+R<\/kbd> Reset All | <kbd>Ctrl+S<\/kbd> Save State<\/span>\n        <\/footer>\n    <\/div>\n<\/div>\n\n<style>\n    \/* Scoped High-Performance Module Styles *\/\n    .opt-wrapper {\n        --opt-bg: #ffffff;\n        --opt-surface: #f8fafc;\n        --opt-card: #ffffff;\n        --opt-text: #0f172a;\n        --opt-muted: #64748b;\n        --opt-primary: #2563eb;\n        --opt-primary-hover: #1d4ed8;\n        --opt-danger: #ef4444;\n        --opt-success: #10b981;\n        --opt-border: #e2e8f0;\n        --opt-radius: 12px;\n        --opt-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);\n\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n        color: var(--opt-text);\n        background-color: var(--opt-surface);\n        padding: 20px 12px;\n        box-sizing: border-box;\n        border-radius: 16px;\n        margin: 20px 0;\n        width: 100%;\n        max-width: 980px;\n        margin-left: auto;\n        margin-right: auto;\n        contain: content;\n    }\n\n    .opt-wrapper *, .opt-wrapper *::before, .opt-wrapper *::after {\n        box-sizing: border-box;\n    }\n\n    .opt-container {\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n    }\n\n    \/* Header *\/\n    .opt-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background: var(--opt-card);\n        padding: 20px;\n        border-radius: var(--opt-radius);\n        border: 1px solid var(--opt-border);\n        box-shadow: var(--opt-shadow);\n    }\n\n    .opt-header h2 {\n        margin: 0 0 4px 0;\n        font-size: 1.35rem;\n        font-weight: 700;\n    }\n\n    .opt-header p {\n        margin: 0;\n        font-size: 0.88rem;\n        color: var(--opt-muted);\n    }\n\n    .opt-header-actions {\n        display: flex;\n        gap: 8px;\n        flex-wrap: wrap;\n    }\n\n    \/* Presets & Favorites Bar *\/\n    .opt-bar-section {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background: var(--opt-card);\n        padding: 12px 20px;\n        border-radius: var(--opt-radius);\n        border: 1px solid var(--opt-border);\n        box-shadow: var(--opt-shadow);\n        flex-wrap: wrap;\n        gap: 12px;\n    }\n\n    .opt-presets-group {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        flex-wrap: wrap;\n    }\n\n    .opt-label-mini {\n        font-size: 0.78rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: var(--opt-muted);\n    }\n\n    .opt-preset-chip {\n        background: var(--opt-surface);\n        border: 1px solid var(--opt-border);\n        padding: 6px 12px;\n        border-radius: 20px;\n        font-size: 0.82rem;\n        font-weight: 600;\n        color: var(--opt-text);\n        cursor: pointer;\n        transition: all 0.2s;\n    }\n    .opt-preset-chip:hover {\n        background: var(--opt-primary);\n        color: #fff;\n        border-color: var(--opt-primary);\n    }\n\n    .opt-fav-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        background: var(--opt-surface);\n        border: 1px solid var(--opt-border);\n        padding: 6px 12px;\n        border-radius: 20px;\n        font-size: 0.82rem;\n        font-weight: 600;\n        color: var(--opt-muted);\n        cursor: pointer;\n        transition: all 0.2s;\n    }\n    .opt-fav-btn.opt-starred {\n        background: #fef3c7;\n        color: #d97706;\n        border-color: #fde68a;\n    }\n    .opt-fav-btn.opt-starred .opt-icon {\n        fill: #d97706;\n    }\n\n    \/* Main Grid *\/\n    .opt-main-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 20px;\n    }\n\n    .opt-span-full {\n        grid-column: span 2;\n    }\n\n    .opt-card {\n        background: var(--opt-card);\n        border: 1px solid var(--opt-border);\n        border-radius: var(--opt-radius);\n        padding: 20px;\n        box-shadow: var(--opt-shadow);\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .opt-card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    .opt-card-header h3 {\n        margin: 0;\n        font-size: 1.1rem;\n        font-weight: 600;\n    }\n\n    .opt-status-live {\n        font-size: 0.75rem;\n        font-weight: 700;\n        color: var(--opt-success);\n    }\n\n    \/* Form & Inputs *\/\n    .opt-form {\n        display: flex;\n        flex-direction: column;\n        gap: 14px;\n    }\n\n    .opt-form-group {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    }\n\n    .opt-form-group label {\n        font-size: 0.82rem;\n        font-weight: 600;\n        color: var(--opt-muted);\n    }\n\n    .opt-form-group input, .opt-select {\n        width: 100%;\n        padding: 9px 12px;\n        background: var(--opt-surface);\n        border: 1px solid var(--opt-border);\n        border-radius: 8px;\n        color: var(--opt-text);\n        font-size: 0.92rem;\n        transition: border-color 0.2s, box-shadow 0.2s;\n    }\n\n    .opt-form-group input:focus, .opt-select:focus {\n        outline: none;\n        border-color: var(--opt-primary);\n        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n        background: var(--opt-bg);\n    }\n\n    .opt-error-msg {\n        font-size: 0.75rem;\n        color: var(--opt-danger);\n        min-height: 12px;\n    }\n\n    \/* Tabs Inside Card *\/\n    .opt-tabs {\n        display: flex;\n        background: var(--opt-surface);\n        padding: 4px;\n        border-radius: 8px;\n        gap: 4px;\n    }\n\n    .opt-tab-btn {\n        flex: 1;\n        padding: 8px 12px;\n        background: transparent;\n        border: none;\n        border-radius: 6px;\n        font-size: 0.85rem;\n        font-weight: 600;\n        color: var(--opt-muted);\n        cursor: pointer;\n        transition: all 0.2s;\n        text-align: center;\n    }\n    .opt-tab-btn.opt-active {\n        background: var(--opt-card);\n        color: var(--opt-text);\n        box-shadow: var(--opt-shadow);\n    }\n\n    .opt-tab-pane {\n        display: none;\n        flex-direction: column;\n        gap: 12px;\n        flex: 1;\n    }\n    .opt-tab-pane.opt-show {\n        display: flex;\n    }\n\n    .opt-history-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        font-size: 0.8rem;\n        font-weight: 700;\n        color: var(--opt-muted);\n        flex-wrap: wrap;\n        gap: 4px;\n    }\n\n    .opt-history-actions {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n    }\n\n    .opt-sep {\n        color: var(--opt-border);\n    }\n\n    .opt-text-btn {\n        background: transparent;\n        border: none;\n        color: var(--opt-primary);\n        font-size: 0.8rem;\n        font-weight: 600;\n        cursor: pointer;\n        padding: 0;\n    }\n    .opt-text-btn:hover {\n        text-decoration: underline;\n    }\n\n    .opt-history-list {\n        max-height: 180px;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        padding-right: 4px;\n    }\n\n    .opt-history-item {\n        background: var(--opt-surface);\n        border: 1px solid var(--opt-border);\n        padding: 8px 10px;\n        border-radius: 6px;\n        font-size: 0.82rem;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    \/* Result Box *\/\n    .opt-result-box {\n        background: var(--opt-surface);\n        border: 1px solid var(--opt-border);\n        padding: 14px;\n        border-radius: 8px;\n        margin-top: auto;\n    }\n\n    .opt-res-label {\n        font-size: 0.75rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: var(--opt-muted);\n        margin-bottom: 4px;\n    }\n\n    .opt-res-val {\n        font-size: 1.3rem;\n        font-weight: 800;\n        color: var(--opt-text);\n    }\n\n    .opt-analysis-text {\n        font-size: 0.82rem;\n        font-weight: 600;\n        color: var(--opt-primary);\n        margin-top: 6px;\n    }\n\n    \/* Chart Track *\/\n    .opt-chart-container {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n    }\n\n    .opt-chart-track {\n        height: 28px;\n        background: var(--opt-surface);\n        border: 1px solid var(--opt-border);\n        border-radius: 6px;\n        display: flex;\n        overflow: hidden;\n        transform: translateZ(0);\n    }\n\n    .opt-chart-bar {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 8px;\n        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n        white-space: nowrap;\n        overflow: hidden;\n        will-change: width;\n    }\n    .opt-chart-bar span {\n        font-size: 0.72rem;\n        font-weight: 700;\n        color: #fff;\n    }\n\n    .opt-bg-primary { background: var(--opt-primary); }\n    .opt-bg-secondary { background: var(--opt-success); }\n\n    \/* Buttons *\/\n    .opt-btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        padding: 8px 14px;\n        border-radius: 8px;\n        font-size: 0.85rem;\n        font-weight: 600;\n        cursor: pointer;\n        border: none;\n        transition: all 0.2s;\n    }\n\n    .opt-btn-secondary {\n        background: var(--opt-surface);\n        color: var(--opt-text);\n        border: 1px solid var(--opt-border);\n    }\n    .opt-btn-secondary:hover:not(:disabled) {\n        background: var(--opt-border);\n    }\n    .opt-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n    }\n\n    .opt-btn-danger {\n        background: rgba(239, 68, 68, 0.1);\n        color: var(--opt-danger);\n        border: 1px solid rgba(239, 68, 68, 0.2);\n    }\n    .opt-btn-danger:hover {\n        background: var(--opt-danger);\n        color: #fff;\n    }\n\n    .opt-icon {\n        width: 16px;\n        height: 16px;\n        flex-shrink: 0;\n    }\n\n    .opt-footer-shortcuts {\n        text-align: center;\n        font-size: 0.78rem;\n        color: var(--opt-muted);\n    }\n\n    kbd {\n        background: var(--opt-card);\n        border: 1px solid var(--opt-border);\n        border-radius: 4px;\n        padding: 2px 5px;\n        font-family: monospace;\n        font-size: 0.75rem;\n    }\n\n    \/* Print & A4 Layout Adaptation *\/\n    @media print {\n        body {\n            background: #fff !important;\n        }\n        .opt-wrapper {\n            max-width: 100% !important;\n            margin: 0 !important;\n            padding: 0 !important;\n            box-shadow: none !important;\n            border: none !important;\n            background: #fff !important;\n        }\n        .opt-header-actions, .opt-bar-section, .opt-tabs, .opt-footer-shortcuts, .opt-text-btn {\n            display: none !important;\n        }\n        .opt-main-grid {\n            display: block !important;\n        }\n        .opt-card {\n            break-inside: avoid;\n            border: 1px solid #ccc !important;\n            box-shadow: none !important;\n            margin-bottom: 15px !important;\n        }\n        .opt-tab-pane {\n            display: flex !important;\n        }\n    }\n\n    \/* Responsive Adaptation *\/\n    @media (max-width: 768px) {\n        .opt-main-grid {\n            grid-template-columns: 1fr;\n        }\n        .opt-span-full {\n            grid-column: span 1;\n        }\n        .opt-header {\n            flex-direction: column;\n            align-items: flex-start;\n            gap: 12px;\n        }\n        .opt-bar-section {\n            flex-direction: column;\n            align-items: flex-start;\n        }\n    }\n<\/style>\n\n<script>\n    \/* Scoped High-Performance Optimized Module Script *\/\n    (function() {\n        'use strict';\n\n        const root = document.getElementById('opt-app-root');\n        if (!root) return;\n\n        \/\/ Form elements cached\n        const inputA = root.querySelector('#opt-val-a');\n        const inputB = root.querySelector('#opt-val-b');\n        const errA = root.querySelector('#opt-err-a');\n        const errB = root.querySelector('#opt-err-b');\n        const modeSelect = root.querySelector('#opt-calc-mode');\n        const resValue = root.querySelector('#opt-res-value');\n        const resBreakdown = root.querySelector('#opt-res-breakdown');\n\n        \/\/ History & State management cached\n        const historyList = root.querySelector('#opt-history-list');\n        const undoBtn = root.querySelector('#opt-btn-undo');\n        const redoBtn = root.querySelector('#opt-btn-redo');\n        const printBtn = root.querySelector('#opt-btn-print');\n        const resetBtn = root.querySelector('#opt-btn-reset');\n        const clearHistoryBtn = root.querySelector('#opt-btn-clear-history');\n        const exportJsonBtn = root.querySelector('#opt-btn-export-json');\n        const favoriteBtn = root.querySelector('#opt-btn-favorite');\n\n        \/\/ Custom Formula cached\n        const formulaInput = root.querySelector('#opt-formula-input');\n        const resFormula = root.querySelector('#opt-res-formula');\n        const formulaStatus = root.querySelector('#opt-formula-status');\n\n        \/\/ Chart segments cached\n        const chartBarA = root.querySelector('#opt-chart-segment-a');\n        const chartBarB = root.querySelector('#opt-chart-segment-b');\n        const chartLblA = root.querySelector('#opt-chart-lbl-a');\n        const chartLblB = root.querySelector('#opt-chart-lbl-b');\n\n        \/\/ Tabs setup\n        const tabBtns = root.querySelectorAll('.opt-tab-btn');\n        const tabPanes = root.querySelectorAll('.opt-tab-pane');\n\n        tabBtns.forEach(btn => {\n            btn.addEventListener('click', function() {\n                tabBtns.forEach(b => {\n                    b.classList.remove('opt-active');\n                    b.setAttribute('aria-selected', 'false');\n                });\n                tabPanes.forEach(p => p.classList.remove('opt-show'));\n                this.classList.add('opt-active');\n                this.setAttribute('aria-selected', 'true');\n                const targetPane = root.querySelector('#' + this.getAttribute('data-target'));\n                if (targetPane) targetPane.classList.add('opt-show');\n            });\n        });\n\n        let historyRecords = [];\n        let undoStack = [];\n        let redoStack = [];\n        let rafId = null;\n        let saveTimeout = null;\n\n        \/\/ Optimized LocalStorage persistence with debounced writes\n        function saveSession() {\n            if (saveTimeout) clearTimeout(saveTimeout);\n            saveTimeout = setTimeout(() => {\n                const state = {\n                    valA: inputA.value,\n                    valB: inputB.value,\n                    mode: modeSelect.value,\n                    formula: formulaInput.value,\n                    isFavorite: favoriteBtn.classList.contains('opt-starred'),\n                    history: historyRecords.slice(0, 15)\n                };\n                try {\n                    localStorage.setItem('opt_calc_session', JSON.stringify(state));\n                } catch(e) {}\n            }, 300);\n        }\n\n        \/\/ Restore Session safely\n        function restoreSession() {\n            try {\n                const saved = localStorage.getItem('opt_calc_session');\n                if (!saved) return;\n                const state = JSON.parse(saved);\n                if (state.valA !== undefined) inputA.value = state.valA;\n                if (state.valB !== undefined) inputB.value = state.valB;\n                if (state.mode !== undefined) modeSelect.value = state.mode;\n                if (state.formula !== undefined) formulaInput.value = state.formula;\n                if (state.isFavorite) {\n                    favoriteBtn.classList.add('opt-starred');\n                    favoriteBtn.setAttribute('aria-pressed', 'true');\n                }\n                if (state.history && Array.isArray(state.history)) {\n                    historyRecords = state.history;\n                    renderHistory();\n                }\n            } catch(e) {}\n        }\n\n        \/\/ Lightweight validation\n        function validateInputs() {\n            let valid = true;\n            errA.textContent = '';\n            errB.textContent = '';\n\n            if (inputA.value !== '' && isNaN(Number(inputA.value))) {\n                errA.textContent = 'Please enter a valid numeric value.';\n                valid = false;\n            }\n            if (inputB.value !== '' && isNaN(Number(inputB.value))) {\n                errB.textContent = 'Please enter a valid numeric rate.';\n                valid = false;\n            }\n            return valid;\n        }\n\n        \/\/ Core Calculation Engine scheduled with requestAnimationFrame\n        function scheduleCompute() {\n            if (rafId) cancelAnimationFrame(rafId);\n            rafId = requestAnimationFrame(() => {\n                computeNow();\n            });\n        }\n\n        function computeNow() {\n            if (!validateInputs()) return;\n\n            const a = parseFloat(inputA.value) || 0;\n            const b = parseFloat(inputB.value) || 0;\n            const mode = modeSelect.value;\n            let result = 0;\n            let breakdownText = '';\n\n            if (mode === 'percentage-of') {\n                result = (a * b) \/ 100;\n                breakdownText = `${b}% of ${a} is ${result.toFixed(2)}`;\n            } else if (mode === 'percentage-increase') {\n                result = a + (a * (b \/ 100));\n                breakdownText = `Increased by ${b}% to reach ${result.toFixed(2)}`;\n            } else if (mode === 'percentage-decrease') {\n                result = a - (a * (b \/ 100));\n                breakdownText = `Decreased by ${b}% to reach ${result.toFixed(2)}`;\n            } else if (mode === 'percentage-diff') {\n                const diff = Math.abs(a - b);\n                const avg = (a + b) \/ 2;\n                result = avg === 0 ? 0 : (diff \/ avg) * 100;\n                breakdownText = `Percentage difference is ${result.toFixed(2)}% (Absolute: ${diff})`;\n            }\n\n            resValue.textContent = result.toFixed(2);\n            resBreakdown.textContent = breakdownText;\n\n            \/\/ Chart telemetry update with GPU friendly inline styles\n            const total = Math.abs(a) + Math.abs(result) || 1;\n            const pctA = Math.min(Math.max((Math.abs(a) \/ total) * 100, 5), 95);\n            const pctRes = 100 - pctA;\n            chartBarA.style.width = pctA + '%';\n            chartBarB.style.width = pctRes + '%';\n            chartLblA.textContent = `Base (${Math.round(pctA)}%)`;\n            chartLblB.textContent = `Result (${Math.round(pctRes)}%)`;\n\n            \/\/ Custom formula calculation\n            try {\n                const customVal = Function('a', 'b', `return ${formulaInput.value};`)(a, b);\n                if (isFinite(customVal)) {\n                    resFormula.textContent = Number(customVal).toFixed(2);\n                    formulaStatus.textContent = 'Formula evaluated successfully.';\n                } else {\n                    resFormula.textContent = 'NaN';\n                    formulaStatus.textContent = 'Math error in expression.';\n                }\n            } catch(e) {\n                resFormula.textContent = '--';\n                formulaStatus.textContent = 'Invalid syntax in formula.';\n            }\n\n            saveSession();\n        }\n\n        \/\/ Efficient DOM rendering for history using DocumentFragment\n        function recordHistory() {\n            const a = inputA.value;\n            const b = inputB.value;\n            const res = resValue.textContent;\n            if (a === '' || b === '') return;\n\n            const record = { text: `${modeSelect.value}: (${a}, ${b}) = ${res}`, time: new Date().toLocaleTimeString() };\n            historyRecords.unshift(record);\n            if (historyRecords.length > 15) historyRecords.pop();\n            renderHistory();\n        }\n\n        function renderHistory() {\n            const fragment = document.createDocumentFragment();\n            historyList.innerHTML = '';\n\n            if (historyRecords.length === 0) {\n                const emptyDiv = document.createElement('div');\n                emptyDiv.style.cssText = 'font-size:0.8rem; color:var(--opt-muted); text-align:center; padding:10px;';\n                emptyDiv.textContent = 'No recent calculations recorded.';\n                historyList.appendChild(emptyDiv);\n                return;\n            }\n\n            historyRecords.forEach(rec => {\n                const div = document.createElement('div');\n                div.className = 'opt-history-item';\n                div.innerHTML = `<span>${rec.text}<\/span><span style=\"font-size:0.72rem; color:var(--opt-muted);\">${rec.time}<\/span>`;\n                fragment.appendChild(div);\n            });\n            historyList.appendChild(fragment);\n        }\n\n        \/\/ JSON Export functionality\n        function exportHistoryJSON() {\n            if (historyRecords.length === 0) return;\n            const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(historyRecords, null, 2));\n            const downloadAnchor = document.createElement('a');\n            downloadAnchor.setAttribute(\"href\", dataStr);\n            downloadAnchor.setAttribute(\"download\", \"calculation_history.json\");\n            document.body.appendChild(downloadAnchor);\n            downloadAnchor.click();\n            downloadAnchor.remove();\n        }\n\n        \/\/ State snapshots for Undo\/Redo\n        function pushUndoState() {\n            const state = { a: inputA.value, b: inputB.value, mode: modeSelect.value };\n            undoStack.push(state);\n            if (undoStack.length > 20) undoStack.shift();\n            redoStack = [];\n            updateUndoRedoButtons();\n        }\n\n        function updateUndoRedoButtons() {\n            undoBtn.disabled = undoStack.length === 0;\n            redoBtn.disabled = redoStack.length === 0;\n        }\n\n        \/\/ Event listeners with debounce\/input handling\n        [inputA, inputB, formulaInput].forEach(el => {\n            el.addEventListener('input', () => {\n                scheduleCompute();\n            });\n            el.addEventListener('change', () => {\n                pushUndoState();\n                recordHistory();\n            });\n        });\n\n        modeSelect.addEventListener('change', () => {\n            pushUndoState();\n            scheduleCompute();\n            recordHistory();\n        });\n\n        \/\/ Undo & Redo actions\n        undoBtn.addEventListener('click', () => {\n            if (undoStack.length === 0) return;\n            const currentState = { a: inputA.value, b: inputB.value, mode: modeSelect.value };\n            redoStack.push(currentState);\n            const prevState = undoStack.pop();\n            inputA.value = prevState.a;\n            inputB.value = prevState.b;\n            modeSelect.value = prevState.mode;\n            scheduleCompute();\n            updateUndoRedoButtons();\n        });\n\n        redoBtn.addEventListener('click', () => {\n            if (redoStack.length === 0) return;\n            const currentState = { a: inputA.value, b: inputB.value, mode: modeSelect.value };\n            undoStack.push(currentState);\n            const nextState = redoStack.pop();\n            inputA.value = nextState.a;\n            inputB.value = nextState.b;\n            modeSelect.value = nextState.mode;\n            scheduleCompute();\n            updateUndoRedoButtons();\n        });\n\n        \/\/ Print action\n        printBtn.addEventListener('click', () => {\n            window.print();\n        });\n\n        \/\/ Reset All\n        resetBtn.addEventListener('click', () => {\n            inputA.value = '';\n            inputB.value = '';\n            errA.textContent = '';\n            errB.textContent = '';\n            resValue.textContent = '0.00';\n            resBreakdown.textContent = 'Enter values above to calculate instantly.';\n            formulaInput.value = '(a * b) \/ 100';\n            resFormula.textContent = '0.00';\n            undoStack = [];\n            redoStack = [];\n            updateUndoRedoButtons();\n            localStorage.removeItem('opt_calc_session');\n        });\n\n        clearHistoryBtn.addEventListener('click', () => {\n            historyRecords = [];\n            renderHistory();\n            saveSession();\n        });\n\n        exportJsonBtn.addEventListener('click', () => {\n            exportHistoryJSON();\n        });\n\n        \/\/ Favorite Toggle\n        favoriteBtn.addEventListener('click', () => {\n            const isStarred = favoriteBtn.classList.toggle('opt-starred');\n            favoriteBtn.setAttribute('aria-pressed', isStarred ? 'true' : 'false');\n            saveSession();\n        });\n\n        \/\/ Presets Chips\n        root.querySelectorAll('.opt-preset-chip').forEach(chip => {\n            chip.addEventListener('click', function() {\n                const preset = this.getAttribute('data-preset');\n                if (preset === 'standard-exam') {\n                    inputA.value = '442';\n                    inputB.value = '500';\n                    modeSelect.value = 'percentage-of';\n                } else if (preset === 'retail-sale') {\n                    inputA.value = '150';\n                    inputB.value = '20';\n                    modeSelect.value = 'percentage-decrease';\n                } else if (preset === 'tax-invoice') {\n                    inputA.value = '1000';\n                    inputB.value = '18';\n                    modeSelect.value = 'percentage-increase';\n                }\n                pushUndoState();\n                scheduleCompute();\n                recordHistory();\n            });\n        });\n\n        \/\/ Keyboard Shortcuts\n        document.addEventListener('keydown', (e) => {\n            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {\n                e.preventDefault();\n                undoBtn.click();\n            } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'y') {\n                e.preventDefault();\n                redoBtn.click();\n            } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'r') {\n                e.preventDefault();\n                resetBtn.click();\n            } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {\n                e.preventDefault();\n                saveSession();\n            }\n        });\n\n        \/\/ Memory leak prevention on unmount observer\n        const observer = new MutationObserver((mutations) => {\n            if (!document.body.contains(root)) {\n                if (rafId) cancelAnimationFrame(rafId);\n                if (saveTimeout) clearTimeout(saveTimeout);\n                observer.disconnect();\n            }\n        });\n        observer.observe(document.body, { childList: true, subtree: true });\n\n        \/\/ Initialization\n        restoreSession();\n        computeNow();\n        renderHistory();\n        updateUndoRedoButtons();\n\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>High-Performance Calculation Engine Optimized with debounce, requestAnimationFrame rendering, memory cleanup, and zero layout thrashing. Undo Redo Print Reset All Quick Presets: Standard Exam (500) Retail Sale (20% Off) Standard Tax (18%) Favorite Debounced Calculation Engine \u25cf Memory Optimized (Cache Active) Primary Value \/ Initial Amount Secondary Value \/ Percentage Rate Calculation Mode What is X% [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-778","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=778"}],"version-history":[{"count":7,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/778\/revisions"}],"predecessor-version":[{"id":809,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/778\/revisions\/809"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}