added keyboard check project

Anujit1 · Anujit1 · commit 75bdd2b15bd5 · 2025-04-22T22:00:52.000+05:30
diff --git a/keyboard_check/index.html b/keyboard_check/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Check Keyboard</title>
+
+        <!-- css -->
+        <link rel="stylesheet" href="style.css">
+
+    </head>
+
+    <body id="canvas">
+        <div >
+            <div id="userinput"></div>
+            <h1>press a key</h1>
+        </div>
+
+        <div class="keyData">
+        </div>
+    </body>
+
+    <!-- js -->
+    <script src="script.js"></script>
+</html>
diff --git a/keyboard_check/script.js b/keyboard_check/script.js
@@ -0,0 +1,33 @@
+const userinput = document.querySelector('#userinput');
+
+const keyData = document.querySelector('.keyData');
+
+// key detector
+window.addEventListener('keydown', (e) => {
+    userinput.innerHTML = `${e.key === ' ' ? 'Space' : e.key}`;
+
+    keyData.innerHTML = `
+        <table border="">
+            <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>
+    `;
+
+});
+
+
+// screen cleaner
+let clear = function (){
+    userinput.innerHTML = '';
+    keyData.innerHTML = '';
+};
+
+setInterval(clear, 5000)
diff --git a/keyboard_check/style.css b/keyboard_check/style.css
@@ -0,0 +1,50 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: bisque;
+    font-family: monospace;
+}
+
+#canvas{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 90vh;
+    text-align: center;
+}
+
+#userinput{
+    font-size: 3em;
+    border-bottom: 2px solid black;
+    margin: 15px;
+    height: 60px;
+}
+
+.keyData{
+    margin: 1rem;
+    font-size: large;
+}
+
+@media (max-width: 500px) {
+    #canvas{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        font-size: 0.9em;
+        height: 60vh;
+        text-align: center;
+    }
+
+    #userinput{
+        font-size: 3em;
+        border-bottom: 2px solid black;
+        margin: 0.5rem;
+        height: 50px;
+    }
+}
