diff --git a/event-keycodes/index.html b/event-keycodes/index.html new file mode 100644 index 0000000..a6b9ad0 --- /dev/null +++ b/event-keycodes/index.html @@ -0,0 +1,17 @@ + + + + + + + Event KeyCodes + + +
+
+ Press any key to get the keyCode +
+
+ + + diff --git a/event-keycodes/script.js b/event-keycodes/script.js new file mode 100644 index 0000000..68dab4d --- /dev/null +++ b/event-keycodes/script.js @@ -0,0 +1,20 @@ +const insert = document.getElementById('insert') + +window.addEventListener('keydown', (event) => { + insert.innerHTML = ` +
+ ${event.key === ' ' ? 'Space' : event.key} + event.key +
+ +
+ ${event.keyCode} + event.keyCode +
+ +
+ ${event.code} + event.code +
+ ` +}) \ No newline at end of file diff --git a/event-keycodes/style.css b/event-keycodes/style.css new file mode 100644 index 0000000..954ceb8 --- /dev/null +++ b/event-keycodes/style.css @@ -0,0 +1,42 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #e1e1e1; + font-family: 'Muli', sans-serif; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.key { + border: 1px solid #999; + background-color: #eee; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); + display: inline-flex; + align-items: center; + font-size: 20px; + font-weight: bold; + padding: 20px; + flex-direction: column; + margin: 10px; + min-width: 150px; + position: relative; +} + +.key small { + position: absolute; + top: -24px; + left: 0; + text-align: center; + width: 100%; + color: #555; + font-size: 14px; +}