- Press any key to get the keyCode
+
+
+ Press any key to get the key code
+
+
+
+
+
Event Key codes
+
+
+
+
+
+
+
+
+
event.location
+ Alt
+
+
+
+
event.key
+ Alt
+
+
+
+
event.which
+ Alt
+
+
+
+
event.code
+ Alt
diff --git a/event-keycodes/script.js b/event-keycodes/script.js
index 68dab4d..9979607 100644
--- 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 = `
-
- ${event.key === ' ' ? 'Space' : event.key}
- event.key
-
-
-
- ${event.keyCode}
- event.keyCode
-
-
-
- ${event.code}
- event.code
-
- `
-})
\ No newline at end of file
+$.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;
+});
\ No newline at end of file
diff --git a/event-keycodes/style.css b/event-keycodes/style.css
index e597872..2be1454 100644
--- 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;
+}
\ No newline at end of file