Grocery Guru

Add and edit items

Enter an item and submit the form. Selecting an existing row moves its name into the input so it can be updated.

Find and remove items

Typing in the filter hides nonmatching rows. The delete button asks for confirmation, and Clear All removes the stored list.

Keep the list between visits

The app serializes the list into localStorage after changes and rebuilds the visible items from that value on load.

Browser storage instead of a backend

Functions read and write an `items` JSON array in localStorage. There are no accounts or server requests.

DOM event handling

The list has a shared click listener for editing and deletion; the form and filter have their own submit and input handlers.

Synchronize edits and stored items

Problem: Changing an item's name must update both the visible list and the stored array.

Solution: On update, the previous text is removed from storage, the edited row is replaced, and the new value is saved.

Avoid confusing duplicate behavior

Problem: The same exact item name should not be added twice.

Solution: Before adding, the script checks the stored array with `includes`. This check is case-sensitive; the separate search filter is case-insensitive.