itsybits-xyz · afaur · Dec 30, 2016 · Dec 30, 2016
diff --git a/sounds/a.wav b/sounds/a.wav
diff --git a/sounds/b.wav b/sounds/b.wav
diff --git a/sounds/c.wav b/sounds/c.wav
diff --git a/sounds/d.wav b/sounds/d.wav
diff --git a/sounds/e.wav b/sounds/e.wav
diff --git a/sounds/f.wav b/sounds/f.wav
diff --git a/sounds/g.wav b/sounds/g.wav
diff --git a/sounds/h.wav b/sounds/h.wav
diff --git a/sounds/i.wav b/sounds/i.wav
diff --git a/sounds/j.wav b/sounds/j.wav
diff --git a/sounds/k.wav b/sounds/k.wav
diff --git a/sounds/l.wav b/sounds/l.wav
diff --git a/sounds/m.wav b/sounds/m.wav
diff --git a/sounds/n.wav b/sounds/n.wav
diff --git a/sounds/o.wav b/sounds/o.wav
diff --git a/sounds/p.wav b/sounds/p.wav
diff --git a/sounds/q.wav b/sounds/q.wav
diff --git a/sounds/r.wav b/sounds/r.wav
diff --git a/sounds/s.wav b/sounds/s.wav
diff --git a/sounds/t.wav b/sounds/t.wav
diff --git a/sounds/u.wav b/sounds/u.wav
diff --git a/sounds/v.wav b/sounds/v.wav
diff --git a/sounds/w.wav b/sounds/w.wav
diff --git a/sounds/x.wav b/sounds/x.wav
diff --git a/sounds/y.wav b/sounds/y.wav
diff --git a/sounds/z.wav b/sounds/z.wav
diff --git a/word-checker.html b/word-checker.html
@@ -0,0 +1,77 @@
+<html>
+
+  <body>
+    <div>
+      <span id="w1-l1-a">a</span><span id="w1-l2-d">d</span><span
+        id="w1-l3-a">a</span><span id="w1-l4-m">m</span>
+    </div>
+
+    <div>
+      <span id="w2-l1-b">b</span><span id="w2-l2-i">i</span><span
+        id="w2-l3-l">l</span><span id="w2-l4-l">l</span>
+    </div>
+
+    <div>
+      <span id="w3-l1-j">j</span><span id="w3-l2-o">o</span><span
+        id="w3-l3-h">h</span><span id="w3-l4-n">n</span>
+    </div>
+  </body>
+
+  <script>
+    var activeWord = 0;
+    var words = ["adam", "bill", "john"];
+    var input = "";
+
+    document.body.addEventListener('keypress', function(ev) {
+
+      var typedChar = String.fromCharCode(ev.keyCode);
+
+      var currentLetter = input.length;
+
+      var currentDomLetter;
+      var checkWordChar;
+
+      if (activeWord === 0) {
+        // Check each word to see which one should become active if any
+        words.forEach(function(word, index) {
+          checkWordChar = word.substr(currentLetter, 1);
+          if (typedChar === checkWordChar) {
+            // Set the active word
+            activeWord = index + 1;
+
+            // Color the letter in the dom for the letter of the active word
+            currentDomLetter = document.getElementById(
+              'w' + activeWord + '-l' + (currentLetter+1) + '-' + typedChar
+            );
+            currentDomLetter.style.color = '#FF0000';
+
+            // Track input so far
+            input += typedChar;
+          }
+        });
+      } else {
+        // If currently typing a word then keep validating that same word
+        checkWordChar = words[activeWord-1].substr(currentLetter, 1);
+        if (typedChar === checkWordChar) {
+
+          // Color the letter in the dom for the letter of the active word
+          currentDomLetter = document.getElementById(
+            'w' + activeWord + '-l' + (currentLetter+1) + '-' + typedChar
+          );
+          currentDomLetter.style.color = '#FF0000';
+
+          // Track input so far
+          input += typedChar;
+
+          // Reset active word if word is completed
+          if (words[activeWord-1].length === input.length) {
+            activeWord = 0;
+            input = '';
+          }
+        }
+      }
+    });
+
+  </script>
+
+</html>