ajusa/index.html

## index.html
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="hyperscript.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
    <script type="text/hyperscript">
      init fetch words.json as json then set $allwords to it then trigger reset(count: 50) on #words
      def nextWord(value)
        tell first .yet
          remove .yet .light-purple
          if value is your innerText add .green otherwise add .red end
          if no .yet
            set minutes to (Date.now() - $startTime) / (1000 * 60)
            put (#words.children.length / minutes) as Fixed into #wpm
            put ((.green.length * 100) / #words.children.length) as Fixed into #acc
          otherwise add .light-purple to next .yet end
      end
    </script>
    <title>typehand</title>
  </head>
  <body>
    <main class="container">
      <h1>typehand</h1>
      <p class="flex justify-between">
        <span _="on load tell my children add .secondary add [@href=#] end
        on click from <a/> in me take .contrast from <a/> in me for it trigger reset(count: it.innerText) on #words">
          <a>10</a> / <a>25</a> / <a class="contrast">50</a> / <a>100</a> / <a>250</a>
        </span>
        <span>WPM: <b id="wpm">XX</b> / ACC: <b id="acc">XX</b></span>
      </p>
      <code class="mv2" id="words" _="on reset(count)
      set $startTime to -1
      repeat count times append `<code class='yet'>${random in $allwords}</code>` to randwords end
      set my innerHTML to randwords
      add .light-purple to first .yet
      set #maininput's value to ''
      call #maininput.focus()"></code>
      <input type="text" _="on input[.yet's length is 1 and my value is .yet's innerText] or
      keydown(key)[key is ' ' and some .yet] if my value call nextWord(my value) end set my value to '' halt
      on input[$startTime is -1] set $startTime to Date.now()
      on input[some .yet] set @aria-invalid to not (first .yet's innerText).startsWith(my value)
      " id="maininput" autofocus>
      <button class="mw4-ns" _="on click trigger reset(count: #words.children.length) on #words">Reset</button>
    </main>
  </body>
</html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="hyperscript.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
	<link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
	<script type="text/hyperscript">
	init fetch words.json as json then set $allwords to it then trigger reset(count: 50) on #words
	def nextWord(value)
	tell first .yet
	remove .yet .light-purple
	if value is your innerText add .green otherwise add .red end
	if no .yet
	set minutes to (Date.now() - $startTime) / (1000 * 60)
	put (#words.children.length / minutes) as Fixed into #wpm
	put ((.green.length * 100) / #words.children.length) as Fixed into #acc
	otherwise add .light-purple to next .yet end
	end
	</script>
	<title>typehand</title>
	</head>
	<body>
	<main class="container">
	<h1>typehand</h1>
	<p class="flex justify-between">
	<span _="on load tell my children add .secondary add [@href=#] end
	on click from <a/> in me take .contrast from <a/> in me for it trigger reset(count: it.innerText) on #words">
	<a>10</a> / <a>25</a> / <a class="contrast">50</a> / <a>100</a> / <a>250</a>
	</span>
	<span>WPM: <b id="wpm">XX</b> / ACC: <b id="acc">XX</b></span>
	</p>
	<code class="mv2" id="words" _="on reset(count)
	set $startTime to -1
	repeat count times append `<code class='yet'>${random in $allwords}</code>` to randwords end
	set my innerHTML to randwords
	add .light-purple to first .yet
	set #maininput's value to ''
	call #maininput.focus()"></code>
	<input type="text" _="on input[.yet's length is 1 and my value is .yet's innerText] or
	keydown(key)[key is ' ' and some .yet] if my value call nextWord(my value) end set my value to '' halt
	on input[$startTime is -1] set $startTime to Date.now()
	on input[some .yet] set @aria-invalid to not (first .yet's innerText).startsWith(my value)
	" id="maininput" autofocus>
	<button class="mw4-ns" _="on click trigger reset(count: #words.children.length) on #words">Reset</button>
	</main>
	</body>
	</html>