Free BMI Calculator Widget

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

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

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

  var CATEGORIES = [
    { max: 18.5, label: 'Underweight', color: '#3b82f6' },
    { max: 25, label: 'Healthy weight', color: '#22c55e' },
    { max: 30, label: 'Overweight', color: '#f59e0b' },
    { max: Infinity, label: 'Obese', color: '#ef4444' }
  ];
  var SCALE_MIN = 14;
  var SCALE_MAX = 40;

  function findScript() {
    return document.currentScript ||
      document.querySelector('script[src*="widgets/bmi-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 + '__toggle { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px;' +
      ' background: #f3f4f6; border-radius: 8px; }' +
      '.' + PREFIX + '__unit { flex: 1; padding: 7px 0; border: 0; border-radius: 6px; background: transparent;' +
      ' color: #6b7280; font-size: 14px; font-weight: 500; cursor: pointer; }' +
      '.' + PREFIX + '__unit[aria-pressed="true"] { background: #ffffff; color: var(--hlw-accent);' +
      ' box-shadow: 0 1px 2px rgba(0,0,0,0.08); }' +
      '.' + PREFIX + '__unit: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: 40px; font-weight: 700; line-height: 1.1; color: #111827; }' +
      '.' + PREFIX + '__badge { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 999px;' +
      ' font-size: 13px; font-weight: 600; color: #ffffff; }' +
      '.' + PREFIX + '__hint { margin-top: 8px; font-size: 13px; color: #9ca3af; }' +
      '.' + PREFIX + '__scale { position: relative; display: flex; height: 8px; margin-top: 20px;' +
      ' border-radius: 999px; overflow: visible; }' +
      '.' + PREFIX + '__segment { flex: 1; height: 100%; }' +
      '.' + PREFIX + '__segment:first-child { border-radius: 999px 0 0 999px; }' +
      '.' + PREFIX + '__segment:last-child { border-radius: 0 999px 999px 0; }' +
      '.' + PREFIX + '__marker { position: absolute; top: 50%; width: 16px; height: 16px;' +
      ' transform: translate(-50%, -50%); border: 3px solid #ffffff; border-radius: 50%;' +
      ' box-shadow: 0 1px 3px rgba(0,0,0,0.3); }' +
      '.' + 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 categoryFor(bmi) {
    for (var i = 0; i < CATEGORIES.length; i++) {
      if (bmi < CATEGORIES[i].max) return CATEGORIES[i];
    }
    return CATEGORIES[CATEGORIES.length - 1];
  }

  function build(script) {
    var units = script.getAttribute('data-hl-units') === 'imperial' ? 'imperial' : 'metric';
    var accent = script.getAttribute('data-hl-accent') || '#f97316';

    injectStyles();

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

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

    var toggle = el('div', PREFIX + '__toggle');
    toggle.setAttribute('role', 'group');
    toggle.setAttribute('aria-label', 'Unit system');
    var metricBtn = el('button', PREFIX + '__unit', 'Metric (cm / kg)');
    metricBtn.type = 'button';
    var imperialBtn = el('button', PREFIX + '__unit', 'Imperial (in / lb)');
    imperialBtn.type = 'button';
    toggle.appendChild(metricBtn);
    toggle.appendChild(imperialBtn);
    root.appendChild(toggle);

    var fields = el('div', PREFIX + '__fields');
    var heightField = el('div', PREFIX + '__field');
    var heightLabel = el('label', PREFIX + '__label', 'Height');
    var heightInput = el('input', PREFIX + '__input');
    heightInput.type = 'number';
    heightInput.min = '0';
    heightInput.step = 'any';
    heightInput.setAttribute('inputmode', 'decimal');
    instanceCount += 1;
    var heightId = PREFIX + '-height-' + instanceCount;
    heightLabel.setAttribute('for', heightId);
    heightInput.id = heightId;
    heightField.appendChild(heightLabel);
    heightField.appendChild(heightInput);

    var weightField = el('div', PREFIX + '__field');
    var weightLabel = el('label', PREFIX + '__label', 'Weight');
    var weightInput = el('input', PREFIX + '__input');
    weightInput.type = 'number';
    weightInput.min = '0';
    weightInput.step = 'any';
    weightInput.setAttribute('inputmode', 'decimal');
    var weightId = PREFIX + '-weight-' + instanceCount;
    weightLabel.setAttribute('for', weightId);
    weightInput.id = weightId;
    weightField.appendChild(weightLabel);
    weightField.appendChild(weightInput);
    fields.appendChild(heightField);
    fields.appendChild(weightField);
    root.appendChild(fields);

    var result = el('div', PREFIX + '__result');
    result.setAttribute('aria-live', 'polite');
    var value = el('div', PREFIX + '__value', '—');
    var badge = el('span', PREFIX + '__badge');
    var hint = el('div', PREFIX + '__hint', 'Enter your height and weight');
    result.appendChild(value);
    result.appendChild(badge);
    result.appendChild(hint);
    root.appendChild(result);

    var scale = el('div', PREFIX + '__scale');
    scale.setAttribute('aria-hidden', 'true');
    var SEGMENTS = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444'];
    var SPANS = [18.5 - SCALE_MIN, 25 - 18.5, 30 - 25, SCALE_MAX - 30];
    var totalSpan = SCALE_MAX - SCALE_MIN;
    SEGMENTS.forEach(function (color, i) {
      var seg = el('div', PREFIX + '__segment');
      seg.style.background = color;
      seg.style.flexGrow = String(SPANS[i] / totalSpan);
      scale.appendChild(seg);
    });
    var marker = el('div', PREFIX + '__marker');
    marker.style.display = 'none';
    scale.appendChild(marker);
    root.appendChild(scale);

    function currentUnits() {
      return imperialBtn.getAttribute('aria-pressed') === 'true' ? 'imperial' : 'metric';
    }

    function update() {
      var h = parseFloat(heightInput.value);
      var w = parseFloat(weightInput.value);
      var bmi;
      if (!isFinite(h) || !isFinite(w) || h <= 0 || w <= 0) {
        value.textContent = '—';
        badge.textContent = '';
        badge.style.display = 'none';
        hint.style.display = '';
        marker.style.display = 'none';
        return;
      }
      if (currentUnits() === 'imperial') {
        bmi = 703 * w / (h * h);
      } else {
        var m = h / 100;
        bmi = w / (m * m);
      }
      if (!isFinite(bmi) || bmi <= 0) return;
      var cat = categoryFor(bmi);
      value.textContent = bmi.toFixed(1);
      badge.textContent = cat.label;
      badge.style.display = '';
      badge.style.background = cat.color;
      hint.style.display = 'none';
      var pct = (bmi - SCALE_MIN) / (SCALE_MAX - SCALE_MIN);
      pct = Math.max(0, Math.min(1, pct));
      marker.style.display = '';
      marker.style.left = (pct * 100) + '%';
      marker.style.background = cat.color;
    }

    function setUnits(next) {
      if (next === currentUnits()) return;
      // Convert existing values so toggling doesn't lose the user's numbers.
      var h = parseFloat(heightInput.value);
      var w = parseFloat(weightInput.value);
      if (next === 'imperial') {
        if (isFinite(h) && h > 0) heightInput.value = (h / 2.54).toFixed(1);
        if (isFinite(w) && w > 0) weightInput.value = (w * 2.20462).toFixed(1);
        heightLabel.textContent = 'Height (in)';
        weightLabel.textContent = 'Weight (lb)';
      } else {
        if (isFinite(h) && h > 0) heightInput.value = (h * 2.54).toFixed(1);
        if (isFinite(w) && w > 0) weightInput.value = (w / 2.20462).toFixed(1);
        heightLabel.textContent = 'Height (cm)';
        weightLabel.textContent = 'Weight (kg)';
      }
      metricBtn.setAttribute('aria-pressed', next === 'metric' ? 'true' : 'false');
      imperialBtn.setAttribute('aria-pressed', next === 'imperial' ? 'true' : 'false');
      update();
    }

    metricBtn.addEventListener('click', function () { setUnits('metric'); });
    imperialBtn.addEventListener('click', function () { setUnits('imperial'); });
    heightInput.addEventListener('input', update);
    weightInput.addEventListener('input', update);

    // Apply initial unit labels/state.
    if (units === 'imperial') {
      heightLabel.textContent = 'Height (in)';
      weightLabel.textContent = 'Weight (lb)';
    } else {
      heightLabel.textContent = 'Height (cm)';
      weightLabel.textContent = 'Weight (kg)';
    }
    metricBtn.setAttribute('aria-pressed', units === 'metric' ? 'true' : 'false');
    imperialBtn.setAttribute('aria-pressed', units === 'imperial' ? 'true' : 'false');

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

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

</script>