Build a unit converter as a static web app in this directory: index.html, style.css, co…

pigpt-5.5 · 24 steps · 3m 36s · 5 filessession e021017c-09e@patrick-toulme
Build a unit converter as a static web app in this directory: index.html, style.css, convert.js. Categories: length, mass, temperature, data size, time. Instant two-way conversion between any pair in a category, swap button, precision selector, recent-conversions list in localStorage, keyboard-first UX, dark theme, and tests.html + tests.js exercising the conversion math including temperature edge cases. Run the tests headless with node and fix what fails.
same matchpi · 17 steps pi · 26 steps pi · 24 steps
compare in arena
step 09 / 24
convert.jschange 1/1
(function (root, factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.UnitConverter = factory();
  }
})(typeof self !== 'undefined' ? self : this, function () {
  'use strict';
 
  const CATEGORIES = {
    length: {
      label: 'Length',
      base: 'm',
      units: {
        m: { label: 'Meter', plural: 'Meters', factor: 1 },
        km: { label: 'Kilometer', plural: 'Kilometers', factor: 1000 },
        cm: { label: 'Centimeter', plural: 'Centimeters', factor: 0.01 },
        mm: { label: 'Millimeter', plural: 'Millimeters', factor: 0.001 },
        in: { label: 'Inch', plural: 'Inches', factor: 0.0254 },
        ft: { label: 'Foot', plural: 'Feet', factor: 0.3048 },
        yd: { label: 'Yard', plural: 'Yards', factor: 0.9144 },
        mi: { label: 'Mile', plural: 'Miles', factor: 1609.344 },
        nmi: { label: 'Nautical mile', plural: 'Nautical miles', factor: 1852 }
      }
    },
    mass: {
      label: 'Mass',
      base: 'kg',
      units: {
        kg: { label: 'Kilogram', plural: 'Kilograms', factor: 1 },
        g: { label: 'Gram', plural: 'Grams', factor: 0.001 },
        mg: { label: 'Milligram', plural: 'Milligrams', factor: 0.000001 },
        lb: { label: 'Pound', plural: 'Pounds', factor: 0.45359237 },
        oz: { label: 'Ounce', plural: 'Ounces', factor: 0.028349523125 },
        st: { label: 'Stone', plural: 'Stone', factor: 6.35029318 },
        t: { label: 'Metric ton', plural: 'Metric tons', factor: 1000 }
      }
    },
    temperature: {
      label: 'Temperature',
      base: 'C',
      units: {
        C: {
          label: 'Celsius', plural: 'Celsius',
          toBase: function (v) { return v; },
          fromBase: function (v) { return v; }
        },
        F: {
          label: 'Fahrenheit', plural: 'Fahrenheit',
          toBase: function (v) { return (v - 32) * 5 / 9; },
          fromBase: function (v) { return v * 9 / 5 + 32; }
        },
        K: {
          label: 'Kelvin', plural: 'Kelvin',
          toBase: function (v) { return v - 273.15; },
          fromBase: function (v) { return v + 273.15; }
        }
      }
    },
    data: {
      label: 'Data size',
      base: 'B',
      units: {
        b: { label: 'Bit', plural: 'Bits', factor: 0.125 },
        B: { label: 'Byte', plural: 'Bytes', factor: 1 },
        KB: { label: 'Kilobyte', plural: 'Kilobytes', factor: 1000 },
        MB: { label: 'Megabyte', plural: 'Megabytes', factor: 1000 ** 2 },
        GB: { label: 'Gigabyte', plural: 'Gigabytes', factor: 1000 ** 3 },
        TB: { label: 'Terabyte', plural: 'Terabytes', factor: 1000 ** 4 },
        KiB: { label: 'Kibibyte', plural: 'Kibibytes', factor: 1024 },
        MiB: { label: 'Mebibyte', plural: 'Mebibytes', factor: 1024 ** 2 },
        GiB: { label: 'Gibibyte', plural: 'Gibibytes', factor: 1024 ** 3 },
        TiB: { label: 'Tebibyte', plural: 'Tebibytes', factor: 1024 ** 4 }
      }
    },
    time: {
      label: 'Time',
      base: 's',
      units: {
        ns: { label: 'Nanosecond', plural: 'Nanoseconds', factor: 1e-9 },
        us: { label: 'Microsecond', plural: 'Microseconds', factor: 1e-6 },
        ms: { label: 'Millisecond', plural: 'Milliseconds', factor: 0.001 },
        s: { label: 'Second', plural: 'Seconds', factor: 1 },
        min: { label: 'Minute', plural: 'Minutes', factor: 60 },
        h: { label: 'Hour', plural: 'Hours', factor: 3600 },
        d: { label: 'Day', plural: 'Days', factor: 86400 },
        wk: { label: 'Week', plural: 'Weeks', factor: 604800 },
        yr: { label: 'Julian year', plural: 'Julian years', factor: 31557600 }
      }
    }
  };
 
  const ABSOLUTE_ZERO_C = -273.15;
  const EPSILON = 1e-12;
 
  function assertCategory(category) {
    if (!CATEGORIES[category]) throw new Error('Unknown category: ' + category);
    return CATEGORIES[category];
  }
 
  function assertUnit(categoryInfo, unit) {
    if (!categoryInfo.units[unit]) throw new Error('Unknown unit: ' + unit);
    return categoryInfo.units[unit];
  }
 
  function assertFiniteNumber(value) {
    const number = typeof value === 'number' ? value : Number(value);
    if (!Number.isFinite(number)) throw new TypeError('Value must be a finite number');
    return number;
  }
 
  function validateTemperatureC(celsius) {
    if (celsius < ABSOLUTE_ZERO_C - EPSILON) {
      throw new RangeError('Temperature is below absolute zero');
    }
  }
 
  function toBase(category, unit, value) {
    const categoryInfo = assertCategory(category);
    const unitInfo = assertUnit(categoryInfo, unit);
    const number = assertFiniteNumber(value);
 
    if (category === 'temperature') {
      const celsius = unitInfo.toBase(number);
      validateTemperatureC(celsius);
      return celsius;
    }
 
    return number * unitInfo.factor;
  }
 
  function fromBase(category, unit, baseValue) {
    const categoryInfo = assertCategory(category);
    const unitInfo = assertUnit(categoryInfo, unit);
    const number = assertFiniteNumber(baseValue);
 
    if (category === 'temperature') {
      validateTemperatureC(number);
      return unitInfo.fromBase(number);
    }
 
    return number / unitInfo.factor;
  }
 
  function convertValue(value, fromUnit, toUnit, category) {
    const baseValue = toBase(category, fromUnit, value);
    return fromBase(category, toUnit, baseValue);
  }
 
  function unitOptions(category) {
    const categoryInfo = assertCategory(category);
    return Object.keys(categoryInfo.units).map(function (key) {
      const unit = categoryInfo.units[key];
      return { key: key, label: unit.label, plural: unit.plural };
    });
  }
 
  function formatNumber(value, precision) {
    const number = assertFiniteNumber(value);
    const places = Math.max(0, Math.min(12, Number.parseInt(precision, 10)));
    if (Object.is(number, -0)) return '0';
    const fixed = number.toFixed(places);
    if (places === 0) return fixed;
    return fixed.replace(/\.0+$/, '').replace(/(\.\d*?)0+$/, '$1');
  }
 
  function defaultPair(category) {
    const options = unitOptions(category);
    return [options[0].key, options[1] ? options[1].key : options[0].key];
  }
 
  function bootstrapUI() {
    if (typeof document === 'undefined') return;
 
    const $ = function (id) { return document.getElementById(id); };
    const categorySelect = $('category');
    const precisionSelect = $('precision');
    const fromValue = $('fromValue');
    const toValue = $('toValue');
    const fromUnit = $('fromUnit');
    const toUnit = $('toUnit');
    const swapButton = $('swap');
    const status = $('status');
    const recentList = $('recentList');
    const clearRecent = $('clearRecent');
    const STORAGE_KEY = 'unit-converter-recents-v1';
    let activeSide = 'from';
    let saveTimer = null;
 
    if (!categorySelect) return;
 
    function getRecents() {
      try {
        return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
      } catch (_error) {
        return [];
      }
    }
 
    function setRecents(items) {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(items.slice(0, 10)));
      renderRecents();
    }
 
    function labelFor(category, unit) {
      return CATEGORIES[category].units[unit].label;
    }
 
    function populateCategories() {
      categorySelect.innerHTML = '';
      Object.keys(CATEGORIES).forEach(function (key) {
        const option = document.createElement('option');
        option.value = key;
        option.textContent = CATEGORIES[key].label;
        categorySelect.appendChild(option);
      });
    }
 
    function populateUnits(category, preferredFrom, preferredTo) {
      const options = unitOptions(category);
      const pair = defaultPair(category);
      fromUnit.innerHTML = '';
      toUnit.innerHTML = '';
      options.forEach(function (unit) {
        const fromOption = document.createElement('option');
        fromOption.value = unit.key;
        fromOption.textContent = unit.label + ' (' + unit.key + ')';
        fromUnit.appendChild(fromOption);
 
        const toOption = fromOption.cloneNode(true);
        toUnit.appendChild(toOption);
      });
      fromUnit.value = preferredFrom && CATEGORIES[category].units[preferredFrom] ? preferredFrom : pair[0];
      toUnit.value = preferredTo && CATEGORIES[category].units[preferredTo] ? preferredTo : pair[1];
    }
 
    function renderRecents() {
      const recents = getRecents();
      recentList.innerHTML = '';
      if (!recents.length) {
        const empty = document.createElement('li');
        empty.className = 'empty';
        empty.textContent = 'No recent conversions yet.';
        recentList.appendChild(empty);
        return;
      }
      recents.forEach(function (item) {
        const li = document.createElement('li');
        const button = document.createElement('button');
        button.type = 'button';
        button.textContent = item.text;
        button.title = 'Load conversion';
        button.addEventListener('click', function () {
          categorySelect.value = item.category;
          populateUnits(item.category, item.fromUnit, item.toUnit);
          fromValue.value = item.fromValue;
          activeSide = 'from';
          update();
          fromValue.focus();
        });
        li.appendChild(button);
        recentList.appendChild(li);
      });
    }
 
    function scheduleRecent(item) {
      clearTimeout(saveTimer);
      saveTimer = setTimeout(function () {
        const recents = getRecents().filter(function (recent) {
          return recent.key !== item.key;
        });
        recents.unshift(item);
        setRecents(recents);
      }, 250);
    }
 
    function setStatus(message, isError) {
      status.textContent = message;
      status.classList.toggle('error', Boolean(isError));
    }
 
    function makeRecentText(category, leftValue, leftUnit, rightValue, rightUnit) {
      return formatNumber(leftValue, precisionSelect.value) + ' ' + leftUnit + ' = ' +
        formatNumber(rightValue, precisionSelect.value) + ' ' + rightUnit +
        ' · ' + CATEGORIES[category].label;
    }
 
    function update() {
      const category = categorySelect.value;
      const sourceInput = activeSide === 'from' ? fromValue : toValue;
      const targetInput = activeSide === 'from' ? toValue : fromValue;
      const sourceUnit = activeSide === 'from' ? fromUnit.value : toUnit.value;
      const targetUnit = activeSide === 'from' ? toUnit.value : fromUnit.value;
      const raw = sourceInput.value.trim();
 
      if (raw === '' || raw === '-' || raw === '.' || raw === '-.') {
        targetInput.value = '';
        setStatus('Type a value to convert.', false);
        return;
      }
 
      try {
        const inputNumber = assertFiniteNumber(raw);
        const result = convertValue(inputNumber, sourceUnit, targetUnit, category);
        targetInput.value = formatNumber(result, precisionSelect.value);
        const fromNumber = activeSide === 'from' ? inputNumber : result;
        const toNumber = activeSide === 'from' ? result : inputNumber;
        setStatus(
          formatNumber(fromNumber, precisionSelect.value) + ' ' + labelFor(category, fromUnit.value) +
          ' equals ' + formatNumber(toNumber, precisionSelect.value) + ' ' + labelFor(category, toUnit.value) + '.',
          false
        );
        scheduleRecent({
          key: [category, fromUnit.value, toUnit.value, formatNumber(fromNumber, precisionSelect.value), formatNumber(toNumber, precisionSelect.value)].join('|'),
          category: category,
          fromUnit: fromUnit.value,
          toUnit: toUnit.value,
          fromValue: String(formatNumber(fromNumber, precisionSelect.value)),
          text: makeRecentText(category, fromNumber, fromUnit.value, toNumber, toUnit.value)
        });
      } catch (error) {
        targetInput.value = '';
        setStatus(error.message, true);
      }
    }
 
    function swap() {
      const oldFromUnit = fromUnit.value;
      fromUnit.value = toUnit.value;
      toUnit.value = oldFromUnit;
      const oldFromValue = fromValue.value;
      fromValue.value = toValue.value;
      toValue.value = oldFromValue;
      activeSide = activeSide === 'from' ? 'to' : 'from';
      update();
    }
 
    populateCategories();
    populateUnits('length');
    fromValue.value = '1';
    precisionSelect.value = '4';
    renderRecents();
    update();
 
    categorySelect.addEventListener('change', function () {
      populateUnits(categorySelect.value);
      update();
    });
    precisionSelect.addEventListener('change', update);
    fromUnit.addEventListener('change', update);
    toUnit.addEventListener('change', update);
    fromValue.addEventListener('input', function () { activeSide = 'from'; update(); });
    toValue.addEventListener('input', function () { activeSide = 'to'; update(); });
    fromValue.addEventListener('focus', function () { activeSide = 'from'; });
    toValue.addEventListener('focus', function () { activeSide = 'to'; });
    swapButton.addEventListener('click', swap);
    clearRecent.addEventListener('click', function () { setRecents([]); fromValue.focus(); });
 
    document.addEventListener('keydown', function (event) {
      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
        event.preventDefault();
        fromValue.select();
      }
      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
        event.preventDefault();
        swap();
      }
      if (event.key === 'Escape') {
        fromValue.value = '';
        toValue.value = '';
        setStatus('Cleared.', false);
        fromValue.focus();
      }
    });
  }
 
  if (typeof document !== 'undefined') {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', bootstrapUI);
    } else {
      bootstrapUI();
    }
  }
 
  return {
    CATEGORIES: CATEGORIES,
    ABSOLUTE_ZERO_C: ABSOLUTE_ZERO_C,
    convertValue: convertValue,
    toBase: toBase,
    fromBase: fromBase,
    formatNumber: formatNumber,
    unitOptions: unitOptions
  };
});
 
395 linesjs
Writes index.html
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#css #gpt #gpt-5.5 #html #javascript #pi #quick #testing #ui
t3-high
← all sessions