From d2fc33eeb90bacacc4ca698bbe4bc7aa7c21d3d5 Mon Sep 17 00:00:00 2001 From: omaranBazna Date: Mon, 6 Jun 2022 23:35:01 -0400 Subject: [PATCH] add log history to the event keycode --- event-keycodes/index.html | 3 +++ event-keycodes/script.js | 23 ++++++++++++++++++++++- event-keycodes/style.css | 11 +++++++++++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/event-keycodes/index.html b/event-keycodes/index.html index a6b9ad0..b654b86 100644 --- a/event-keycodes/index.html +++ b/event-keycodes/index.html @@ -7,11 +7,14 @@ Event KeyCodes +
+
Press any key to get the keyCode
+
diff --git a/event-keycodes/script.js b/event-keycodes/script.js index 68dab4d..6df46ef 100644 --- a/event-keycodes/script.js +++ b/event-keycodes/script.js @@ -1,6 +1,25 @@ const insert = document.getElementById('insert') - +const log = document.getElementById('log') +let lastEvent=null; window.addEventListener('keydown', (event) => { +if(lastEvent){ + log.innerHTML +=`
+
+ ${lastEvent.key === ' ' ? 'Space' : lastEvent.key} + event.key +
+
+ ${lastEvent.keyCode} + event.keyCode +
+ +
+ ${lastEvent.code} + event.code +
+
+ ` +} insert.innerHTML = `
${event.key === ' ' ? 'Space' : event.key} @@ -16,5 +35,7 @@ window.addEventListener('keydown', (event) => { ${event.code} event.code
+ ` + lastEvent=event; }) \ No newline at end of file diff --git a/event-keycodes/style.css b/event-keycodes/style.css index e597872..3f1d813 100644 --- a/event-keycodes/style.css +++ b/event-keycodes/style.css @@ -13,6 +13,7 @@ body { text-align: center; height: 100vh; overflow: hidden; + overflow-y:scroll; margin: 0; } @@ -46,3 +47,13 @@ body { margin: 10px 0px; } } +.container{ + display:flex; + flex-direction: column; + +} +#log{ + display:flex; + flex-direction: column; + opacity: 0.65; +} \ No newline at end of file