Update and add more features

Change in all three files html, css, js * Change in the design model (improvement and optimization) * Add more features ... Etc
3 years ago · dfc862488a
parent 10e20841ec
commit dfc862488a
3 changed files with 128 additions and 62 deletions
--- a/event-keycodes/index.html
+++ b/event-keycodes/index.html
@ -7,9 +7,39 @@
    <title>Event KeyCodes</title>
  </head>
  <body>
-    <div id="insert">
-      <div class="key">
-        Press any key to get the keyCode
+    <section id="starter">
+      <div id="starter-text">
+        Press any key to get the key code
+      </div>
+    </section>
+  
+    <div id="heading">
+      <h1>Event Key codes</h1>
+    </div>
+  
+    <div id="ascii">
+      <h1 id="keyCode"></h1>
+    </div>
+  
+    <div id="infos">
+      <div class="info-box">
+        <h3>event.location</p>
+          <h2 id="location">Alt</h2>
+      </div>
+  
+      <div class="info-box">
+        <h3>event.key</p>
+          <h2 id="key">Alt</h2>
+      </div>
+  
+      <div class="info-box">
+        <h3>event.which</p>
+          <h2 id="which">Alt</h2>
+      </div>
+  
+      <div class="info-box">
+        <h3>event.code</p>
+          <h2 id="code">Alt</h2>
      </div>
    </div>
    <script src="script.js"></script>
--- a/event-keycodes/script.js
+++ b/event-keycodes/script.js
@ -1,20 +1,25 @@
-const insert = document.getElementById('insert')
+let $ = document;
+let title = $.querySelector('title');
+let keyCode = $.querySelector('#keyCode');
+let eventKey = $.querySelector('#key');
+let eventLocation = $.querySelector('#location');
+let eventWhich = $.querySelector('#which');
+let eventCode = $.querySelector('#code');

-window.addEventListener('keydown', (event) => {
-  insert.innerHTML = `
-  <div class="key">
-  ${event.key === ' ' ? 'Space' : event.key} 
-  <small>event.key</small>
-</div>
-
-<div class="key">
-  ${event.keyCode}
-  <small>event.keyCode</small>
-</div>
-
-<div class="key">
-  ${event.code}
-  <small>event.code</small>
-</div>
-  `
-})
+$.body.addEventListener('keydown', (event) => {
+	event.preventDefault();
+	starter.style.display = 'none';
+	heading.style.display = 'flex';
+	ascii.style.display = 'flex';
+	infos.style.display = 'flex';
+	let getKey = event.key;
+	let getLocation = event.location;
+	let getWich = event.which;
+	let getCode = event.code;
+	title.innerHTML = "key codes : " + getKey;
+	keyCode.innerHTML = getKey;
+	eventKey.innerHTML = getKey;
+	eventLocation.innerHTML = getLocation;
+	eventWhich.innerHTML = getWich;
+	eventCode.innerHTML = getCode;
+});
--- a/event-keycodes/style.css
+++ b/event-keycodes/style.css
@ -1,48 +1,79 @@
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

 * {
-  box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
 }

 body {
-  background-color: #e1e1e1;
+	background: #d1d0d0;
  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;
-}
-
-@media(max-width:768px){
- .key{
-   margin: 10px 0px;
-  }
+  font-weight:500;
+}
+
+#heading {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: 12vh;
+	height: 100px;
+}
+
+#heading h1 {
+	font-size: 60px;
+	font-weight: bolder;
+}
+
+#ascii {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 100px;
+	color: #646262;
+}
+
+#infos {
+	display: flex;
+	justify-content: space-evenly;
+	margin-top: 80px;
+}
+
+.info-box {
+	text-align: center;
+	width: 20%;
+	background: #fff;
+	border-radius: 15px;
+}
+
+.info-box h3 {
+	background: #00adfd;
+	padding: 20px;
+	font-weight: bold;
+	border-top-left-radius: 15px;
+	border-top-right-radius: 15px;
+}
+
+.info-box h2 {
+	padding: 20px;
+}
+
+#heading, #ascii, #infos {
+	display: none;
+}
+
+#starter {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 30px;
+	font-weight: bolder;
+	height: 100vh;
+}
+
+#starter #starter-text {
+	background: #00adfdc1;
+	padding: 20px;
+	border-radius: 15px;
+	font-weight: bolder;
 }