50 Front-end Combat Project №10 & №11: Event-keycodes & Dad-jokes

Today, I’m going to talk about 50 front-end practical projects 08 and 09: Event-keycodes(The source code address:https://github.com/bradtraversy/50projects50days/tree/master/event-keycodes) and Dad-jokes(The source code address:https://github.com/bradtraversy/50projects50days/tree/master/dad-jokes).

Photo by Pankaj Patel on Unsplash

Let’s start with Event-keycodes

1. Project introduction

The purpose of this project is to demonstrate how to get the keycode information when the keyboard is pressed. Users can click on any key on the page, and the page will display the key name (event.key), the key code (event.keyCode), and the character code (event.code).

Preview of the effect

Online preview:https://qdkfweb.cn/50projects50days/event-keycodes/

2. Basic principle

• The project uses HTML to create an area (div id=”insert”) where key information is displayed.
• Use JavaScript to add a keydown event listener to the window object.
• When the user presses a keyboard key, the event listener triggers and executes a callback function.