Percentage calculator<\/title>\n<style>\n* { box-sizing: border-box; }\n\n.wrap {\n \/* Self-contained design tokens \u2014 no dependency on the host page *\/\n --color-text-primary: #1a1a1a;\n --color-text-secondary: #6b7280;\n --color-background-primary: #ffffff;\n --color-background-secondary: #f7f8fa;\n --color-border-secondary: #d8dade;\n --color-border-tertiary: #e8e9ec;\n --border-radius-md: 8px;\n --border-radius-lg: 14px;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n color: var(--color-text-primary);\n padding: 1.5rem 0; max-width: 780px; margin: 0 auto;\n}\n\n.grid-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 1rem; }\n.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }\n.card-title { font-size: 18px; font-weight: 600; margin: 0; }\n.icon-badge { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.icon-badge svg { width: 20px; height: 20px; }\n.icon-badge.blue { background: #E6F1FB; color: #185FA5; }\n.icon-badge.green { background: #EAF3DE; color: #3B6D11; }\n.icon-badge.gray { background: var(--color-background-primary); color: var(--color-text-secondary); border: 1px solid var(--color-border-tertiary); }\n.metric-box { border-radius: var(--border-radius-md); padding: 1rem; margin-bottom: 12px; }\n.metric-box .result-big { margin: 0 0 2px; }\n.metric-box .result-sentence { margin: 0; }\n.metric-box.up { background: #EAF3DE; }\n.metric-box.down { background: #FBE7E7; }\n.metric-box.neutral { background: #E6F1FB; }\n\n.wrap .sr-only {\n position: absolute; width: 1px; height: 1px;\n padding: 0; margin: -1px; overflow: hidden;\n clip: rect(0,0,0,0); white-space: nowrap; border: 0;\n}\n\n.header { margin-bottom: 1.5rem; }\n.header h1 { font-size: 30px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 4px; }\n.header p { font-size: 14px; color: var(--color-text-secondary); margin: 0; }\n.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 1.5rem; }\n.tab { font-family: inherit; padding: 9px 6px; font-size: 12px; text-align: center; line-height: 1.3; border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md); background: var(--color-background-primary); color: var(--color-text-secondary); cursor: pointer; transition: all 0.12s; }\n.tab.active { background: #E6F1FB; color: #0C447C; border-color: #378ADD; font-weight: 500; }\n.card { background: var(--color-background-secondary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1.25rem; margin-bottom: 1rem; }\n.field { margin-bottom: 12px; }\n.field label { display: block; font-size: 13px; color: var(--color-text-secondary); font-weight: 500; margin-bottom: 6px; }\n.field input {\n width: 100%;\n padding: 9px 12px;\n font-size: 15px;\n color: var(--color-text-primary);\n background: var(--color-background-primary);\n border: 1px solid var(--color-border-secondary);\n border-radius: var(--border-radius-md);\n outline: none;\n}\n.field input:focus { border-color: #378ADD; box-shadow: 0 0 0 3px #E6F1FB; }\n.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }\n.hint { font-size: 12px; color: var(--color-text-secondary); margin-top: 8px; font-style: italic; }\n.result-big { font-size: 36px; font-weight: 500; color: #185FA5; margin: 0 0 2px; line-height: 1; }\n.result-big.up { color: #3B6D11; }\n.result-big.down { color: #A32D2D; }\n.result-sentence { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 1rem; }\n.result-rows { border-top: 1px solid var(--color-border-tertiary); padding-top: 10px; }\n.rrow { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--color-border-tertiary); }\n.rrow:last-child { border-bottom: none; }\n.rrow .rl { color: var(--color-text-secondary); }\n.rrow .rv { color: var(--color-text-primary); font-weight: 500; }\n.formula { background: var(--color-background-primary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 8px 12px; margin-top: 10px; font-size: 12px; color: var(--color-text-secondary); font-family: var(--font-mono); }\n.bar-wrap { margin: 10px 0 4px; }\n.bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }\n.bar-track { height: 8px; background: var(--color-background-primary); border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border-tertiary); }\n.bar-fill { height: 100%; border-radius: 4px; background: #378ADD; transition: width 0.3s; }\n.bar-fill.green { background: #639922; }\n.bar-fill.red { background: #E24B4A; }\n.actions { display: flex; gap: 8px; margin-top: 10px; }\n.actions button {\n font-family: inherit; font-size: 13px; cursor: pointer;\n display: inline-flex; align-items: center;\n padding: 7px 12px;\n border: 1px solid var(--color-border-secondary);\n border-radius: var(--border-radius-md);\n background: var(--color-background-primary);\n color: var(--color-text-primary);\n}\n.actions button:hover { background: var(--color-background-secondary); }\n.clear-btn { font-family: inherit; border: none; background: none; padding: 0; font-size: 12px; color: var(--color-text-secondary); cursor: pointer; }\n.history-list { margin-top: 1rem; }\n.history-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border-tertiary); font-size: 13px; }\n.history-item:last-child { border-bottom: none; }\n.history-item .hi-label { color: var(--color-text-secondary); }\n.history-item .hi-val { color: var(--color-text-primary); font-weight: 500; }\n.no-result { color: var(--color-text-secondary); font-size: 14px; text-align: center; padding: 1.5rem 0; }\n<\/style>\n\n\n\n<div class=\"wrap\">\n <h2 class=\"sr-only\">Best percentage calculator with 8 modes, visual bars, formula display and history<\/h2>\n <div class=\"header\">\n <h1>Percentage Calculator<\/h1>\n <p>8 calculation modes \u2014 instant results, formulas & visual breakdowns<\/p>\n <\/div>\n\n <div class=\"grid-two\">\n <div class=\"card\" id=\"inputCard\">\n <div class=\"card-header\">\n <div class=\"icon-badge blue\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\"><\/rect>\n <line x1=\"8\" y1=\"6\" x2=\"16\" y2=\"6\"><\/line>\n <line x1=\"8\" y1=\"11\" x2=\"8\" y2=\"11.01\"><\/line>\n <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"11.01\"><\/line>\n <line x1=\"16\" y1=\"11\" x2=\"16\" y2=\"11.01\"><\/line>\n <line x1=\"8\" y1=\"15\" x2=\"8\" y2=\"15.01\"><\/line>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"15.01\"><\/line>\n <line x1=\"16\" y1=\"15\" x2=\"16\" y2=\"15.01\"><\/line>\n <line x1=\"8\" y1=\"19\" x2=\"16\" y2=\"19\"><\/line>\n <\/svg>\n <\/div>\n <p class=\"card-title\">Calculator<\/p>\n <\/div>\n\n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"setTab(0)\">X% of Y<\/button>\n <button class=\"tab\" onclick=\"setTab(1)\">X is ?% of Y<\/button>\n <button class=\"tab\" onclick=\"setTab(2)\">% change<\/button>\n <button class=\"tab\" onclick=\"setTab(3)\">Find original<\/button>\n <button class=\"tab\" onclick=\"setTab(4)\">% more\/less<\/button>\n <button class=\"tab\" onclick=\"setTab(5)\">Split %<\/button>\n <button class=\"tab\" onclick=\"setTab(6)\">Tip & total<\/button>\n <button class=\"tab\" onclick=\"setTab(7)\">Discount<\/button>\n <\/div>\n\n <div id=\"inputFields\"><\/div>\n <p class=\"hint\" id=\"hintText\"><\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <div class=\"icon-badge green\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"19\" y1=\"5\" x2=\"5\" y2=\"19\"><\/line>\n <circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\"><\/circle>\n <circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\"><\/circle>\n <\/svg>\n <\/div>\n <p class=\"card-title\">Result<\/p>\n <\/div>\n <div id=\"resultArea\">\n <div class=\"no-result\" id=\"emptyState\">Enter values above to see results<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\" id=\"historyCard\" style=\"display:none;\">\n <div class=\"card-header\" style=\"margin-bottom:8px;\">\n <div class=\"icon-badge gray\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\n <polyline points=\"12 7 12 12 15 15\"><\/polyline>\n <\/svg>\n <\/div>\n <p class=\"card-title\" style=\"font-size:15px;\">Recent calculations<\/p>\n <button class=\"clear-btn\" style=\"margin-left:auto;\" onclick=\"clearHistory()\">Clear<\/button>\n <\/div>\n <div class=\"history-list\" id=\"historyList\"><\/div>\n <\/div>\n<\/div>\n\n<script>\nlet tab = 0;\nlet history = [];\n\nconst ICONS = {\n copy: '<svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right:4px;vertical-align:-2px;\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>',\n star: '<svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right:4px;vertical-align:-2px;\"><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 refresh: '<svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right:4px;vertical-align:-2px;\"><path d=\"M21 12a9 9 0 1 1-3-6.7\"\/><polyline points=\"21 3 21 9 15 9\"\/><\/svg>'\n};\n\nconst tabDefs = [\n {\n hint: \"What is X% of a number? e.g. What is 20% of 500?\",\n fields: [\n { id:\"p\", label:\"Percentage (%)\", ph:\"e.g. 20\" },\n { id:\"v\", label:\"Total value\", ph:\"e.g. 500\" }\n ],\n calc(f) {\n const r = (f.p \/ 100) * f.v;\n const pct = f.p;\n return {\n main: num(r), dir: null,\n sentence: `${f.p}% of ${num(f.v)} = ${num(r)}`,\n rows: [[\"Percentage\", f.p + \"%\"], [\"Total value\", num(f.v)], [\"Result\", num(r)]],\n bar: [{ label:\"Part\", val: Math.min(pct,100), color:\"blue\" }, { label:\"Remainder\", val: Math.max(0,100-pct), color:\"\" }],\n formula: `Result = (${f.p} \u00f7 100) \u00d7 ${f.v} = ${num(r)}`,\n hist: `${f.p}% of ${num(f.v)} = ${num(r)}`\n };\n }\n },\n {\n hint: \"What percentage is X of Y? e.g. 75 is what % of 300?\",\n fields: [\n { id:\"x\", label:\"Part (X)\", ph:\"e.g. 75\" },\n { id:\"y\", label:\"Total (Y)\", ph:\"e.g. 300\" }\n ],\n calc(f) {\n if (f.y === 0) return null;\n const r = (f.x \/ f.y) * 100;\n return {\n main: r.toFixed(2) + \"%\", dir: null,\n sentence: `${num(f.x)} is ${r.toFixed(2)}% of ${num(f.y)}`,\n rows: [[\"Part\", num(f.x)], [\"Total\", num(f.y)], [\"Percentage\", r.toFixed(2) + \"%\"]],\n bar: [{ label: r.toFixed(1)+\"%\", val: Math.min(r,100), color:\"blue\" }],\n formula: `% = (${f.x} \u00f7 ${f.y}) \u00d7 100 = ${r.toFixed(2)}%`,\n hist: `${num(f.x)} is ${r.toFixed(2)}% of ${num(f.y)}`\n };\n }\n },\n {\n hint: \"Percentage increase or decrease between two values.\",\n fields: [\n { id:\"old\", label:\"Original value\", ph:\"e.g. 200\" },\n { id:\"nw\", label:\"New value\", ph:\"e.g. 250\" }\n ],\n calc(f) {\n if (f.old === 0) return null;\n const diff = f.nw - f.old;\n const r = (diff \/ f.old) * 100;\n const isUp = r >= 0;\n return {\n main: (isUp ? \"+\" : \"\") + r.toFixed(2) + \"%\",\n dir: isUp ? \"up\" : \"down\",\n sentence: `A ${Math.abs(r).toFixed(2)}% ${isUp?\"increase\":\"decrease\"} from ${num(f.old)} to ${num(f.nw)}`,\n rows: [[\"Original\", num(f.old)], [\"New value\", num(f.nw)], [\"Absolute change\", (isUp?\"+\":\"\")+num(diff)], [\"% change\", (isUp?\"+\":\"\")+r.toFixed(2)+\"%\"]],\n bar: [{ label: \"Change \"+(isUp?\"+\":\"\")+r.toFixed(1)+\"%\", val: Math.min(Math.abs(r),100), color: isUp?\"green\":\"red\" }],\n formula: `% change = ((${f.nw} \u2212 ${f.old}) \u00f7 ${f.old}) \u00d7 100 = ${r.toFixed(2)}%`,\n hist: `${num(f.old)} \u2192 ${num(f.nw)}: ${(isUp?\"+\":\"\")+r.toFixed(2)}%`\n };\n }\n },\n {\n hint: \"Find the original value before a % increase was applied.\",\n fields: [\n { id:\"final\", label:\"Final value (after %)\", ph:\"e.g. 1180\" },\n { id:\"pct\", label:\"% that was applied\", ph:\"e.g. 18\" }\n ],\n calc(f) {\n const orig = f.final \/ (1 + f.pct \/ 100);\n const added = f.final - orig;\n return {\n main: num(orig), dir: null,\n sentence: `Original value before ${f.pct}% increase: ${num(orig)}`,\n rows: [[\"Final value\", num(f.final)], [\"% applied\", f.pct+\"%\"], [\"Original value\", num(orig)], [\"Amount added\", num(added)]],\n bar: [{ label:\"Original \"+((orig\/f.final)*100).toFixed(1)+\"%\", val:(orig\/f.final)*100, color:\"blue\" }, { label:\"Added \"+((added\/f.final)*100).toFixed(1)+\"%\", val:(added\/f.final)*100, color:\"\" }],\n formula: `Original = ${f.final} \u00f7 (1 + ${f.pct}\/100) = ${num(orig)}`,\n hist: `Original of ${num(f.final)} after ${f.pct}% = ${num(orig)}`\n };\n }\n },\n {\n hint: \"How much is X% more or less than a value?\",\n fields: [\n { id:\"base\", label:\"Base value\", ph:\"e.g. 1000\" },\n { id:\"pct\", label:\"Percentage (%)\", ph:\"e.g. 15\" }\n ],\n calc(f) {\n const more = f.base * (1 + f.pct\/100);\n const less = f.base * (1 - f.pct\/100);\n return {\n main: num(more), dir: \"up\",\n sentence: `${f.pct}% more = ${num(more)} | ${f.pct}% less = ${num(less)}`,\n rows: [[\"Base value\", num(f.base)], [f.pct+\"% more\", num(more)], [f.pct+\"% less\", num(less)], [\"Difference\", num(more-less)]],\n bar: [{ label:\"More \"+num(more), val:Math.min((more\/Math.max(more,f.base))*100,100), color:\"green\" }, { label:\"Less \"+num(less), val:Math.min((less\/Math.max(more,f.base))*100,100), color:\"red\" }],\n formula: `More: ${f.base}\u00d7(1+${f.pct}\/100)=${num(more)} | Less: ${f.base}\u00d7(1\u2212${f.pct}\/100)=${num(less)}`,\n hist: `${f.pct}% more\/less of ${num(f.base)}: +${num(more)} \/ -${num(less)}`\n };\n }\n },\n {\n hint: \"Split a total into two parts by percentage.\",\n fields: [\n { id:\"total\", label:\"Total value\", ph:\"e.g. 5000\" },\n { id:\"pct\", label:\"First split (%)\", ph:\"e.g. 40\" }\n ],\n calc(f) {\n if (f.pct < 0 || f.pct > 100) return null;\n const p1 = (f.pct\/100)*f.total;\n const p2 = f.total - p1;\n const p2pct = 100 - f.pct;\n return {\n main: num(p1)+\" \/ \"+num(p2), dir:null,\n sentence: `${f.pct}% = ${num(p1)} and ${p2pct}% = ${num(p2)}`,\n rows: [[\"Total\", num(f.total)], [f.pct+\"%\", num(p1)], [p2pct+\"%\", num(p2)]],\n bar: [{ label:f.pct+\"%: \"+num(p1), val:f.pct, color:\"blue\" }, { label:p2pct+\"%: \"+num(p2), val:p2pct, color:\"green\" }],\n formula: `Part1=${f.total}\u00d7${f.pct}\/100=${num(p1)} | Part2=${f.total}\u2212${num(p1)}=${num(p2)}`,\n hist: `Split ${num(f.total)}: ${f.pct}%=${num(p1)}, ${p2pct}%=${num(p2)}`\n };\n }\n },\n {\n hint: \"Calculate tip amount and total bill per person.\",\n fields: [\n { id:\"bill\", label:\"Bill amount\", ph:\"e.g. 1200\" },\n { id:\"tip\", label:\"Tip (%)\", ph:\"e.g. 10\" },\n { id:\"ppl\", label:\"Split among (people)\", ph:\"e.g. 4\" }\n ],\n calc(f) {\n const tipAmt = (f.tip\/100)*f.bill;\n const total = f.bill + tipAmt;\n const ppl = Math.max(1, Math.round(f.ppl||1));\n const perPerson = total \/ ppl;\n return {\n main: num(total), dir:null,\n sentence: `Total with ${f.tip}% tip = ${num(total)} (${num(perPerson)} per person)`,\n rows: [[\"Bill\", num(f.bill)], [\"Tip (\"+f.tip+\"%)\", num(tipAmt)], [\"Total\", num(total)], [\"People\", ppl], [\"Per person\", num(perPerson)]],\n bar: [{ label:\"Bill \"+num(f.bill), val:(f.bill\/total)*100, color:\"blue\" }, { label:\"Tip \"+num(tipAmt), val:(tipAmt\/total)*100, color:\"green\" }],\n formula: `Tip=${f.bill}\u00d7${f.tip}\/100=${num(tipAmt)} | Total=${num(f.bill)}+${num(tipAmt)}=${num(total)}`,\n hist: `Bill ${num(f.bill)} + ${f.tip}% tip = ${num(total)}, ${num(perPerson)}\/person`\n };\n }\n },\n {\n hint: \"Find the price after a discount percentage.\",\n fields: [\n { id:\"price\", label:\"Original price\", ph:\"e.g. 2000\" },\n { id:\"disc\", label:\"Discount (%)\", ph:\"e.g. 25\" }\n ],\n calc(f) {\n const saved = (f.disc\/100)*f.price;\n const final = f.price - saved;\n return {\n main: num(final), dir:null,\n sentence: `Pay ${num(final)} after ${f.disc}% discount (save ${num(saved)})`,\n rows: [[\"Original price\", num(f.price)], [\"Discount (\"+f.disc+\"%)\", \"\u2212\"+num(saved)], [\"Final price\", num(final)], [\"You save\", num(saved)]],\n bar: [{ label:\"Pay \"+num(final), val:100-f.disc, color:\"green\" }, { label:\"Save \"+num(saved), val:f.disc, color:\"red\" }],\n formula: `Saved=${f.price}\u00d7${f.disc}\/100=${num(saved)} | Final=${num(f.price)}\u2212${num(saved)}=${num(final)}`,\n hist: `${num(f.price)} \u2212 ${f.disc}% = ${num(final)} (saved ${num(saved)})`\n };\n }\n }\n];\n\nconst threeColTabs = [6];\n\nfunction num(n) {\n return parseFloat(n.toFixed(6)).toLocaleString('en-IN', { maximumFractionDigits: 2 });\n}\n\nfunction setTab(t) {\n tab = t;\n document.querySelectorAll('.tab').forEach((b,i) => b.classList.toggle('active', i===t));\n renderInputs();\n document.getElementById('resultArea').innerHTML = '<div class=\"no-result\" id=\"emptyState\">Enter values above to see results<\/div>';\n}\n\nfunction renderInputs() {\n const def = tabDefs[tab];\n let html = `<div class=\"${def.fields.length > 2 ? \"three-col\" : \"two-col\"}\">`;\n def.fields.forEach(f => {\n html += `<div class=\"field\"><label>${f.label}<\/label><input type=\"number\" id=\"inp_${f.id}\" placeholder=\"${f.ph}\" oninput=\"calc()\" \/><\/div>`;\n });\n html += `<\/div>`;\n document.getElementById('inputFields').innerHTML = html;\n document.getElementById('hintText').textContent = def.hint;\n}\n\nfunction getVals() {\n const def = tabDefs[tab];\n const vals = {};\n for (const f of def.fields) {\n const el = document.getElementById('inp_' + f.id);\n if (!el || el.value === '') return null;\n const v = parseFloat(el.value);\n if (isNaN(v)) return null;\n vals[f.id] = v;\n }\n return vals;\n}\n\nfunction calc() {\n const vals = getVals();\n if (!vals) {\n document.getElementById('resultArea').innerHTML = '<div class=\"no-result\">Enter values above to see results<\/div>';\n return;\n }\n const res = tabDefs[tab].calc(vals);\n if (!res) {\n document.getElementById('resultArea').innerHTML = '<div class=\"no-result\">Invalid input (check for zeros or out-of-range values)<\/div>';\n return;\n }\n\n let barsHtml = '';\n if (res.bar && res.bar.length) {\n res.bar.forEach(b => {\n const w = Math.min(Math.max(b.val, 0), 100).toFixed(1);\n barsHtml += `<div class=\"bar-wrap\">\n <div class=\"bar-label\"><span>${b.label}<\/span><span>${w}%<\/span><\/div>\n <div class=\"bar-track\"><div class=\"bar-fill ${b.color}\" style=\"width:${w}%\"><\/div><\/div>\n <\/div>`;\n });\n }\n\n let rowsHtml = '';\n res.rows.forEach(([l,v]) => {\n rowsHtml += `<div class=\"rrow\"><span class=\"rl\">${l}<\/span><span class=\"rv\">${v}<\/span><\/div>`;\n });\n\n const boxClass = res.dir === 'up' ? 'up' : res.dir === 'down' ? 'down' : 'neutral';\n\n document.getElementById('resultArea').innerHTML = `\n <div class=\"metric-box ${boxClass}\">\n <div class=\"result-big ${res.dir||''}\">${res.main}<\/div>\n <div class=\"result-sentence\">${res.sentence}<\/div>\n <\/div>\n ${barsHtml}\n <div class=\"result-rows\">${rowsHtml}<\/div>\n <div class=\"formula\">${res.formula}<\/div>\n <div class=\"actions\">\n <button onclick=\"copyResult('${res.sentence.replace(\/'\/g,\"\\\\'\")}')\">${ICONS.copy}Copy result<\/button>\n <button onclick=\"saveToHistory('${res.hist.replace(\/'\/g,\"\\\\'\")}')\">${ICONS.star}Save<\/button>\n <button onclick=\"resetFields()\">${ICONS.refresh}Reset<\/button>\n <\/div>`;\n}\n\nfunction copyResult(text) {\n navigator.clipboard.writeText(text).catch(()=>{});\n}\n\nfunction saveToHistory(text) {\n history.unshift({ text, time: new Date().toLocaleTimeString('en-IN',{hour:'2-digit',minute:'2-digit'}) });\n if (history.length > 8) history.pop();\n renderHistory();\n}\n\nfunction renderHistory() {\n if (!history.length) { document.getElementById('historyCard').style.display='none'; return; }\n document.getElementById('historyCard').style.display='block';\n document.getElementById('historyList').innerHTML = history.map(h =>\n `<div class=\"history-item\"><span class=\"hi-label\">${h.text}<\/span><span class=\"hi-val\" style=\"font-size:11px;color:var(--color-text-secondary);min-width:40px;text-align:right;\">${h.time}<\/span><\/div>`\n ).join('');\n}\n\nfunction clearHistory() {\n history = [];\n renderHistory();\n}\n\nfunction resetFields() {\n document.querySelectorAll('#inputFields input').forEach(el => el.value = '');\n document.getElementById('resultArea').innerHTML = '<div class=\"no-result\">Enter values above to see results<\/div>';\n}\n\nrenderInputs();\n<\/script>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-87ec967\" data-id=\"87ec967\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6b46526 e-flex e-con-boxed e-con e-parent\" data-id=\"6b46526\" 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-c11daab elementor-widget elementor-widget-image-carousel\" data-id=\"c11daab\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"slides_to_show":"1","navigation":"none","autoplay":"yes","pause_on_hover":"yes","pause_on_interaction":"yes","autoplay_speed":5000,"infinite":"yes","effect":"slide","speed":500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 2\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/ourdemos.in\/enquiry365\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-21-2026-01_55_01-PM.png?fit=1402%2C1122&ssl=1\" alt=\"ChatGPT Image Jun 21, 2026, 01_55_01 PM\" loading=\"lazy\"><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 2\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/ourdemos.in\/enquiry365\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-21-2026-01_57_40-PM.png?fit=1402%2C1122&ssl=1\" alt=\"ChatGPT Image Jun 21, 2026, 01_57_40 PM\" loading=\"lazy\"><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63bee7b elementor-widget elementor-widget-image-carousel\" data-id=\"63bee7b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"slides_to_show":"1","navigation":"none","autoplay":"yes","pause_on_hover":"yes","pause_on_interaction":"yes","autoplay_speed":5000,"infinite":"yes","effect":"slide","speed":500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 2\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/ourdemos.in\/enquiry365\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-21-2026-01_57_02-PM.png?fit=1402%2C1122&ssl=1\" alt=\"ChatGPT Image Jun 21, 2026, 01_57_02 PM\" loading=\"lazy\"><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 2\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/ourdemos.in\/enquiry365\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-21-2026-01_58_33-PM.png?fit=1402%2C1122&ssl=1\" alt=\"ChatGPT Image Jun 21, 2026, 01_58_33 PM\" loading=\"lazy\"><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6427d69 elementor-widget elementor-widget-image-carousel\" data-id=\"6427d69\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"slides_to_show":"1","navigation":"none","autoplay":"yes","pause_on_hover":"yes","pause_on_interaction":"yes","autoplay_speed":5000,"infinite":"yes","effect":"slide","speed":500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Image Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 3\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/ourdemos.in\/enquiry365\/wp-content\/uploads\/2026\/06\/dm.png?fit=941%2C1672&ssl=1\" alt=\"dm\" loading=\"lazy\"><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 3\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/ourdemos.in\/enquiry365\/wp-content\/uploads\/2026\/06\/Beauty-and-personal-care.png?fit=941%2C1672&ssl=1\" alt=\"Beauty and personal care\" loading=\"lazy\"><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 3\"><figure class=\"swiper-slide-inner\"><img decoding=\"async\" class=\"swiper-slide-image\" src=\"https:\/\/i0.wp.com\/ourdemos.in\/enquiry365\/wp-content\/uploads\/2026\/06\/Home-service.png?fit=941%2C1672&ssl=1\" alt=\"\" loading=\"lazy\"><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-05f0b6e elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"05f0b6e\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"stretch_section":"section-stretched","background_background":"classic","animation":"fadeIn"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d8cc367\" data-id=\"d8cc367\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6c09583 elementor-widget elementor-widget-spacer\" data-id=\"6c09583\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t<\/body>","protected":false},"excerpt":{"rendered":"<p>Percentage calculator Best percentage calculator with 8 modes, visual bars, formula display and history Percentage Calculator 8 calculation modes \u2014 instant results, formulas & visual breakdowns Calculator X% of Y X is ?% of Y % change Find original % more\/less Split % Tip & total Discount Result Enter values above to see results Recent […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"om_disable_all_campaigns":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-15454","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ourdemos.in\/enquiry365\/wp-json\/wp\/v2\/pages\/15454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ourdemos.in\/enquiry365\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ourdemos.in\/enquiry365\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ourdemos.in\/enquiry365\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ourdemos.in\/enquiry365\/wp-json\/wp\/v2\/comments?post=15454"}],"version-history":[{"count":5,"href":"https:\/\/ourdemos.in\/enquiry365\/wp-json\/wp\/v2\/pages\/15454\/revisions"}],"predecessor-version":[{"id":15559,"href":"https:\/\/ourdemos.in\/enquiry365\/wp-json\/wp\/v2\/pages\/15454\/revisions\/15559"}],"wp:attachment":[{"href":"https:\/\/ourdemos.in\/enquiry365\/wp-json\/wp\/v2\/media?parent=15454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}