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

pigpt-5.5 · 26 steps · 2m 38s · 5 filessession 3b6410df-03e@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 08 / 26
convert.jschange 1/2
(function (root, factory) {
  const api = factory();
  if (typeof module === "object" && module.exports) module.exports = api;
  root.UnitConverter = api;
})(typeof globalThis !== "undefined" ? globalThis : this, function () {
  "use strict";
 
  const CATEGORIES = {
    length: {
      label: "Length",
      base: "m",
      units: {
        mm: { label: "Millimeter", factor: 0.001 },
        cm: { label: "Centimeter", factor: 0.01 },
        m: { label: "Meter", factor: 1 },
        km: { label: "Kilometer", factor: 1000 },
        in: { label: "Inch", factor: 0.0254 },
        ft: { label: "Foot", factor: 0.3048 },
        yd: { label: "Yard", factor: 0.9144 },
        mi: { label: "Mile", factor: 1609.344 }
      }
    },
    mass: {
      label: "Mass",
      base: "kg",
      units: {
        mg: { label: "Milligram", factor: 0.000001 },
        g: { label: "Gram", factor: 0.001 },
        kg: { label: "Kilogram", factor: 1 },
        oz: { label: "Ounce", factor: 0.028349523125 },
        lb: { label: "Pound", factor: 0.45359237 },
        st: { label: "Stone", factor: 6.35029318 },
        ton: { label: "Metric ton", factor: 1000 }
      }
    },
    temperature: {
      label: "Temperature",
      base: "K",
      units: {
        C: { label: "Celsius", toBase: (v) => v + 273.15, fromBase: (v) => v - 273.15 },
        F: { label: "Fahrenheit", toBase: (v) => (v - 32) * 5 / 9 + 273.15, fromBase: (v) => (v - 273.15) * 9 / 5 + 32 },
        K: { label: "Kelvin", toBase: (v) => v, fromBase: (v) => v },
        R: { label: "Rankine", toBase: (v) => v * 5 / 9, fromBase: (v) => v * 9 / 5 }
      }
    },
    data: {
      label: "Data size",
      base: "B",
      units: {
        bit: { label: "Bit", factor: 0.125 },
        B: { label: "Byte", factor: 1 },
        KB: { label: "Kilobyte", factor: 1000 },
        MB: { label: "Megabyte", factor: 1000 ** 2 },
        GB: { label: "Gigabyte", factor: 1000 ** 3 },
        TB: { label: "Terabyte", factor: 1000 ** 4 },
        KiB: { label: "Kibibyte", factor: 1024 },
        MiB: { label: "Mebibyte", factor: 1024 ** 2 },
        GiB: { label: "Gibibyte", factor: 1024 ** 3 },
        TiB: { label: "Tebibyte", factor: 1024 ** 4 }
      }
    },
    time: {
      label: "Time",
      base: "s",
      units: {
        ns: { label: "Nanosecond", factor: 1e-9 },
        ms: { label: "Millisecond", factor: 0.001 },
        s: { label: "Second", factor: 1 },
        min: { label: "Minute", factor: 60 },
        h: { label: "Hour", factor: 3600 },
        day: { label: "Day", factor: 86400 },
        week: { label: "Week", factor: 604800 },
        year: { label: "Year (365 d)", factor: 31536000 }
      }
    }
  };
 
  function assertUnit(category, unit) {
    if (!CATEGORIES[category]) throw new Error(`Unknown category: ${category}`);
    if (!CATEGORIES[category].units[unit]) throw new Error(`Unknown unit '${unit}' for ${category}`);
  }
 
  function toBase(value, category, unit) {
    assertUnit(category, unit);
    const u = CATEGORIES[category].units[unit];
    return typeof u.toBase === "function" ? u.toBase(value) : value * u.factor;
  }
 
  function fromBase(value, category, unit) {
    assertUnit(category, unit);
    const u = CATEGORIES[category].units[unit];
    return typeof u.fromBase === "function" ? u.fromBase(value) : value / u.factor;
  }
 
  function convert(value, category, fromUnit, toUnit) {
    const n = Number(value);
    if (!Number.isFinite(n)) return NaN;
    return fromBase(toBase(n, category, fromUnit), category, toUnit);
  }
 
  function formatNumber(value, precision) {
    if (!Number.isFinite(value)) return "";
    const digits = Number(precision);
    if (digits < 0) return String(value);
    return Number(value.toFixed(digits)).toLocaleString(undefined, { maximumFractionDigits: digits });
  }
 
  function parseInput(text) {
    if (typeof text !== "string") return NaN;
    const normalized = text.replace(/,/g, "").trim();
    if (normalized === "") return NaN;
    return Number(normalized);
  }
 
  const api = { CATEGORIES, convert, toBase, fromBase, formatNumber, parseInput };
 
  if (typeof document !== "undefined") {
    document.addEventListener("DOMContentLoaded", () => initApp(api));
  }
 
  function initApp({ CATEGORIES, convert, formatNumber, parseInput }) {
    const $ = (id) => document.getElementById(id);
    const category = $("category");
    const fromValue = $("fromValue");
    const toValue = $("toValue");
    const fromUnit = $("fromUnit");
    const toUnit = $("toUnit");
    const precision = $("precision");
    const swap = $("swap");
    const recent = $("recent");
    const clearRecent = $("clearRecent");
    const status = $("status");
    const RECENT_KEY = "unit-converter-recent";
    let editing = "from";
    let saveTimer;
 
    function option(value, label) {
      const o = document.createElement("option");
      o.value = value;
      o.textContent = label;
      return o;
    }
 
    function populateCategories() {
      category.innerHTML = "";
      Object.entries(CATEGORIES).forEach(([key, cat]) => category.append(option(key, cat.label)));
    }
 
    function populateUnits() {
      const cat = CATEGORIES[category.value];
      const prevFrom = fromUnit.value;
      const prevTo = toUnit.value;
      fromUnit.innerHTML = "";
      toUnit.innerHTML = "";
      Object.entries(cat.units).forEach(([key, unit]) => {
        const label = `${unit.label} (${key})`;
        fromUnit.append(option(key, label));
        toUnit.append(option(key, label));
      });
      const keys = Object.keys(cat.units);
      fromUnit.value = keys.includes(prevFrom) ? prevFrom : keys[0];
      toUnit.value = keys.includes(prevTo) ? prevTo : (keys[1] || keys[0]);
      calculate();
    }
 
    function calculate() {
      const input = editing === "from" ? fromValue : toValue;
      const output = editing === "from" ? toValue : fromValue;
      const from = editing === "from" ? fromUnit.value : toUnit.value;
      const to = editing === "from" ? toUnit.value : fromUnit.value;
      const n = parseInput(input.value);
      if (!Number.isFinite(n)) {
        output.value = "";
        status.textContent = "Enter a number to convert.";
        return;
      }
      const result = convert(n, category.value, from, to);
      output.value = formatNumber(result, precision.value);
      status.textContent = `${input.value} ${from} = ${output.value} ${to}`;
      queueRecent(n, result, from, to);
    }
 
    function getRecent() {
      try { return JSON.parse(localStorage.getItem(RECENT_KEY)) || []; } catch { return []; }
    }
 
    function setRecent(items) {
      localStorage.setItem(RECENT_KEY, JSON.stringify(items.slice(0, 10)));
      renderRecent();
    }
 
    function queueRecent(input, result, from, to) {
      clearTimeout(saveTimer);
      saveTimer = setTimeout(() => {
        const item = {
          category: category.value,
          input,
          result,
          from,
          to,
          precision: Number(precision.value),
          at: Date.now()
        };
        const deduped = getRecent().filter((x) => !(x.category === item.category && x.input === item.input && x.from === item.from && x.to === item.to));
        setRecent([item, ...deduped]);
      }, 350);
    }
 
    function renderRecent() {
      const items = getRecent();
      recent.innerHTML = "";
      if (!items.length) {
        const li = document.createElement("li");
        li.textContent = "No recent conversions yet.";
        li.className = "empty";
        recent.append(li);
        return;
      }
      items.forEach((item) => {
        const li = document.createElement("li");
        const btn = document.createElement("button");
        btn.type = "button";
        btn.textContent = `${formatNumber(item.input, item.precision)} ${item.from} → ${formatNumber(item.result, item.precision)} ${item.to}`;
        btn.title = "Restore this conversion";
        btn.addEventListener("click", () => {
          category.value = item.category;
          populateUnits();
          fromUnit.value = item.from;
          toUnit.value = item.to;
          precision.value = item.precision;
          fromValue.value = String(item.input);
          editing = "from";
          calculate();
          fromValue.focus();
        });
        li.append(btn);
        recent.append(li);
      });
    }
 
    function doSwap() {
      [fromUnit.value, toUnit.value] = [toUnit.value, fromUnit.value];
      [fromValue.value, toValue.value] = [toValue.value, fromValue.value];
      editing = editing === "from" ? "to" : "from";
      calculate();
    }
 
    populateCategories();
    category.value = "length";
    populateUnits();
    fromValue.value = "1";
    calculate();
    renderRecent();
 
    category.addEventListener("change", populateUnits);
    fromUnit.addEventListener("change", () => { editing = "from"; calculate(); });
    toUnit.addEventListener("change", () => { editing = "from"; calculate(); });
    precision.addEventListener("change", calculate);
    fromValue.addEventListener("input", () => { editing = "from"; calculate(); });
    toValue.addEventListener("input", () => { editing = "to"; calculate(); });
    fromValue.addEventListener("focus", () => { editing = "from"; });
    toValue.addEventListener("focus", () => { editing = "to"; });
    swap.addEventListener("click", doSwap);
    clearRecent.addEventListener("click", () => setRecent([]));
    document.addEventListener("keydown", (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
        e.preventDefault(); fromValue.select();
      }
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
        e.preventDefault(); doSwap();
      }
    });
  }
 
  return api;
});
 
277 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
t2-med
← all sessions