feat: added unit conversion buttons

js/measurements.js

@@ -0,0 +1,87 @@
+/**
+ * Client-side measurement toggle.
+ * Default: metric units, collapsed times (rendered at build time).
+ * Each measurement type gets its own toggle button.
+ *
+ * Each measurement span has data-default and data-alt attributes
+ * pre-computed at build time. This script just swaps between them
+ * per measurement type.
+ */
+
+(function () {
+  'use strict';
+
+  // Track which types are showing alt text
+  var showingAlt = {};
+
+  var TYPE_LABELS = {
+    temperature: { toAlt: '°F', toDefault: '°C' },
+    weight:      { toAlt: 'lb', toDefault: 'kg' },
+    volume:      { toAlt: 'cups', toDefault: 'ml' },
+    dimension:   { toAlt: 'inch', toDefault: 'cm' },
+    time:        { toAlt: 'hr+min', toDefault: 'min' },
+  };
+
+  function toggleType(type) {
+    showingAlt[type] = !showingAlt[type];
+    var isAlt = showingAlt[type];
+
+    // Update all spans of this type
+    var spans = document.querySelectorAll('span.measurement[data-measurement-type="' + type + '"]');
+    spans.forEach(function (span) {
+      var text = isAlt
+        ? span.getAttribute('data-alt')
+        : span.getAttribute('data-default');
+      if (text) span.textContent = text;
+    });
+
+    // Update button text
+    var btn = document.querySelector('.measurement-toggle-btn[data-toggle-type="' + type + '"]');
+    if (btn) {
+      var labels = TYPE_LABELS[type];
+      btn.textContent = isAlt ? labels.toAlt : labels.toDefault;
+    }
+  }
+
+  function init() {
+    var container = document.querySelector('.measurement-toggles');
+    if (!container) return;
+
+    // Detect which types exist and have toggleable content
+    var typeHasToggle = {};
+    var spans = document.querySelectorAll('span.measurement');
+    spans.forEach(function (span) {
+      var type = span.getAttribute('data-measurement-type');
+      if (!type) return;
+      var def = span.getAttribute('data-default');
+      var alt = span.getAttribute('data-alt');
+      if (def !== alt) typeHasToggle[type] = true;
+    });
+
+    var typeOrder = ['temperature', 'weight', 'volume', 'dimension', 'time'];
+    var hasAny = false;
+
+    typeOrder.forEach(function (type) {
+      if (!typeHasToggle[type]) return;
+      hasAny = true;
+      showingAlt[type] = false;
+
+      var btn = document.createElement('button');
+      btn.className = 'measurement-toggle-btn';
+      btn.setAttribute('data-toggle-type', type);
+      btn.textContent = TYPE_LABELS[type].toDefault;
+      btn.addEventListener('click', function () { toggleType(type); });
+      container.appendChild(btn);
+    });
+
+    if (hasAny) {
+      container.style.display = 'flex';
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();