add log history to the event keycode

3 years ago · d2fc33eeb9
parent a3d927be6c
commit d2fc33eeb9
3 changed files with 36 additions and 1 deletions
--- a/event-keycodes/index.html
+++ b/event-keycodes/index.html
@ -7,11 +7,14 @@
    <title>Event KeyCodes</title>
  </head>
  <body>
+    <div class="container">
+    <div id="log"></div>
    <div id="insert">
      <div class="key">
        Press any key to get the keyCode
      </div>
    </div>
+  </div>
    <script src="script.js"></script>
  </body>
 </html>
--- 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 +=`<div>
+     <div class="key">
+     ${lastEvent.key === ' ' ? 'Space' : lastEvent.key} 
+     <small>event.key</small>
+     </div>
+    <div class="key">
+  ${lastEvent.keyCode}
+  <small>event.keyCode</small>
+</div>
+
+<div class="key">
+  ${lastEvent.code}
+  <small>event.code</small>
+</div>
+</div>
+  `
+}
  insert.innerHTML = `
  <div class="key">
  ${event.key === ' ' ? 'Space' : event.key} 
@ -16,5 +35,7 @@ window.addEventListener('keydown', (event) => {
  ${event.code}
  <small>event.code</small>
 </div>
+
  `
+  lastEvent=event;
 })
--- 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;
+}