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 10 / 26

index.htmlchange 1/1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Unit Converter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="app" aria-labelledby="title">
    <header>
      <p class="eyebrow">Static web app</p>
      <h1 id="title">Unit Converter</h1>
      <p class="lede">Instant two-way conversion for length, mass, temperature, data size, and time.</p>
    </header>
 
    <section class="panel" aria-label="Converter controls">
      <label class="field wide" for="category">
        <span>Category</span>
        <select id="category"></select>
      </label>
 
      <div class="converter-grid">
        <label class="field" for="fromValue">
          <span>From value</span>
          <input id="fromValue" type="text" inputmode="decimal" autocomplete="off" aria-describedby="shortcuts status">
        </label>
        <label class="field" for="fromUnit">
          <span>From unit</span>
          <select id="fromUnit"></select>
        </label>
 
        <button id="swap" class="swap" type="button" aria-label="Swap units and values" title="Swap (Ctrl/⌘+S)">⇄</button>
 
        <label class="field" for="toValue">
          <span>To value</span>
          <input id="toValue" type="text" inputmode="decimal" autocomplete="off">
        </label>
        <label class="field" for="toUnit">
          <span>To unit</span>
          <select id="toUnit"></select>
        </label>
      </div>
 
      <label class="field precision" for="precision">
        <span>Precision</span>
        <select id="precision">
          <option value="0">0 decimals</option>
          <option value="1">1 decimal</option>
          <option value="2" selected>2 decimals</option>
          <option value="3">3 decimals</option>
          <option value="4">4 decimals</option>
          <option value="6">6 decimals</option>
          <option value="8">8 decimals</option>
        </select>
      </label>
 
      <p id="status" class="status" role="status" aria-live="polite"></p>
      <p id="shortcuts" class="shortcuts">Keyboard: Tab through controls, Ctrl/⌘+K focuses input, Ctrl/⌘+S swaps.</p>
    </section>
 
    <section class="panel recent-panel" aria-labelledby="recent-title">
      <div class="recent-head">
        <h2 id="recent-title">Recent conversions</h2>
        <button id="clearRecent" type="button">Clear</button>
      </div>
      <ol id="recent" class="recent"></ol>
    </section>
  </main>
  <script src="convert.js"></script>
</body>
</html>
 

73 lineshtml

Writes style.css

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