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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade