{"id":74,"date":"2026-06-25T08:32:45","date_gmt":"2026-06-25T08:32:45","guid":{"rendered":"https:\/\/toolskit.site\/index.php\/percentage-calculator\/"},"modified":"2026-06-25T08:32:45","modified_gmt":"2026-06-25T08:32:45","slug":"percentage-calculator","status":"publish","type":"page","link":"https:\/\/toolskit.site\/index.php\/percentage-calculator\/","title":{"rendered":"Percentage Calculator"},"content":{"rendered":"<div class=\"hth-single-tool-shell\" style=\"--hth-color:#00ff88\">\n<div id=\"pc-wrapper\">\n<style>\n    #pc-wrapper { width: 100%; max-width: 1200px; box-sizing: border-box; margin: 0 auto; overflow: hidden; isolation: isolate; position: relative; }\n    #pc-wrapper * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n    #pc-wrapper { background: radial-gradient(circle at 80% 20%, #1a1a2e 0%, #0f0f1a 40%, #05050a 100%); color: #e0e0e0; padding: 24px; border-radius: 16px; border: 1px solid rgba(0, 255, 136, 0.15); box-shadow: 0 0 30px rgba(0, 255, 136, 0.05), inset 0 0 60px rgba(0,0,0,0.3); }\n    #pc-wrapper::before { content: \"\"; position: absolute; top: 50%; left: 50%; width: 150vmax; height: 150vmax; transform: translate(-50%, -50%); background: conic-gradient(from 90deg, transparent, rgba(0, 255, 136, 0.04), transparent, rgba(0, 200, 83, 0.04), transparent); animation: pc-rotate 20s linear infinite; z-index: 0; pointer-events: none; will-change: transform; }\n    @keyframes pc-rotate { 100% { transform: translate(-50%, -50%) rotate(360deg); } }\n    #pc-wrapper .pc-content { position: relative; z-index: 1; }\n    #pc-wrapper .pc-header { text-align: center; margin-bottom: 24px; }\n    #pc-wrapper .pc-title { font-size: 28px; font-weight: 800; background: linear-gradient(90deg, #00ff88, #00c853); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }\n    #pc-wrapper .pc-subtitle { color: #888; font-size: 14px; }\n    #pc-wrapper .pc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; justify-content: center; }\n    #pc-wrapper .pc-tab { padding: 10px 16px; background: #12121a; border: 1px solid #333; border-radius: 8px; color: #888; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }\n    #pc-wrapper .pc-tab.active { background: linear-gradient(135deg, #00ff8822, #00c85322); border-color: #00ff88; color: #00ff88; }\n    #pc-wrapper .pc-panel { background: #0a0a12; border: 1px solid #222; border-radius: 12px; padding: 24px; display: none; }\n    #pc-wrapper .pc-panel.active { display: block; }\n    #pc-wrapper .pc-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }\n    #pc-wrapper .pc-field { flex: 1; min-width: 120px; }\n    #pc-wrapper .pc-label { font-size: 13px; color: #aaa; margin-bottom: 6px; font-weight: 600; display: block; }\n    #pc-wrapper .pc-input { width: 100%; background: #12121a; border: 1px solid #333; border-radius: 8px; padding: 12px 14px; color: #fff; font-size: 16px; outline: none; transition: border-color 0.3s; }\n    #pc-wrapper .pc-input:focus { border-color: #00ff88; }\n    #pc-wrapper .pc-result-box { background: #12121a; border: 1px solid #2a2a35; border-radius: 10px; padding: 20px; text-align: center; margin-top: 10px; }\n    #pc-wrapper .pc-result-val { font-size: 32px; font-weight: 800; color: #00ff88; margin-bottom: 8px; }\n    #pc-wrapper .pc-formula { font-size: 13px; color: #888; font-family: monospace; background: #05050a; padding: 8px; border-radius: 6px; display: inline-block; }\n    #pc-wrapper .pc-history { margin-top: 24px; border-top: 1px solid #222; padding-top: 16px; }\n    #pc-wrapper .pc-history-title { font-size: 14px; color: #888; margin-bottom: 10px; }\n    #pc-wrapper .pc-history-list { display: flex; flex-wrap: wrap; gap: 8px; }\n    #pc-wrapper .pc-history-item { background: #12121a; border: 1px solid #333; padding: 6px 12px; border-radius: 20px; font-size: 12px; color: #ccc; }\n    #pc-wrapper .pc-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: #00ff88; color: #000; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: 14px; z-index: 9999; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; }\n    #pc-wrapper .pc-toast.show { transform: translateX(-50%) translateY(0); }\n    @media (max-width: 600px) { #pc-wrapper { padding: 16px; } #pc-wrapper .pc-title { font-size: 22px; } #pc-wrapper .pc-result-val { font-size: 24px; } }\n  <\/style>\n<div class=\"pc-content\">\n<div class=\"pc-header\">\n<h2 class=\"pc-title\">&#x1F4CA; Percentage Calculator<\/h2>\n<p class=\"pc-subtitle\">All-in-one percentage, discount, and tip calculator with live formulas.<\/p>\n<\/p><\/div>\n<div class=\"pc-tabs\">\n<div class=\"pc-tab active\" data-tab=\"basic\">X% of Y<\/div>\n<div class=\"pc-tab\" data-tab=\"ratio\">X is ?% of Y<\/div>\n<div class=\"pc-tab\" data-tab=\"change\">% Change<\/div>\n<div class=\"pc-tab\" data-tab=\"discount\">Discount<\/div>\n<div class=\"pc-tab\" data-tab=\"tip\">Tip Split<\/div>\n<\/p><\/div>\n<div class=\"pc-panel active\" id=\"pc-panel-basic\">\n<div class=\"pc-row\">\n<div class=\"pc-field\"><label class=\"pc-label\">Percentage (%)<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"basic\" placeholder=\"20\"><\/div>\n<div class=\"pc-field\"><label class=\"pc-label\">Of Number<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"basic\" placeholder=\"500\"><\/div>\n<\/p><\/div>\n<div class=\"pc-result-box\">\n<div class=\"pc-result-val\" id=\"pc-res-basic\">0<\/div>\n<div class=\"pc-formula\" id=\"pc-form-basic\">20% of 500 = 100<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"pc-panel\" id=\"pc-panel-ratio\">\n<div class=\"pc-row\">\n<div class=\"pc-field\"><label class=\"pc-label\">Value (X)<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"ratio\" placeholder=\"50\"><\/div>\n<div class=\"pc-field\"><label class=\"pc-label\">Total (Y)<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"ratio\" placeholder=\"200\"><\/div>\n<\/p><\/div>\n<div class=\"pc-result-box\">\n<div class=\"pc-result-val\" id=\"pc-res-ratio\">0%<\/div>\n<div class=\"pc-formula\" id=\"pc-form-ratio\">(50 \/ 200) * 100 = 25%<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"pc-panel\" id=\"pc-panel-change\">\n<div class=\"pc-row\">\n<div class=\"pc-field\"><label class=\"pc-label\">From (Original)<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"change\" placeholder=\"100\"><\/div>\n<div class=\"pc-field\"><label class=\"pc-label\">To (New)<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"change\" placeholder=\"120\"><\/div>\n<\/p><\/div>\n<div class=\"pc-result-box\">\n<div class=\"pc-result-val\" id=\"pc-res-change\">0%<\/div>\n<div class=\"pc-formula\" id=\"pc-form-change\">((120 &#8211; 100) \/ 100) * 100 = 20%<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"pc-panel\" id=\"pc-panel-discount\">\n<div class=\"pc-row\">\n<div class=\"pc-field\"><label class=\"pc-label\">Original Price<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"discount\" placeholder=\"1000\"><\/div>\n<div class=\"pc-field\"><label class=\"pc-label\">Discount (%)<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"discount\" placeholder=\"20\"><\/div>\n<\/p><\/div>\n<div class=\"pc-result-box\">\n<div class=\"pc-result-val\" id=\"pc-res-discount\">0<\/div>\n<div class=\"pc-formula\" id=\"pc-form-discount\">1000 &#8211; (20% of 1000) = 800<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"pc-panel\" id=\"pc-panel-tip\">\n<div class=\"pc-row\">\n<div class=\"pc-field\"><label class=\"pc-label\">Bill Amount<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"tip\" placeholder=\"500\"><\/div>\n<div class=\"pc-field\"><label class=\"pc-label\">Tip (%)<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"tip\" placeholder=\"10\"><\/div>\n<div class=\"pc-field\"><label class=\"pc-label\">Split (People)<\/label><input type=\"number\" class=\"pc-input pc-calc\" data-mode=\"tip\" placeholder=\"2\" min=\"1\"><\/div>\n<\/p><\/div>\n<div class=\"pc-result-box\">\n<div class=\"pc-result-val\" id=\"pc-res-tip\">0<\/div>\n<div class=\"pc-formula\" id=\"pc-form-tip\">Per person: 275 (Bill: 500, Tip: 50)<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"pc-history\">\n<div class=\"pc-history-title\">&#x1F4DC; Recent Calculations<\/div>\n<div class=\"pc-history-list\" id=\"pc-history-list\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"pc-toast\" id=\"pc-toast\">Copied!<\/div>\n<p>  <script>\n    (function() {\n      const $ = id => document.getElementById(id);\n      const tabs = document.querySelectorAll('.pc-tab');\n      const panels = document.querySelectorAll('.pc-panel');\n      const calcs = document.querySelectorAll('.pc-calc');\n      const toast = $('pc-toast');\n      const historyList = $('pc-history-list');<\/p>\n<p>      function showToast(msg) { toast.textContent = msg; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000); }\n      function fmt(n) { return isNaN(n) ? '0' : Number.isInteger(n) ? n.toString() : n.toFixed(2); }<\/p>\n<p>      tabs.forEach(tab => {\n        tab.addEventListener('click', () => {\n          tabs.forEach(t => t.classList.remove('active')); tab.classList.add('active');\n          panels.forEach(p => p.classList.remove('active'));\n          $('pc-panel-' + tab.dataset.tab).classList.add('active');\n        });\n      });<\/p>\n<p>      function saveHistory(text) {\n        let hist = JSON.parse(localStorage.getItem('pc_history') || '[]');\n        hist = hist.filter(h => h !== text);\n        hist.unshift(text);\n        if(hist.length > 8) hist = hist.slice(0, 8);\n        localStorage.setItem('pc_history', JSON.stringify(hist));\n        renderHistory();\n      }<\/p>\n<p>      function renderHistory() {\n        const hist = JSON.parse(localStorage.getItem('pc_history') || '[]');\n        historyList.innerHTML = '';\n        hist.forEach(h => {\n          const div = document.createElement('div'); div.className = 'pc-history-item'; div.textContent = h;\n          historyList.appendChild(div);\n        });\n      }<\/p>\n<p>      function calculate() {\n        const mode = this.dataset.mode;\n        const inputs = Array.from(document.querySelectorAll(`.pc-calc[data-mode=\"${mode}\"]`)).map(i => parseFloat(i.value) || 0);\n        let res = 0, formula = '', histText = '';<\/p>\n<p>        if(mode === 'basic') {\n          res = (inputs[0] \/ 100) * inputs[1];\n          formula = `${inputs[0]}% of ${inputs[1]} = ${fmt(res)}`;\n          $('pc-res-basic').textContent = fmt(res);\n          $('pc-form-basic').textContent = formula;\n          histText = formula;\n        } else if(mode === 'ratio') {\n          res = inputs[1] ? (inputs[0] \/ inputs[1]) * 100 : 0;\n          formula = `(${inputs[0]} \/ ${inputs[1]}) * 100 = ${fmt(res)}%`;\n          $('pc-res-ratio').textContent = fmt(res) + '%';\n          $('pc-form-ratio').textContent = formula;\n          histText = formula;\n        } else if(mode === 'change') {\n          res = inputs[0] ? ((inputs[1] - inputs[0]) \/ inputs[0]) * 100 : 0;\n          formula = `((${inputs[1]} - ${inputs[0]}) \/ ${inputs[0]}) * 100 = ${fmt(res)}%`;\n          $('pc-res-change').textContent = fmt(res) + '%';\n          $('pc-form-change').textContent = formula;\n          histText = formula;\n        } else if(mode === 'discount') {\n          const disc = (inputs[0] \/ 100) * inputs[1];\n          res = inputs[0] - disc;\n          formula = `${inputs[0]} - (${inputs[1]}% of ${inputs[0]}) = ${fmt(res)}`;\n          $('pc-res-discount').textContent = fmt(res);\n          $('pc-form-discount').textContent = formula;\n          histText = formula;\n        } else if(mode === 'tip') {\n          const tipAmt = (inputs[0] \/ 100) * inputs[1];\n          const total = inputs[0] + tipAmt;\n          const split = inputs[2] > 0 ? total \/ inputs[2] : total;\n          formula = `Per person: ${fmt(split)} (Bill: ${inputs[0]}, Tip: ${fmt(tipAmt)})`;\n          $('pc-res-tip').textContent = fmt(split);\n          $('pc-form-tip').textContent = formula;\n          histText = formula;\n        }\n        if(histText && inputs.some(v => v > 0)) saveHistory(histText);\n      }<\/p>\n<p>      calcs.forEach(inp => inp.addEventListener('input', calculate));\n      renderHistory();\n    })();\n  <\/script>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>All-in-one percentage, discount, and tip calculator with live formulas.<\/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-74","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":0,"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"wp:attachment":[{"href":"https:\/\/toolskit.site\/index.php\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}