Free Percentage Calculator Widget

<script src="https://hayneslab.dev/widgets/percentage-calculator.js" async></script>
<!-- Free Percentage Calculator widget by haynes lab — https://hayneslab.dev/tools/widgets/percentage-calculator -->

<!-- Free Percentage Calculator widget by haynes lab — https://hayneslab.dev/tools/widgets/percentage-calculator -->
<script>
/*!
 * haynes lab — Percentage Calculator widget (free)
 * Docs & embed code: https://hayneslab.dev/tools/widgets/percentage-calculator
 */
(function () {
  'use strict';

  var PREFIX = 'hlw-percentage-calculator';
  var STYLE_ID = 'hlw-percentage-calculator-styles';
  var instanceCount = 0;

  var MODES = [
    {
      key: 'of',
      label: 'X% of Y',
      labels: ['Percentage (%)', 'Value'],
      placeholders: ['e.g. 25', 'e.g. 200'],
      hint: 'What is X% of Y?'
    },
    {
      key: 'what',
      label: 'X is what % of Y',
      labels: ['Part', 'Whole'],
      placeholders: ['e.g. 50', 'e.g. 200'],
      hint: 'X is what percent of Y?'
    },
    {
      key: 'change',
      label: '% change',
      labels: ['From (old value)', 'To (new value)'],
      placeholders: ['e.g. 80', 'e.g. 100'],
      hint: 'Percent change from X to Y'
    }
  ];

  function findScript() {
    return document.currentScript ||
      document.querySelector('script[src*="widgets/percentage-calculator.js"]');
  }

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var css =
      '.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
      '.' + PREFIX + ' { position: relative; max-width: 420px; margin: 0 auto; padding: 24px 24px 40px;' +
      ' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
      ' font-size: 16px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
      ' border: 1px solid #e5e7eb; border-radius: 12px; }' +
      '.' + PREFIX + '__title { margin: 0 0 16px; font-size: 18px; font-weight: 600; color: #111827; }' +
      '.' + PREFIX + '__tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px;' +
      ' background: #f3f4f6; border-radius: 8px; }' +
      '.' + PREFIX + '__tab { flex: 1; padding: 7px 4px; border: 0; border-radius: 6px; background: transparent;' +
      ' color: #6b7280; font-size: 13px; font-weight: 500; cursor: pointer; }' +
      '.' + PREFIX + '__tab[aria-pressed="true"] { background: #ffffff; color: var(--hlw-accent);' +
      ' box-shadow: 0 1px 2px rgba(0,0,0,0.08); }' +
      '.' + PREFIX + '__tab:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
      '.' + PREFIX + '__fields { display: flex; gap: 12px; margin-bottom: 16px; }' +
      '.' + PREFIX + '__field { flex: 1; min-width: 0; }' +
      '.' + PREFIX + '__label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: #4b5563; }' +
      '.' + PREFIX + '__input { width: 100%; padding: 8px 10px; font-size: 15px; color: #111827;' +
      ' border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; font-family: inherit; }' +
      '.' + PREFIX + '__input:focus { outline: 2px solid var(--hlw-accent); outline-offset: 1px;' +
      ' border-color: var(--hlw-accent); }' +
      '.' + PREFIX + '__result { text-align: center; }' +
      '.' + PREFIX + '__value { font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--hlw-accent);' +
      ' word-break: break-word; }' +
      '.' + PREFIX + '__formula { margin-top: 6px; font-size: 14px; color: #374151; }' +
      '.' + PREFIX + '__hint { margin-top: 6px; font-size: 13px; color: #9ca3af; }' +
      '.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
      ' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
      '.' + PREFIX + '__credit svg { display: block; }' +
      '.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
      '@media (max-width: 400px) { .' + PREFIX + '__fields { flex-direction: column; } }';
    var style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = css;
    document.head.appendChild(style);
  }

  function el(tag, className, text) {
    var node = document.createElement(tag);
    if (className) node.className = className;
    if (text != null) node.textContent = text;
    return node;
  }

  function logoSvg() {
    var svgNS = 'http://www.w3.org/2000/svg';
    var svg = document.createElementNS(svgNS, 'svg');
    svg.setAttribute('viewBox', '0 0 32 32');
    svg.setAttribute('width', '13');
    svg.setAttribute('height', '13');
    svg.setAttribute('aria-hidden', 'true');
    svg.setAttribute('focusable', 'false');
    function circle(cx, cy, r, attrs) {
      var c = document.createElementNS(svgNS, 'circle');
      c.setAttribute('cx', cx);
      c.setAttribute('cy', cy);
      c.setAttribute('r', r);
      for (var key in attrs) c.setAttribute(key, attrs[key]);
      svg.appendChild(c);
    }
    circle(16, 16, 16, { fill: '#0f0a0a' });
    circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
    circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
    circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
    circle(16, 16, 3, { fill: '#06b6d4' });
    circle(24.5, 7.5, 2, { fill: '#f97316' });
    circle(7, 16, 1.8, { fill: '#f97316' });
    circle(20, 20, 1.5, { fill: '#f97316' });
    return svg;
  }

  function formatNum(n) {
    if (!isFinite(n)) return '—';
    var rounded = Math.abs(n) >= 1000 ? Math.round(n * 100) / 100 : Math.round(n * 10000) / 10000;
    return String(rounded);
  }

  function build(script) {
    var accent = script.getAttribute('data-hl-accent') || '#f97316';
    instanceCount += 1;

    injectStyles();

    var root = el('div', PREFIX);
    root.style.setProperty('--hlw-accent', accent);

    root.appendChild(el('h3', PREFIX + '__title', 'Percentage Calculator'));

    var tabs = el('div', PREFIX + '__tabs');
    tabs.setAttribute('role', 'group');
    tabs.setAttribute('aria-label', 'Calculation mode');
    var tabButtons = MODES.map(function (m) {
      var btn = el('button', PREFIX + '__tab', m.label);
      btn.type = 'button';
      tabs.appendChild(btn);
      return btn;
    });
    root.appendChild(tabs);

    var fields = el('div', PREFIX + '__fields');
    var inputs = [];
    var labels = [];
    for (var i = 0; i < 2; i++) {
      var field = el('div', PREFIX + '__field');
      var label = el('label', PREFIX + '__label');
      var input = el('input', PREFIX + '__input');
      input.type = 'number';
      input.step = 'any';
      input.setAttribute('inputmode', 'decimal');
      var id = PREFIX + '-input-' + instanceCount + '-' + i;
      label.setAttribute('for', id);
      input.id = id;
      field.appendChild(label);
      field.appendChild(input);
      fields.appendChild(field);
      inputs.push(input);
      labels.push(label);
    }
    root.appendChild(fields);

    var result = el('div', PREFIX + '__result');
    result.setAttribute('aria-live', 'polite');
    var value = el('div', PREFIX + '__value', '—');
    var formula = el('div', PREFIX + '__formula');
    var hint = el('div', PREFIX + '__hint');
    result.appendChild(value);
    result.appendChild(formula);
    result.appendChild(hint);
    root.appendChild(result);

    var mode = MODES[0];

    function update() {
      var a = parseFloat(inputs[0].value);
      var b = parseFloat(inputs[1].value);
      if (!isFinite(a) || !isFinite(b)) {
        value.textContent = '—';
        formula.textContent = '';
        hint.textContent = mode.hint;
        return;
      }
      var res;
      if (mode.key === 'of') {
        res = a / 100 * b;
        value.textContent = formatNum(res);
        formula.textContent = a + '% of ' + b + ' = ' + formatNum(res);
      } else if (mode.key === 'what') {
        if (b === 0) {
          value.textContent = '—';
          formula.textContent = 'Cannot divide by 0';
        } else {
          res = a / b * 100;
          value.textContent = formatNum(res) + '%';
          formula.textContent = a + ' is ' + formatNum(res) + '% of ' + b;
        }
      } else {
        if (a === 0) {
          value.textContent = '—';
          formula.textContent = 'Cannot divide by 0';
        } else {
          res = (b - a) / Math.abs(a) * 100;
          var sign = res >= 0 ? '+' : '';
          value.textContent = sign + formatNum(res) + '%';
          formula.textContent = 'From ' + a + ' to ' + b + ' is a ' + sign + formatNum(res) + '% change';
        }
      }
      hint.textContent = '';
    }

    function setMode(m) {
      mode = m;
      tabButtons.forEach(function (btn, bi) {
        btn.setAttribute('aria-pressed', MODES[bi] === m ? 'true' : 'false');
      });
      labels[0].textContent = m.labels[0];
      labels[1].textContent = m.labels[1];
      inputs[0].placeholder = m.placeholders[0];
      inputs[1].placeholder = m.placeholders[1];
      update();
    }

    tabButtons.forEach(function (btn, bi) {
      btn.addEventListener('click', function () { setMode(MODES[bi]); });
    });
    inputs[0].addEventListener('input', update);
    inputs[1].addEventListener('input', update);

    setMode(MODES[0]);

    var credit = el('a', PREFIX + '__credit');
    credit.appendChild(logoSvg());
    credit.appendChild(document.createTextNode('Powered by haynes lab'));
    credit.href = 'https://hayneslab.dev/tools/widgets/percentage-calculator';
    credit.target = '_blank';
    credit.rel = 'noopener';
    root.appendChild(credit);

    if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
      script.insertAdjacentElement('afterend', root);
    } else {
      document.body.appendChild(root);
    }
  }

  function init() {
    var script = findScript();
    if (!script) {
      console.warn('[haynes lab percentage-calculator] Could not locate its own script tag. Nothing rendered.');
      return;
    }
    build(script);
  }

  if (document.body) {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
})();

</script>