Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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.
https://github.com/karl-horning/key-codes-keyboard-event-handler
animation codepen css dom-manipulation frontend html javascript keyboard-events responsive user-interface
Last synced: about 4 hours ago
JSON representation
A simple JavaScript function to handle key events and display the pressed key and its key code dynamically in the HTML.
- Host: GitHub
- URL: https://github.com/karl-horning/key-codes-keyboard-event-handler
- Owner: Karl-Horning
- License: mit
- Created: 2023-12-31T10:00:37.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-28T17:01:15.000Z (about 2 months ago)
- Last Synced: 2024-12-28T18:17:16.536Z (about 2 months ago)
- Topics: animation, codepen, css, dom-manipulation, frontend, html, javascript, keyboard-events, responsive, user-interface
- Language: CSS
- Homepage: https://codepen.io/karlhorning/pen/MBjMrX
- Size: 3.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
- [Key Codes Keyboard Event Handler](#key-codes-keyboard-event-handler)
- [Table of Contents](#table-of-contents)
- [About](#about)
- [Features](#features)
- [Demo](#demo)
- [Usage](#usage)
- [Installation](#installation)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
- [Author](#author)
## About
A JavaScript event listener captures key presses, displaying the key and keycode in a responsive, text-shadowed display. Media queries ensure adaptable font sizing across devices. Includes an animated gradient background with a dynamic scrolling effect, styled with CSS and Alfa Slab One font.
## 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](https://codepen.io/karlhorning/pen/MBjMrX).
## Usage
1. Include the JavaScript file in your HTML:
```html
```
2. Ensure that you have an HTML element with the class "keycode" in your document:
```html
```
3. Add an event listener to call the `checkKeycode` function on keyboard events:
```javascript
document.addEventListener("keydown", checkKeycode);
```
## Installation
1. Clone the repository:
```bash
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](LICENSE).
- **Font:** [Alfa Slab One](https://fonts.google.com/specimen/Alfa+Slab+One).
- **Background Animation:** Manuel Pinto's [Pure CSS Gradient Background Animation](https://codepen.io/P1N2O/pen/pyBNzX).
## 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](https://github.com/Karl-Horning/) | [LinkedIn](https://www.linkedin.com/in/karl-horning/) | [CodePen](https://codepen.io/karlhorning)