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