JavaScript Event Handling: Exercises, Practice, Solutions
This resource offers a total of 105 JavaScript Event Handling problems for practice. It includes 21 main exercises, each accompanied by solutions, detailed explanations, and four related problems.
[An Editor is available at the bottom of the page to write and execute the scripts.]
1. Button Click Event
Write a JavaScript program that creates a button and add a click event listener to log a message when it's clicked.
2. Dropdown Menu Toggle
Write a JavaScript program to create a dropdown menu that shows and hides its options when clicked.
3. Mouse Enter Background Change
Write a JavaScript function that changes the background color of an element when a mouse enters it.
4. Form Validation with Error Message
Write a JavaScript program that implements a "form" validation that displays an error message if a required field is left empty when submitting the form.
5. Image Slideshow Navigation
Write a JavaScript program to create a slideshow that changes the displayed image when a next or previous button is clicked.
6. Drag-and-Drop List Reordering
Write a JavaScript program to implement drag-and-drop functionality to allow users to reorder items in a list.
7. Toggle Switch Implementation
Write a JavaScript program to implement a toggle switch that changes its state when clicked.
8. Progress Bar Update
Write a JavaScript program to create a progress bar that updates its width based on task completion.
9. Enter Key Detection in Input
Write a JavaScript program that adds a keydown event listener to a text input to detect when the "Enter key" is pressed.
10. Double-Click Event Action
Write a JavaScript function that listens for a double click on an element and performs a specific action.
11. Event Delegation on List Items
Write a JavaScript program to handle click events on dynamically added list items using event delegation.
12. Prevent Default Behavior
Write a JavaScript program that prevents the default behavior of a form submission and logs the input values to the console.
13. Stop Propagation Example
Write a JavaScript program that demonstrates event bubbling and uses stopPropagation to stop the event at a specific level.
14. Event Capturing Example
Write a JavaScript program that demonstrates event capturing by adding listeners to parent and child elements.
15. Debounce Input Event
Write a JavaScript program that debounces the input event of a text box to wait before making an API call.
JavaScript Browser API Exercises [16 - 21 exercises with solution ]
16. LocalStorage Counter
Write a JavaScript program that implements a counter using localStorage to save the count across page refreshes.
17. SessionStorage Cart
Write a JavaScript program to simulate a shopping cart where the cart state is stored in sessionStorage.
18. Fetch API with Error Handling
Write a JavaScript program that fetches data from an API, handles network errors, and displays the results on a webpage.
19. Geolocation API Example
Write a JavaScript program that uses the Geolocation API to display the user's current location.
20. Clipboard API for Copy
Write a JavaScript program that copies the content of a text box to the clipboard when a button is clicked.
21. Web Notifications API
Write a JavaScript program that sends a desktop notification to the user after getting permission.
More to Come !
* To run the code mouse over on Result panel and click on 'RERUN' button.*
Live Demo:
See the Pen javascript-common-editor by w3resource (@w3resource) on CodePen.
Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.