Add key input handling initially

css/artsey-tutor.css

@@ -134,3 +134,8 @@ body {
     border: solid black 2px;
     background-color: yellow;
 }
+
+#typing-text {
+    visibility:hidden;
+    position: absolute;
+}

index.html

@@ -61,7 +61,13 @@
         <div class="keyboard-key"></div>
         <div class="keyboard-key"></div>
     </div>
+    <div class="flex-items"></div>
 </div>
+<form>
+    <fieldset>
+        <input id="typing-text" type="text" value="Hello there">
+    </fieldset>
+</form>
 <script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
         integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"

js/artsey-tutor.js

@@ -78,6 +78,8 @@ async function getMappingForLetter(letter) {
             return "key_space";
         case ',':
             return "key_comma";
+        case '!':
+            return "key_exclamation";
         case 'enter':
             return "key_enter";
         case 'backspace':
@@ -108,13 +110,34 @@ let currentString = "hello world";
 let currentMapping = [0, 0, 0, 0, 0, 0, 0, 0];
 
 $(document).ready(async function () {
+
+    $( "body" ).on( "click", function(event) {
+       // $( "#target" ).trigger( "keyup" );
+        console.log(event);
+    } );
+
+    $( "#typing-text" ).on( "keypress", function() {
+        //console.log( "Handler for `keypress` called." );
+        console.log($("#typing-text").text());
+    } );
+
+    $('body').on("keyup", (function(e) {
+        //alert('Handler for .keyup() called.');
+        $('#typing-text').focus();
+        console.log("current letter: " + currentLetter + " typed letter: " + String.fromCharCode(e.which).toLowerCase());
+
+        if (currentLetter === String.fromCharCode(e.which).toLowerCase()) {
+            setNextLetter();
+        }
+    }));
     console.log("ready! Here's a demo.");
     await sleep(1000);
     await setTypingText(currentString);
     await sleep(500);
-
-    for (let i = 0; i < currentString.length; i++) {
     await setNextLetter();
-        await sleep(1000);
+
-    }
+    // for (let i = 0; i < currentString.length; i++) {
+    //     await setNextLetter();
+    //     await sleep(1000);
+    // }
 });