Add key press handler

css/style.css

@@ -65,7 +65,6 @@ img {
 slide-deck div {
     height: 80vh;
     padding: 1em;
-    border: solid 2px lightgray;
 }
 
 @media only screen and (max-width: 960px) {

index.html

@@ -20,6 +20,7 @@
         <h1>DevNexus | Vanilla.js: Modern 1st Party JavaScript</h1>
         <h2>Setting things up ...</h2>
     </slide-deck>
+    <key-handler deck="main"></key-handler>
     <div class="footer left">
         <img src="./images/devnexus.png" alt="DevNexus logo" title="DevNexus logo" />
     </div>

js/app.js

@@ -1,10 +1,11 @@
 import { registerDeck } from "./navigator.js"
 import { registerControls } from "./controls.js"
+import { registerKeyHandler } from "./keyhandler.js"
 
 const app = async () => {
-    
     registerDeck();
     registerControls();
+    registerKeyHandler();
 };
 
 document.addEventListener("DOMContentLoaded", app);

js/keyhandler.js

@@ -0,0 +1,29 @@
+class KeyHandler extends HTMLElement {
+
+    constructor() {
+        super();
+        this._deck = null;
+    }
+
+    static get observedAttributes() {
+        return ["deck"];
+    }
+
+    async attributeChangedCallback(attrName, oldVal, newVal) {
+        if (attrName === "deck") {
+            if (oldVal !== newVal) {
+                this._deck = document.getElementById(newVal);
+                this._deck.parentElement.addEventListener("keydown", key => {
+                    if (key.keyCode == 39 || key.keyCode == 32) {
+                        this._deck.next();
+                    }
+                    else if (key.keyCode == 37) {
+                        this._deck.previous();
+                    }
+                });
+            }
+        }
+    }
+}
+
+export const registerKeyHandler = () => customElements.define('key-handler', KeyHandler);