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.
To target keys easily I added
id to every key, and it looks something like this:
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.
keyup we need to find the corresponding element on our vector keyboard, and add or remove the active class.
This is the function used for both events. It queries for the element based on the mapper and html
id. It also takes in consideration
checkSide flag to make sure key on the correct side is returned.
When window loses focus, keys would stay highlighted. To make sure that doesn't happen, on window blur we are going to remove all active classes from our keys.
Actual code used on this page is identical and you can find it here.
When I initially decided to add an easter egg to my website, I was thinking of using Konami Code or even creating a tiny video game. But in the end, I really loved the keyboard one, as it was easy to find and fun to play with.
And for the end, to see how everything fits together, I created a demo for you to play with: