Free Tip Calculator Widget

<script src="https://hayneslab.dev/widgets/tip-calculator.js" data-hl-default-percent="18" async></script>
<!-- Free Tip Calculator widget by haynes lab — https://hayneslab.dev/tools/widgets/tip-calculator -->

<!-- Free Tip Calculator widget by haynes lab — https://hayneslab.dev/tools/widgets/tip-calculator -->
<script data-hl-default-percent="18">
/*!
 * haynes lab — Tip Calculator widget (free)
 * Docs & embed code: https://hayneslab.dev/tools/widgets/tip-calculator
 */
(function () {
  'use strict';

  var PREFIX = 'hlw-tip-calculator';
  var STYLE_ID = 'hlw-tip-calculator-styles';
  var PRESETS = [10, 15, 18, 20, 25];

  function findScript() {
    return document.currentScript ||
      document.querySelector('script[src*="widgets/tip-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 30px;' +
      ' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
      ' font-size: 15px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
      ' border: 1px solid #e5e7eb; border-radius: 12px; }' +
      '.' + PREFIX + '__label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin: 0 0 6px; }' +
      '.' + PREFIX + '__field { margin-bottom: 16px; }' +
      '.' + PREFIX + '__input { width: 100%; padding: 9px 12px; font: inherit; color: #111827;' +
      ' background: #ffffff; border: 1px solid #d1d5db; border-radius: 8px; }' +
      '.' + PREFIX + '__input:focus { outline: 2px solid var(--hlw-accent); outline-offset: 1px; border-color: var(--hlw-accent); }' +
      '.' + PREFIX + '__presets { display: flex; flex-wrap: wrap; gap: 8px; }' +
      '.' + PREFIX + '__preset { flex: 1 1 auto; min-width: 52px; padding: 8px 10px; font: inherit; font-weight: 600;' +
      ' color: #374151; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; }' +
      '.' + PREFIX + '__preset:hover { border-color: var(--hlw-accent); color: var(--hlw-accent); }' +
      '.' + PREFIX + '__preset[aria-pressed="true"] { background: var(--hlw-accent); border-color: var(--hlw-accent); color: #ffffff; }' +
      '.' + PREFIX + '__preset:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
      '.' + PREFIX + '__custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; }' +
      '.' + PREFIX + '__custom .' + PREFIX + '__input { flex: 1; }' +
      '.' + PREFIX + '__custom-label { font-size: 13px; color: #6b7280; white-space: nowrap; }' +
      '.' + PREFIX + '__split { display: flex; align-items: stretch; gap: 8px; }' +
      '.' + PREFIX + '__step { width: 40px; padding: 0; font: inherit; font-size: 18px; line-height: 1;' +
      ' color: #374151; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; }' +
      '.' + PREFIX + '__step:hover { border-color: var(--hlw-accent); color: var(--hlw-accent); }' +
      '.' + PREFIX + '__step:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
      '.' + PREFIX + '__split .' + PREFIX + '__input { flex: 1; text-align: center; }' +
      '.' + PREFIX + '__results { margin-top: 4px; padding-top: 16px; border-top: 1px solid #e5e7eb; }' +
      '.' + PREFIX + '__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }' +
      '.' + PREFIX + '__row-label { font-size: 14px; color: #6b7280; }' +
      '.' + PREFIX + '__row-value { font-weight: 600; font-size: 15px; color: #111827; }' +
      '.' + PREFIX + '__row--total .' + PREFIX + '__row-label { font-size: 15px; font-weight: 600; color: #374151; }' +
      '.' + PREFIX + '__row--total .' + PREFIX + '__row-value { font-size: 22px; color: var(--hlw-accent); }' +
      '.' + 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; }';
    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 parsePercent(value, fallback) {
    var n = parseFloat(value);
    if (isNaN(n) || n < 0 || n > 100) return fallback;
    return n;
  }

  function build(script) {
    var currency = (script.getAttribute('data-hl-currency') || 'USD').toUpperCase();
    var accent = script.getAttribute('data-hl-accent') || '#f97316';
    var defaultPercent = parsePercent(script.getAttribute('data-hl-default-percent'), 15);

    var fmt;
    try {
      fmt = new Intl.NumberFormat(undefined, { style: 'currency', currency: currency });
    } catch (e) {
      console.warn('[haynes lab tip-calculator] Unknown currency "' + currency + '". Falling back to USD.');
      fmt = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD' });
    }

    injectStyles();

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

    // Bill amount
    var billField = el('div', PREFIX + '__field');
    var billLabel = el('label', PREFIX + '__label', 'Bill amount');
    var billInput = el('input', PREFIX + '__input');
    billInput.type = 'text';
    billInput.inputMode = 'decimal';
    billInput.placeholder = '0.00';
    billLabel.htmlFor = billInput.id = PREFIX + '-bill-' + Math.random().toString(36).slice(2, 8);
    billLabel.appendChild(billInput);
    billField.appendChild(billLabel);
    root.appendChild(billField);

    // Tip presets
    var tipField = el('div', PREFIX + '__field');
    tipField.appendChild(el('span', PREFIX + '__label', 'Tip percentage'));
    var presets = el('div', PREFIX + '__presets');
    var presetButtons = [];
    PRESETS.forEach(function (p) {
      var btn = el('button', PREFIX + '__preset', p + '%');
      btn.type = 'button';
      btn.setAttribute('aria-pressed', 'false');
      btn.addEventListener('click', function () { setPercent(p, true); });
      presets.appendChild(btn);
      presetButtons.push({ value: p, node: btn });
    });
    tipField.appendChild(presets);

    var customRow = el('div', PREFIX + '__custom');
    var customLabel = el('label', PREFIX + '__custom-label', 'Custom %');
    var customInput = el('input', PREFIX + '__input');
    customInput.type = 'number';
    customInput.min = '0';
    customInput.max = '100';
    customInput.step = '0.5';
    customInput.placeholder = '15';
    customLabel.htmlFor = customInput.id = PREFIX + '-custom-' + Math.random().toString(36).slice(2, 8);
    customRow.appendChild(customLabel);
    customRow.appendChild(customInput);
    tipField.appendChild(customRow);
    root.appendChild(tipField);

    // Split count
    var splitField = el('div', PREFIX + '__field');
    var splitLabel = el('label', PREFIX + '__label', 'Split between');
    var splitRow = el('div', PREFIX + '__split');
    var minus = el('button', PREFIX + '__step', '−');
    minus.type = 'button';
    minus.setAttribute('aria-label', 'Fewer people');
    var splitInput = el('input', PREFIX + '__input');
    splitInput.type = 'number';
    splitInput.min = '1';
    splitInput.max = '99';
    splitInput.step = '1';
    splitInput.value = '1';
    splitLabel.htmlFor = splitInput.id = PREFIX + '-split-' + Math.random().toString(36).slice(2, 8);
    var plus = el('button', PREFIX + '__step', '+');
    plus.type = 'button';
    plus.setAttribute('aria-label', 'More people');
    splitRow.appendChild(minus);
    splitRow.appendChild(splitInput);
    splitRow.appendChild(plus);
    splitLabel.appendChild(splitRow);
    splitField.appendChild(splitLabel);
    root.appendChild(splitField);

    // Results
    var results = el('div', PREFIX + '__results');
    results.setAttribute('aria-live', 'polite');
    var tipValue = el('span', PREFIX + '__row-value', '—');
    var totalValue = el('span', PREFIX + '__row-value', '—');
    var perPersonValue = el('span', PREFIX + '__row-value', '—');

    var tipRow = el('div', PREFIX + '__row');
    tipRow.appendChild(el('span', PREFIX + '__row-label', 'Tip'));
    tipRow.appendChild(tipValue);
    var totalRow = el('div', PREFIX + '__row ' + PREFIX + '__row--total');
    totalRow.appendChild(el('span', PREFIX + '__row-label', 'Total'));
    totalRow.appendChild(totalValue);
    var perPersonRow = el('div', PREFIX + '__row');
    perPersonRow.appendChild(el('span', PREFIX + '__row-label', 'Per person'));
    perPersonRow.appendChild(perPersonValue);
    results.appendChild(tipRow);
    results.appendChild(totalRow);
    results.appendChild(perPersonRow);
    root.appendChild(results);

    function currentPercent() {
      var pressed = null;
      presetButtons.forEach(function (p) {
        if (p.node.getAttribute('aria-pressed') === 'true') pressed = p.value;
      });
      if (customInput.value !== '') return parsePercent(customInput.value, pressed != null ? pressed : defaultPercent);
      return pressed != null ? pressed : defaultPercent;
    }

    function setPercent(p, fromPreset) {
      presetButtons.forEach(function (b) {
        b.node.setAttribute('aria-pressed', b.value === p ? 'true' : 'false');
      });
      if (fromPreset) customInput.value = '';
      update();
    }

    function currentSplit() {
      var n = parseInt(splitInput.value, 10);
      if (isNaN(n) || n < 1) return 1;
      return Math.min(n, 99);
    }

    function update() {
      var bill = parseFloat(String(billInput.value).replace(/[^0-9.]/g, ''));
      if (isNaN(bill) || bill < 0) {
        tipValue.textContent = '—';
        totalValue.textContent = '—';
        perPersonValue.textContent = '—';
        return;
      }
      var tip = bill * currentPercent() / 100;
      var total = bill + tip;
      tipValue.textContent = fmt.format(tip);
      totalValue.textContent = fmt.format(total);
      perPersonValue.textContent = fmt.format(total / currentSplit());
    }

    customInput.addEventListener('input', function () {
      if (customInput.value !== '') {
        presetButtons.forEach(function (b) { b.node.setAttribute('aria-pressed', 'false'); });
      }
      update();
    });
    billInput.addEventListener('input', update);
    splitInput.addEventListener('input', update);
    minus.addEventListener('click', function () {
      splitInput.value = String(Math.max(1, currentSplit() - 1));
      update();
    });
    plus.addEventListener('click', function () {
      splitInput.value = String(Math.min(99, currentSplit() + 1));
      update();
    });

    // Apply default percent (preset button if it matches, otherwise custom box).
    var matched = presetButtons.some(function (b) { return b.value === defaultPercent; });
    if (matched) {
      setPercent(defaultPercent, true);
    } else {
      customInput.value = String(defaultPercent);
      update();
    }

    var credit = el('a', PREFIX + '__credit');
    credit.appendChild(logoSvg());
    credit.appendChild(document.createTextNode('Powered by haynes lab'));
    credit.href = 'https://hayneslab.dev/tools/widgets/tip-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 tip-calculator] Could not locate its own script tag. Nothing rendered.');
      return;
    }
    build(script);
  }

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

</script>