Keyboard Tracker is a web-based application that detects and displays information about keys pressed on the keyboard. When the application is launched, users are prompted to press any key, and the program dynamically shows the following details:
- Key Pressed: The actual key pressed by the user.
- Key Code: The numeric code associated with the key.
- Code: The standardized representation of the key.
This project demonstrates the use of JavaScript concepts such as events, DOM manipulation, setInterval, and arrow functions.
- Displays detailed information about the key pressed.
- Real-time tracking of keyboard input.
- Clean and responsive interface.
- Practical implementation of JavaScript concepts.
- Open the application in a web browser.
- Follow the prompt to press any key on the keyboard.
- View the displayed information about the key pressed, including:
- Key: The character or symbol pressed.
- Key Code: The numerical code associated with the key.
- Code: The specific code representation of the key.
- Press additional keys to see updated results.
- HTML: For structuring the web interface.
- CSS: For styling and enhancing the visual appearance.
- JavaScript: For handling key events, DOM manipulation, and dynamic behavior.
project-folder/
├── index.html # Main HTML file
├── style.css # CSS for styling the application
└── script.js # JavaScript for event handling and logic
- Clone this repository:
git clone https://github.com/HarshS16/JS_Project_Keyboard_Tracker
- Open the
index.htmlfile in any web browser.
- Display additional key properties such as shift, alt, and ctrl status.
- Log multiple key presses to detect keyboard shortcuts.
- Add a dark mode for better visual comfort.
Press Away and Explore!