# JavaScript keyboard easter egg

DevFeed: [JavaScript keyboard easter egg](<https://devfeed.tech/articles/javascript-keyboard-easter-egg-37299.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/javascript-keyboard-easter-egg/>)

Author: Stanko

Published: 2019-12-01T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [demo](<https://devfeed.tech/tags/demo.md>), [deprecated](<https://devfeed.tech/tags/deprecated.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [svg](<https://devfeed.tech/tags/svg.md>)

## AI overview

A tutorial explaining how to build a JavaScript keyboard easter egg using an SVG keyboard image, key codes, and keyboard events to highlight pressed keys. It also handles left/right modifier keys and clears highlights when the window loses focus.

## Source excerpt

I love easter eggs in software. You may have noticed the keyboard image in the background of my blog. This thing on the right side of the screen. Those with a keen eye figured out it highlights keys as you are typing. It has been here for some time now, and on my colleague's request, I'll explain how it works. Let's break it down. Vector image # First I needed a vector (SVG) keyboard image. SVG images are easy to manipulate using JavaScript. I ended making one myself, by drawing over an image of the mac keyboard. To target keys easily I added id to every key, and it looks something like this: <rect class="Key" id="Key--q" x="52" y="70" width="36" height="37" rx="6" /> <rect class="Key" id="Key--w" x="95" y="70" width="36" height="37" rx="6" /> <rect class="Key" id="Key--e" x="138" y="70" width="36" height="37" rx="6" /> <rect class="Key" id="Key--r" x="182" y="70" width="36" height="37" rx="6" /> <rect class="Key" id="Key--t" x="225" y="70" width="36" height="37" rx="6" /> <rect class="Key" id="Key--y" x="269" y="70" width="36" height="37" rx="6" /> Key codes # You probably already know this, but KeyboardEvent has keyCode property.I just learned keyCode is deprecated in favor of code. It is much better as it is not altered by keyboard layout or the state of the modifier keys. But it is not supported in Edge and IE, so I'll stick to keyCode in this post. We are going to use this property to map physical key presses to keys in our image. I found a detailed list of key codes, and created a large mapper based on it. Object keys are keyCode values and each one is mapped to the html id I set. For keys that exist on both side of the keyboard (shift, ctrl, cmd...) I added checkSide property. This property tells us to check which of the two is pressed, so we can highlight the correct one. const keyCodes = { 8: { id: 'delete', }, 9: { id: 'tab', }, 13: { id: 'enter', }, 16: { id: 'shift', checkSide: true, }, // ... // all the way to key code 255 }; Logic # On both keydown and