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;
 }