Developing the KeyCode.info website

Javascript Jeep🚙💨
Jun 8 · 3 min read

Learn how to develop the keycode.info website yourself.

First let’s design the layout

We can easily build the above layout using grid. You can visualize the

<div class="container">    <div class="keycode" id="resultCode">91</div>    <div class="details">         <div class="detail">              <div class="header">Event.Key</div>              <div class="value" id="key"></div>         </div>         <div class="detail">               <div class="header">Event.location</div>               <div class="value" id="location"></div>         </div>         <div class="detail">               <div class="header">Event.which</div>               <div class="value" id="which"></div>         </div>         <div class="detail">             <div class="header">Event.code</div>             <div class="value" id="code"></div>         </div>    </div></div>

Now we need to add some css to create the layout ,

We need to set the display as grid to the container , we need two rows ,one for displaying the keycode result and other for key details .

// make body, html covers full screen and remove padding & margin.
body,html {
width: 100%; height: 100%; margin : 0; padding: 0; font-family: "Montserrat", "sans-serif";}
// make the container as grid , we need two rows , so add grid-template-row property
.container { width: 100%; height: 100%; background: #F2F4F8; display: grid; grid-template-rows: 1fr 1fr; padding: 30px; box-sizing: border-box;}// this is the style for result keycode.keycode { text-align: center; font-size: 40vmin; color: #424242; padding: 30px;}Again make the .details as grid so that we can align the detail section in table format. (you can also use flexbox or some other method)..details { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; height: 100px; border-radius: 10px;}.detail { display: grid; grid-template-rows: 1fr 1fr;}.header { border-top-left-radius: 3px; border-top-right-radius: 3px; background: #B8E9FF; text-align: center; padding-top:15px; box-sizing: border-box; font-size: 3vmin;}.value { text-align: center; padding: 20px; font-size: 3vmin; background: #FFFFFF;}

So now our layout looks like

Add the Javascript to update the details

const SHIFT_KEY = 16;const CTRL_KEY = 91;const ALT_KEY = 18;// elementsvar key = document.querySelector('#key');var loc = document.querySelector('#location');var which = document.querySelector('#which');var code = document.querySelector('#code');var result = document.querySelector('#resultCode');// event.key --> String represntation of the key pressed// event.location --> location of the key on the keybboard or input device//event.which --> returns the numeric key code of keyPressed// event.code -->   it is similar to event.key.document.addEventListener('keydown', function (ev) {     ev.preventDefault(); // to handle default browser events     let keyData = ev.key,     whichData = ev.which,     codeData = ev.code,     locationData = ev.location;     if(ev.shiftKey && whichData != SHIFT_KEY) {         codeData = "Shift + " +  codeData;     }     if( (ev.ctrlKey || ev.metaKey) && whichData != CTRL_KEY) {        codeData = "Ctrl + " + codeData;     }     if(ev.altKey && whichData != ALT_KEY) {        codeData = "Alt  + " + codeData;     }     key.textContent = keyData;     loc.textContent = locationData;     which.textContent = whichData;     code.textContent = codeData;     // large text     result.textContent = whichData;})

You can try live

If you find this helpful surprise 🎁 me here.

Share if you feel happy.

Follow Javascript Jeep🚙 if you feel worthy.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Javascript Jeep🚙💨

Written by

Articles related to javascript

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co