barangievans / moringa-student-_creation

Interactive Shopping List App This code challenge involves creating an interactive shopping list application using JavaScript, HTML, and CSS. Users can add items to the list, mark them as purchased, clear the list, and optionally edit existing items. The application utilizes array iteration, DOM manipulation, and event handling to achieve these functionalities.

Objective The objective is to develop a webpage that allows users to manage a shopping list. This includes adding items dynamically, marking items as purchased with visual indicators (like strikethrough or background color change), clearing the entire list, and optionally editing existing items.

Requirements Array: Maintain a JavaScript array to store shopping list items.

DOM Manipulation:

Create an HTML structure with an input field for adding items, a list container to display items, and buttons for "Add", "Mark Purchased", and "Clear List". Use JavaScript to dynamically add new items to the list container when the user clicks the "Add" button. These items do not persist beyond page refresh. Update the visual representation of list items to indicate purchased items. Event Handling:

Attach event listeners to the "Add" button to capture user input and add items to the list. Allow users to mark items as purchased by interacting with the list items. Attach an event listener to the "Clear List" button to remove all items from the list. Extra Features Edit Existing Items: Allow users to edit items directly within the list. Persistence with Local Storage: Implement local storage to persist the shopping list across page reloads. Usage To try out the interactive shopping list, visit the hosted link:https://barangievans.github.io/moringa-student-_creation/

This application demonstrates fundamental JavaScript skills in handling arrays, DOM manipulation, and event-driven programming for interactive web applications. It provides a practical exercise in creating responsive and dynamic user interfaces for managing data.