From dfc862488a90d3773034ab829b3cb93905f040f7 Mon Sep 17 00:00:00 2001 From: Hosseinghafouri Date: Sun, 21 Aug 2022 19:20:12 +0430 Subject: [PATCH] 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 --- event-keycodes/index.html | 36 +++++++++++-- event-keycodes/script.js | 43 ++++++++------- event-keycodes/style.css | 111 ++++++++++++++++++++++++-------------- 3 files changed, 128 insertions(+), 62 deletions(-) diff --git a/event-keycodes/index.html b/event-keycodes/index.html index a6b9ad0..2962718 100644 --- a/event-keycodes/index.html +++ b/event-keycodes/index.html @@ -7,9 +7,39 @@ Event KeyCodes -
-
- 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