Mark Item as Purchased

Value Proposition

As a user

I want to mark shopping items as purchased,

so that I can keep track of what I have already bought and what is still needed.

Each shopping item in the shopping list includes a checkbox to mark the item as purchased.
When an item is marked as purchased, it is moved to a separate “Purchased Items” section below the shopping list.
The “Purchased Items” section displays purchased items with a clear visual distinction (e.g., greyed out, strikethrough, etc.).
The last item marked as purchased appears at the top of the “Purchased Items” section.
Users can unmark purchased items by clicking the checkbox again.
Unmarking an item moves it back to the shopping list.
The shopping list and “Purchased Items” section both support vertical scrolling to accommodate multiple entries.
The number of items in both sections is clearly displayed.
If all items in the shopping list are marked as purchased, a message is displayed indicating that all items have been purchased.

[ ] Create feature branch feature/mark-item-purchased
[ ] implement checkmark icon for each item
[ ] useState for purchased/unpurchased state into the shoppingItem (with key purchased: true/false)
[ ] checkmark icon gets filled when checked
[ ] component for purchased items list with a counter
[ ] purchased item names with strikethrough
[ ] no purchased items in the list has a message displayed indicating that