Skip to content

Commit 228def2

Browse files
committed
finished output
1 parent 4c4350b commit 228def2

1 file changed

Lines changed: 23 additions & 58 deletions

File tree

README.md

Lines changed: 23 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
## KeyCode
1+
### KeyCode
22

3-
KeyCode is a simple web utility that shows real-time keyboard event data. Press any key and the page will display the <b>event.key</b>, event.code, event.which, and event.keyCode values from the JavaScript keydown event.
3+
KeyCode is a simple web utility that shows real-time keyboard event data. Press any key and the page will display the **event.key**, **event.code**, **event.which**, and **event.keyCode** values from the JavaScript **keydown event**.
44

55
This tool is useful for developers, learners, and anyone curious about how browser keyboard events work.
66

77
## Live Demo
88

9-
[https://nyxth-666.github.io/KeyCode/](https://nyxth-666.github.io/KeyCode/)
9+
link: [https://nyxth-666.github.io/KeyCode/](https://nyxth-666.github.io/KeyCode/)
1010

1111
## How It Works
1212

@@ -16,35 +16,20 @@ The site listens for the keydown event in JavaScript.
1616

1717
It then displays:
1818

19-
event.key — The value of the key pressed (e.g., "a", "Enter").
20-
21-
event.code — The physical key on the keyboard (e.g., "KeyA", "Enter").
22-
23-
event.which — Legacy numeric code for the key (deprecated).
24-
25-
event.keyCode — Legacy numeric code (deprecated).
19+
- **event.key** — The value of the key pressed (e.g., "a", "Enter").
20+
- **event.code** — The physical key on the keyboard (e.g., "KeyA", "Enter").
21+
- **event.which** — Legacy numeric code for the key (deprecated).
22+
- **vent.keyCode** — Legacy numeric code (deprecated).
2623

2724
This live visualization helps you understand differences between the standard and legacy keyboard properties.
2825

29-
🛠 Features
30-
31-
📟 Detects and displays keyboard event properties in real time.
32-
33-
🧪 Useful for debugging keybindings, game controls, web apps, etc.
34-
35-
💡 Minimal and clean interface.
26+
## Features
3627

37-
📁 Project Structure
38-
KeyCode/
39-
├─ index.html ← Main page showing key event output
40-
├─ script.js ← JS logic for keyboard events (if separated)
41-
├─ styles.css ← Optional styling
42-
└─ README.md ← You are here!
28+
- Detects and displays keyboard event properties in real time.
29+
- Useful for debugging keybindings, game controls, web apps, etc.
30+
- Minimal and clean interface.
4331

44-
45-
Note: In the simplest version, everything may be in index.html.
46-
47-
🧩 Example Output
32+
## Example Output
4833

4934
After pressing a key, the page updates like:
5035

@@ -53,37 +38,17 @@ event.code: "KeyA"
5338
event.which: 65
5439
event.keyCode: 65
5540

56-
💻 Usage
57-
58-
Open the page in your browser.
59-
60-
Click anywhere or ensure the page is focused.
61-
62-
Press any key.
63-
64-
Watch the displayed values update.
65-
66-
ℹ️ Why This Is Useful
67-
68-
🎮 Helps game developers map controls.
69-
70-
🔧 Useful for debugging key event issues in apps.
71-
72-
🧑‍💻 Great for learning about JavaScript keyboard events.
73-
74-
📊 Visualizes key event properties live in the browser.
75-
76-
🧪 Browser Compatibility
77-
78-
This tool relies on standard DOM keyboard events supported by all modern browsers.
79-
80-
Note: event.which and event.keyCode are legacy and may not be recommended for new projects; use event.key and event.code instead where possible.
81-
nyxth-666.github.io
82-
83-
📜 License
41+
## Usage
8442

85-
You can add your preferred license here (e.g., MIT, Apache 2.0).
43+
- Open the page in your browser.
44+
- Click anywhere or ensure the page is focused.
45+
- Press any key.
46+
- Watch the displayed values update.
8647

87-
📬 Feedback
48+
## Why This Is Useful
8849

89-
For suggestions or issues, open a GitHub issue or contact the project maintainer.
50+
- Helps game developers map controls.
51+
- Useful for debugging key event issues in apps.
52+
- Great for learning about JavaScript keyboard events.
53+
- Visualizes key event properties live in the browser.
54+
- Browser Compatibility

0 commit comments

Comments
 (0)