🧪 JavaScript Events – Practice Questions
🟢 Beginner Level (1–7)
1.
Create a button. When clicked, change its text to “Clicked!”.
2.
Create a button that shows an alert message when double-clicked.
3.
Create a div. Change its background color when mouse hovers over it.
4.
Create an input box. Display text “Typing…” when user starts typing.
5.
Create an input field. Show the typed value in a <p> tag.
6.
Create a button. When clicked, hide a paragraph.
7.
Create a button. When clicked, show a hidden paragraph.
🟡 Intermediate Level (8–14)
8.
Create a form. Prevent page reload on submit and show entered name in alert.
9.
Detect which key is pressed using keyboard event and display it.
10.
Create a button that changes color every time it is clicked.
11.
Create multiple buttons. Show which button was clicked using event target.
12.
Create a dropdown (select). Show selected value when changed.
13.
Create an input field. When it loses focus (blur), validate if it’s empty.
14.
Create a character counter for a textarea (live update while typing).
🔴 Advanced Level (15–20)
15.
Demonstrate event bubbling using parent and child elements.
16.
Stop event bubbling when clicking child element.
17.
Use event delegation to handle clicks on dynamically added list items.
18.
Create a to-do list where new items can be added and clicked (use delegation).
19.
Create a keyboard shortcut:
👉 Press “Enter” to submit form
👉 Press “Escape” to clear input
20.
Build a small typing detector:
- Show “User is typing…”
- After 1 second of no typing → show “Stopped typing”
(Hint: use setTimeout)
🚀 Bonus Challenge (Real Project)
👉 Build a Click Counter App
- Button click increases count
- Reset button resets count
- Show message when count > 10
💡 Pro Tip
If you can solve:
- Q1–7 → Basic understanding
- Q8–14 → Job-ready
- Q15–20 → Strong developer level
Mini project (calculator / typing speed tester)
