Objective: Create a web page where users can add items to a list and give each item an emoji rating (for example, 😄 for "great", 😐 for "okay", and 😞 for "bad"). The goal is to practice DOM manipulation, event handling, and basic data handling in JavaScript.
Requirements:
Add Item Feature: Allow users to add new items to the list. Each new item should have:
An input field where users can enter the name of the item.
A submit button to add the item to the list.
Dynamic Emoji Buttons: Next to each item in the list, display three emoji buttons (😄, 😐, 😞) that users can click to rate the item.
Rating Feedback: Display the selected rating next to the item.
Remove Item Feature: Include a remove button for each item, so users can remove items they no longer want on the list.
Restore List Button: Implement a button to restore the list to its original state.
Steps
HTML Setup:
Modify the given HTML structure to include an input field and a submit button for adding new items.
Prepare a section in your HTML to display the list of items and their ratings.
JavaScript Logic:
Modify the addListItem() function to read the input field's value and create a new list item with that name.
For each item, create emoji buttons dynamically and append them to the list item. Ensure each button has an event listener for clicks.
Implement the logic to display the selected emoji rating next to the item when an emoji button is clicked.
Adjust the removeItem() function if necessary to handle the new structure of list items.
Ensure the refreshPage() function or a custom restore logic works with the updated list structure.
Advanced Challenges (Optional)
Allow users to edit the names of existing items.
Implement a feature to save the list state (items and their ratings) in localStorage, so the list persists even after the page is reloaded.
Create a sorting feature that organizes items based on their ratings.
This exercise introduces a variety of fundamental JavaScript concepts, such as DOM manipulation, event handling, and basic state management, while also making the learning process interactive and enjoyable through the use of emojis.
Objective: Create a web page where users can add items to a list and give each item an emoji rating (for example, 😄 for "great", 😐 for "okay", and 😞 for "bad"). The goal is to practice DOM manipulation, event handling, and basic data handling in JavaScript.
Requirements:
Steps
HTML Setup:
JavaScript Logic:
Advanced Challenges (Optional) Allow users to edit the names of existing items. Implement a feature to save the list state (items and their ratings) in localStorage, so the list persists even after the page is reloaded. Create a sorting feature that organizes items based on their ratings. This exercise introduces a variety of fundamental JavaScript concepts, such as DOM manipulation, event handling, and basic state management, while also making the learning process interactive and enjoyable through the use of emojis.