diff --git a/my code/11-event-keycodes/index.html b/my code/11-event-keycodes/index.html new file mode 100644 index 0000000..9c9b13b --- /dev/null +++ b/my code/11-event-keycodes/index.html @@ -0,0 +1,25 @@ + + + + + + + + 11 event keycode + + + + +
+
+ Press any code to enter the key code + +
+ +
+ + + + + + \ No newline at end of file diff --git a/my code/11-event-keycodes/script.js b/my code/11-event-keycodes/script.js new file mode 100644 index 0000000..cf0d843 --- /dev/null +++ b/my code/11-event-keycodes/script.js @@ -0,0 +1,30 @@ +const container = document.getElementById("container"); + +addEventListener("keydown", (e) => { + console.log(e); + + container.innerHTML = `
+ + event.key + + +${e.code === "Space" ? "space" : e.key} + +
+
+ + event.keycode + + +${e.keyCode.toString()} + +
+
+ + event.code + + +${e.code} + +
`; +}); diff --git a/my code/11-event-keycodes/style.css b/my code/11-event-keycodes/style.css new file mode 100644 index 0000000..d8cb199 --- /dev/null +++ b/my code/11-event-keycodes/style.css @@ -0,0 +1,39 @@ +* { + margin: 0; + padding: 0; +} + +body { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #ddd; +} + +#container { + display: flex; +} + +.key { + display: flex; + flex-direction: column; + position: relative; + align-items: center; + font-family: sans-serif; + margin: 30px; +} + +.text { + padding: 20px 50px; + background-color: #fff; + font-size: 22px; + color: #000; + border: 1px solid #555; +} + +.subtext { + color: #555; + font-size: 16px; + margin-bottom: 10px; +}