# A playground for JavaScript Keyboard events and the code list

When a user interacts with a physical keyboard, we can capture the activity using the JavaScript KeyboardEvent interface. It has the required properties, methods to let us know what key user would have pressed, its code, a unique modifier, etc. As a web developer, you may need these details from time to time, and it is hard to memorize them.

There are three keyboard event types:

- **keydown:** It fires when we press a key down.
- **keypress:** It fires when we press a key that produces a character value. For example, the key `b` produces a character value of `98`. This event will fire if you press the `b` key but will not fire if you press a key like `Alt`, `Ctrl`, `Shift`, etc. 
- **keyup:** It fires when we release a key.

These differences are important to understand as it may cause some real pain while debugging a JavaScript application. You may be debugging why a `Shift` keypress event is not firing where it is not supposed to fire! On any given day, `keydown` is the most used event type as it covers all the keys to produce the event information.

# So, What is the Playground?
I've always wondered if I had a simple tool to compare and debug these three event types' output. Of course, there are many great tools and docs out there to show these events' details. But I wanted to log the output together with the capability of filtering them as required. That's why the idea of the playground to help with debugging and increase productivity. I call it `Keyzz` 😍.

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611901433191/6ltDN7zdd.png?border=1,CCCCCC&auto=compress)

So far, Keyzz is capable of,
- List down the details of keydown, keypress, and keyup as soon as your interact with a key. Compare the output to help in debugging.

 ![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611903327665/5qcKTttgB.png?border=1,CCCCCC&auto=compress)

- Filter out one or more event types so that you can clear the noise.

 ![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611903347913/TZ8dniwJm.png?border=1,CCCCCC&auto=compress)

- Show a list of key codes for all possible keys.

 ![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611903362312/FsKF9T6B5.png?border=1,CCCCCC&auto=compress)

- Export the keyboard event details to CSV.

 ![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611903379717/hyr1hXUeG.png?border=1,CCCCCC&auto=compress)

# Access Keyzz

The tool is hosted using [Vercel](https://vercel.com/). You can access it using this URL [https://js-keyevents-demo.vercel.app/](https://js-keyevents-demo.vercel.app/). I hope you find it useful.

# (Open-)Source Code
`Keyzz` is a vanilla JavaScript-based `open-source` tool with a tiny use of jQuery. You can use the code the way you like to and, most importantly, contribute to making it much better. A few immediate improvements I can think of are,
- UX improvements.
- A better documentation.
- Fixing Bugs.

Please take a look into the source code from here,

%[https://github.com/atapas/js-keyevents-demo]

# Before we end...
I hope you find it useful. Feel free to connect with me on [Twitter(@tapasadhikary)](https://twitter.com/tapasadhikary). You may also like,

- [16 side project GitHub repositories you may find useful](https://blog.greenroots.info/16-side-project-github-repositories-you-may-find-useful-ckk50hic406quhls1dui2d6sd)

Here are a few more tools that help with similar kind of keyboard event tracing,
- [https://keycode.info/](https://keycode.info/) by Wes Bos
- [A very rich keyboard event viewer](https://w3c.github.io/uievents/tools/key-event-viewer.html) by W3C