Build a typing-speed test as a static web app in this directory: index.html, style.css,…

claude-codeclaude-fable-5 · 72 steps · 13m 06s · 7 filessession f0c9efc1-4df@agentsage-runs

Build a typing-speed test as a static web app in this directory: index.html, style.css, app.js, words.js. Random word streams, live WPM and accuracy, a 60-second timed mode and a zen mode, per-key error highlighting, results screen with WPM history chart on a canvas, high scores in localStorage, dark theme, and tests.html + tests.js exercising the WPM/accuracy math. Run the tests headless with node and fix what fails.

same matchclaude-code · 72 steps codex · 102 steps pi · 25 steps antigravity · 28 steps opencode · 28 steps

compare in arena

step 12 / 72

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>typetest — typing speed test</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app">
    <header>
      <h1 class="logo">type<span>test</span></h1>
      <nav class="modes">
        <button id="modeTimed" class="mode-btn active">60s</button>
        <button id="modeZen" class="mode-btn">zen</button>
        <button id="restartBtn" class="mode-btn ghost" title="restart (tab)">restart</button>
      </nav>
    </header>
 
    <main>
      <section id="typingScreen">
        <div class="live-stats">
          <div class="live-stat"><span id="liveTimer">1:00</span><label>time</label></div>
          <div class="live-stat"><span id="liveWpm">0</span><label>wpm</label></div>
          <div class="live-stat"><span id="liveAcc">100%</span><label>accuracy</label></div>
          <button id="finishBtn" class="mode-btn ghost hidden">finish</button>
        </div>
 
        <div id="wordsViewport" class="words-viewport">
          <div id="words" class="words"></div>
          <div id="caret" class="caret hidden"></div>
        </div>
 
        <div id="keyboard" class="keyboard" aria-hidden="true"></div>
 
        <p class="hint">
          start typing to begin · <kbd>tab</kbd> restart · <kbd>esc</kbd> ends a zen run
        </p>
      </section>
 
      <section id="resultsScreen" class="hidden">
        <div class="result-tiles">
          <div class="tile hero"><span id="resWpm">0</span><label>wpm</label></div>
          <div class="tile"><span id="resAcc">100%</span><label>accuracy</label></div>
          <div class="tile"><span id="resRaw">0</span><label>raw wpm</label></div>
          <div class="tile"><span id="resChars">0</span><label>correct chars</label></div>
          <div class="tile"><span id="resErrors">0</span><label>errors</label></div>
          <div class="tile"><span id="resTime">1:00</span><label>time</label></div>
        </div>
 
        <div class="chart-card">
          <div class="chart-head">
            <h2>wpm over time</h2>
            <div class="legend">
              <span class="legend-item"><i class="chip chip-wpm"></i>wpm</span>
              <span class="legend-item"><i class="chip chip-raw"></i>raw</span>
            </div>
          </div>
          <div class="chart-wrap">
            <canvas id="chart" height="240"></canvas>
            <div id="chartTip" class="chart-tip hidden"></div>
            <p id="chartEmpty" class="chart-empty hidden">not enough data for a chart</p>
          </div>
        </div>
 
        <div class="scores-card">
          <h2>high scores — <span id="scoresMode">60s</span></h2>
          <ol id="scoresList"></ol>
        </div>
 
        <button id="againBtn" class="primary-btn">next test</button>
      </section>
    </main>
  </div>
 
  <script src="words.js"></script>
  <script src="app.js"></script>
</body>
</html>
 

80 lineshtml

Writes …/index.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @agentsage-runs.

#claude #claude-code #claude-fable-5 #css #graphics #html #javascript #medium #performance #skills #subagents #testing

c1-claude

← all sessions