Add files via upload

Taniya23Y · Mar 27, 2024 · d21e4b7 · d21e4b7
1 parent fa7e2b3
commit d21e4b7
Show file tree

Hide file tree

Showing 2 changed files with 129 additions and 0 deletions.
diff --git a/36_Projects/12_Keyboard/index.html b/36_Projects/12_Keyboard/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Event KeyCodes</title>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <style>
+      * {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    font-family: system-ui, sans-serif;
+    color: black;
+    background-color: white;
+  }
+
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    gap: 0.5rem;
+    border-bottom: solid 1px #aaa;
+    background-color: #eee;
+  }
+
+  nav a {
+    display: inline-block;
+    min-width: 9rem;
+    padding: 0.5rem;
+    border-radius: 0.2rem;
+    border: solid 1px rgb(22, 22, 22);
+    text-align: center;
+    text-decoration: none;
+    color: #1b1b1b;
+  }
+
+  nav a[aria-current='page'] {
+    color: #000;
+    background-color: #d4d4d4;
+  }
+
+  main {
+    padding: 1rem;
+  }
+
+  h1 {
+    font-weight: bold;
+    font-size: 1.5rem;
+  }
+
+  .projects {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .project-link {
+    background-color: #fff;
+    padding: 10px 30px;
+    border-radius: 8px;
+    color: #212121;
+    text-decoration: none;
+    border: 2px solid #212121;
+    margin-top: 5px;
+  }
+
+      table,
+      th,
+      td {
+        border: 1px solid #e7e7e7;
+      }
+      .project {
+        background-color: #1c1c1c;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        height: 100vh;
+      }
+
+      .color {
+        color: aliceblue;
+        display: flex;
+        flex-direction: row;
+      }
+    </style>
+  </head>
+  <body>
+    <nav>
+      <a href="/" >Home</a>
+      <a target="_blank" href="https://www.youtube.com/@channel"
+        >Channel Name</a
+      >
+    </nav>
+    <div class="project">
+      <div id="insert">
+        <div class="key">Press the key and watch magic</div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/36_Projects/12_Keyboard/script.js b/36_Projects/12_Keyboard/script.js
@@ -0,0 +1,20 @@
+const insert = document.querySelector("#insert");
+
+window.addEventListener("keydown", (e) => {
+  insert.innerHTML = `
+  <div class="color">
+  <table>
+  <tr>
+    <th>Key</th>
+    <th>Keycode</th>
+    <th>Code</th>
+  </tr>
+  <tr>
+    <td>${e.Key === ' ' ? "space": e.Key}</td>
+    <td>${e.Keycode}</td>
+    <td>${e.Code}</td>
+  </tr>
+  </table>
+  </div>
+ `;
+});