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