{"id":830,"date":"2026-07-21T08:17:07","date_gmt":"2026-07-21T08:17:07","guid":{"rendered":"https:\/\/aizonic.site\/?page_id=830"},"modified":"2026-07-21T08:20:29","modified_gmt":"2026-07-21T08:20:29","slug":"percentage-calculator","status":"publish","type":"page","link":"https:\/\/aizonic.site\/percentage-calculator\/","title":{"rendered":"Percentage Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"830\" class=\"elementor elementor-830\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51123c4 e-flex e-con-boxed e-con e-parent\" data-id=\"51123c4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0566224 e-con-full e-flex e-con e-child\" data-id=\"0566224\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-8b22add e-con-full e-flex e-con e-child\" data-id=\"8b22add\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a19ae5 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"6a19ae5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/aizonic.site\/wp-content\/uploads\/2026\/07\/icon-percentage-calculator.png\" title=\"icon-percentage-calculator\" alt=\"icon-percentage-calculator\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c5bf286 e-con-full e-flex e-con e-child\" data-id=\"c5bf286\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-ac85345 e-con-full e-flex e-con e-child\" data-id=\"ac85345\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5733346 elementor-widget elementor-widget-heading\" data-id=\"5733346\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Percentage Generator<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cefe927 elementor-widget elementor-widget-heading\" data-id=\"cefe927\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">calculate three calculations of percentage.<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-176a359 e-flex e-con-boxed e-con e-parent\" data-id=\"176a359\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b906ef2 elementor-widget elementor-widget-html\" data-id=\"b906ef2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"pc-percentage-calculator\" class=\"pc-wrap\">\n  <style>\n    #pc-percentage-calculator {\n      --pc-bg: #14161a; --pc-panel: #1c1f25; --pc-border: #2c303a;\n      --pc-text: #e9ebf0; --pc-muted: #9aa0ac; --pc-accent: #5eead4; --pc-accent-dim: #1f4b45;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      color: var(--pc-text); max-width: 640px; margin: 0 auto; box-sizing: border-box;\n    }\n    #pc-percentage-calculator *, #pc-percentage-calculator *::before, #pc-percentage-calculator *::after { box-sizing: border-box; }\n    .pc-card { background: var(--pc-panel); border: 1px solid var(--pc-border); border-radius: 16px; padding: 28px; }\n    .pc-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }\n    .pc-subtitle { font-size: 14px; color: var(--pc-muted); margin: 0 0 20px; }\n    .pc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }\n    .pc-tab {\n      background: var(--pc-bg); border: 1px solid var(--pc-border); color: var(--pc-muted);\n      border-radius: 8px; padding: 9px 14px; font-size: 13px; cursor: pointer; flex: 1; min-width: 140px; text-align: center;\n    }\n    .pc-tab.pc-active { border-color: var(--pc-accent); color: var(--pc-accent); background: rgba(94, 234, 212, 0.08); }\n    .pc-panel { display: none; }\n    .pc-panel.pc-visible { display: block; }\n    .pc-sentence { font-size: 15px; line-height: 2.2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }\n    .pc-input {\n      width: 90px; background: var(--pc-bg); border: 1px solid var(--pc-border); color: var(--pc-text);\n      border-radius: 8px; padding: 8px 10px; font-size: 15px; text-align: center;\n    }\n    .pc-input:focus { outline: 1px solid var(--pc-accent); }\n    .pc-result {\n      margin-top: 20px; background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: 10px;\n      padding: 18px; text-align: center;\n    }\n    .pc-result-val { font-size: 28px; font-weight: 700; color: var(--pc-accent); }\n    .pc-result-label { font-size: 12px; color: var(--pc-muted); margin-top: 4px; }\n  <\/style>\n  <div class=\"pc-card\">\n    <p class=\"pc-title\">Percentage Calculator<\/p>\n    <p class=\"pc-subtitle\">Three common percentage calculations, all in one place.<\/p>\n\n    <div class=\"pc-tabs\">\n      <div class=\"pc-tab pc-active\" data-tab=\"of\">X% of Y<\/div>\n      <div class=\"pc-tab\" data-tab=\"what\">X is what % of Y<\/div>\n      <div class=\"pc-tab\" data-tab=\"change\">% change from X to Y<\/div>\n    <\/div>\n\n    <div class=\"pc-panel pc-visible\" data-panel=\"of\">\n      <div class=\"pc-sentence\">\n        What is <input class=\"pc-input\" id=\"pcOfX\" type=\"number\" value=\"20\"> % of <input class=\"pc-input\" id=\"pcOfY\" type=\"number\" value=\"150\"> ?\n      <\/div>\n      <div class=\"pc-result\"><div class=\"pc-result-val\" id=\"pcOfResult\">30<\/div><div class=\"pc-result-label\" id=\"pcOfLabel\"><\/div><\/div>\n    <\/div>\n\n    <div class=\"pc-panel\" data-panel=\"what\">\n      <div class=\"pc-sentence\">\n        <input class=\"pc-input\" id=\"pcWhatX\" type=\"number\" value=\"30\"> is what % of <input class=\"pc-input\" id=\"pcWhatY\" type=\"number\" value=\"150\"> ?\n      <\/div>\n      <div class=\"pc-result\"><div class=\"pc-result-val\" id=\"pcWhatResult\">20%<\/div><div class=\"pc-result-label\"><\/div><\/div>\n    <\/div>\n\n    <div class=\"pc-panel\" data-panel=\"change\">\n      <div class=\"pc-sentence\">\n        From <input class=\"pc-input\" id=\"pcChangeX\" type=\"number\" value=\"100\"> to <input class=\"pc-input\" id=\"pcChangeY\" type=\"number\" value=\"120\">\n      <\/div>\n      <div class=\"pc-result\"><div class=\"pc-result-val\" id=\"pcChangeResult\">+20%<\/div><div class=\"pc-result-label\" id=\"pcChangeLabel\">Increase<\/div><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<script>\n(function () {\n  const wrap = document.getElementById('pc-percentage-calculator');\n  const tabs = wrap.querySelectorAll('.pc-tab');\n  const panels = wrap.querySelectorAll('.pc-panel');\n\n  tabs.forEach(tab => {\n    tab.addEventListener('click', () => {\n      tabs.forEach(t => t.classList.remove('pc-active'));\n      panels.forEach(p => p.classList.remove('pc-visible'));\n      tab.classList.add('pc-active');\n      wrap.querySelector(`.pc-panel[data-panel=\"${tab.dataset.tab}\"]`).classList.add('pc-visible');\n    });\n  });\n\n  function fmt(n) {\n    if (!isFinite(n)) return '\u2014';\n    return Math.round(n * 100) \/ 100;\n  }\n\n  \/\/ X% of Y\n  const ofX = wrap.querySelector('#pcOfX'), ofY = wrap.querySelector('#pcOfY'), ofResult = wrap.querySelector('#pcOfResult');\n  function calcOf() {\n    const x = parseFloat(ofX.value) || 0, y = parseFloat(ofY.value) || 0;\n    ofResult.textContent = fmt((x \/ 100) * y);\n  }\n  ofX.addEventListener('input', calcOf);\n  ofY.addEventListener('input', calcOf);\n  calcOf();\n\n  \/\/ X is what % of Y\n  const whatX = wrap.querySelector('#pcWhatX'), whatY = wrap.querySelector('#pcWhatY'), whatResult = wrap.querySelector('#pcWhatResult');\n  function calcWhat() {\n    const x = parseFloat(whatX.value) || 0, y = parseFloat(whatY.value) || 0;\n    whatResult.textContent = (y === 0 ? '\u2014' : fmt((x \/ y) * 100) + '%');\n  }\n  whatX.addEventListener('input', calcWhat);\n  whatY.addEventListener('input', calcWhat);\n  calcWhat();\n\n  \/\/ % change\n  const changeX = wrap.querySelector('#pcChangeX'), changeY = wrap.querySelector('#pcChangeY'),\n        changeResult = wrap.querySelector('#pcChangeResult'), changeLabel = wrap.querySelector('#pcChangeLabel');\n  function calcChange() {\n    const x = parseFloat(changeX.value) || 0, y = parseFloat(changeY.value) || 0;\n    if (x === 0) { changeResult.textContent = '\u2014'; changeLabel.textContent = ''; return; }\n    const pct = ((y - x) \/ Math.abs(x)) * 100;\n    changeResult.textContent = (pct >= 0 ? '+' : '') + fmt(pct) + '%';\n    changeLabel.textContent = pct > 0 ? 'Increase' : pct < 0 ? 'Decrease' : 'No change';\n  }\n  changeX.addEventListener('input', calcChange);\n  changeY.addEventListener('input', calcChange);\n  calcChange();\n})();\n<\/script>\n\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>Percentage Generator calculate three calculations of percentage. Percentage Calculator Three common percentage calculations, all in one place. X% of Y [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-830","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/pages\/830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/comments?post=830"}],"version-history":[{"count":4,"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/pages\/830\/revisions"}],"predecessor-version":[{"id":835,"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/pages\/830\/revisions\/835"}],"wp:attachment":[{"href":"https:\/\/aizonic.site\/wp-json\/wp\/v2\/media?parent=830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}