Merge pull request tajulafreen#11 from tajulafreen/event-code

tajulafreen · web-flow · commit 61cefa8ee401 · 2024-04-04T01:03:31.000+05:30
50Projects-HTML-CSS-JavaScript: Event code
diff --git a/README.md b/README.md
@@ -155,6 +155,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Event Code</summary>
+<p>The Event Code project is a simple web application that allows users to obtain the keycode of any key they press on their keyboard. Built using HTML, CSS, and JavaScript, the application provides a user-friendly interface where users can press any key, and the corresponding keycode will be displayed on the screen in real-time. This project serves as a practical demonstration of event handling in web development and can be used as a learning tool for understanding keyboard events in JavaScript.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/EventCode/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/EventCode">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
diff --git a/Source-Code/EventCode/index.html b/Source-Code/EventCode/index.html
@@ -0,0 +1,18 @@
+<!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 Code</title>
+</head>
+<body>
+    <div id="insert">
+        <button class="key">
+            press any key to get the keyCode
+        </button>
+    </div>
+    
+    <script src="script.js"></script>
+    </body>
+</html>
diff --git a/Source-Code/EventCode/script.js b/Source-Code/EventCode/script.js
@@ -0,0 +1,19 @@
+const insert = document.getElementById('insert');
+
+window.addEventListener('keydown', (e) => {
+  insert.innerHTML = `<ul>
+    <li class="key">
+    ${e.key === ' ' ? 'Space' : e.key}
+        <small>event.key</small>
+    </li>
+    <li class="key">
+    ${e.keyCode}
+        <small>event.keyCode</small>
+    </li>
+    <li class="key">
+    ${e.code}
+        <small>event.code</small>
+    </li>
+</ul>`;
+  console.log(e);
+});
diff --git a/Source-Code/EventCode/style.css b/Source-Code/EventCode/style.css
@@ -0,0 +1,58 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: floralwhite;
+  font-family: "Segoe UI", sans-serif;
+  margin: 0;
+  overflow: hidden;
+  height: 100vh;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#insert {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+ul {
+  display: flex;
+}
+
+li {
+  list-style-type: none;
+  margin: 0;
+  padding: 20px;
+  background-color: #fffafa;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.key {
+  border: 1px solid #999;
+  background-color: #eee;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 20px;
+  margin: 30px;
+  min-width: 150px;
+  position: relative;
+}
+
+.key small {
+  position: absolute;
+  top: -24px;
+  left: 0;
+  text-align: center;
+  width: 100%;
+  font-size: 14px;
+  color: #555;
+}
