Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

Keyboard Tracker

About the Project

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.


Features

  • Displays detailed information about the key pressed.
  • Real-time tracking of keyboard input.
  • Clean and responsive interface.
  • Practical implementation of JavaScript concepts.

How to Use

  1. Open the application in a web browser.
  2. Follow the prompt to press any key on the keyboard.
  3. 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.
  4. Press additional keys to see updated results.

Technologies Used

  • 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 Structure

project-folder/
├── index.html    # Main HTML file
├── style.css     # CSS for styling the application
└── script.js     # JavaScript for event handling and logic

How to Run the Project

  1. Clone this repository:
    git clone https://github.com/HarshS16/JS_Project_Keyboard_Tracker
  2. Open the index.html file in any web browser.

Future Enhancements

  • 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!

Releases

Packages

Contributors

Languages