karl-horning / key-codes-keyboard-event-handler

A simple JavaScript function to handle key events and display the pressed key and its key code dynamically in the HTML.

Key Codes Keyboard Event Handler

A simple JavaScript function to handle key events and display the pressed key and its key code dynamically in the HTML.

Table of Contents

• About
• Features
• Demo
• Usage
• Installation
• License
• Contributing
• Acknowledgments
• Contact
• Author

About

This project provides a straightforward JavaScript function (checkKeycode) that listens for keyboard events and updates the content of an HTML element with the class "keycode" to display the pressed key and its corresponding key code. The code is written using modern JavaScript syntax and is well-documented for ease of use.

Features

• Dynamic display of pressed key and key code.
• Support for modern browsers using the 'key' property and a fallback for older browsers using 'keyCode'.
• Additional handling for the space key to display "Space" instead of an empty string.

Demo

View the demo on CodePen.

Usage

1. Include the JavaScript file in your HTML:

   <script src="path/to/script.js"></script>

2. Ensure that you have an HTML element with the class "keycode" in your document:

   <div class="keycode"></div>

3. Add an event listener to call the checkKeycode function on keyboard events:

   document.addEventListener("keydown", checkKeycode);

Installation

1. Clone the repository:

   git clone https://github.com/Karl-Horning/key-codes-keyboard-event-handler.git

2. Copy the script.js file into your project.

3. Include the script in your HTML file as mentioned in the usage section.

Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and ensure that the project still works.
4. Create a pull request with a clear description of your changes.

License

This project is licensed under the MIT License.

• Font: Alfa Slab One.
• Background Animation: Manuel Pinto's Pure CSS Gradient Background Animation.

Contact

For any inquiries or support related to this project, please contact Karl Horning using any of the links in the 'Author' section.

Author

Karl Horning: GitHub | LinkedIn | CodePen