Issue #7 | Filter shopping list to locate item in list

[dilekbaykara]

Description

This PR allows users to search for items within their list, once the name of the item is typed into the input field, items within the list are then filtered to display items with the characters that were entered.

• Added a clear "X" button that appears once characters are entered into the input field.
• The X button will clear the characters in the input field and then refreshes the list of items to its original unfiltered state.

Related Issue

Acceptance Criteria

• [x] A form is added to the top of the List view, above the shopping list
• [x] The form includes the following elements
  • A text field (with semantic <label>!) which narrows down the list as the user types
  • When there’s text in the field, some kind of button (e.g., an X) to clear the field. When the field is cleared, the list is reset to its unfiltered state.

Type of Changes

enhancement

Updates

Before

After

Testing Steps / QA Criteria

1. Enter name of item in the input field
2. Hit "X" button to clear filter function to return list to original state
3. Test If unrelated item is entered, nothing will appear in list

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 716c9a3):

https://tcl-75-smart-shopping-list--pr36-wc-db-filter-shoppin-2m0fjs6p.web.app

_{(expires Sun, 08 Sep 2024 16:08:47 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1f1fd53c369e1fa31e15c310aa075b4e8f4f8dde}

[ahsanatzapier]

QA:

• [x] Enter name of item in the input field
• [x] Hit "X" button to clear filter function to return list to original state
• [x] Test If unrelated item is entered, nothing will appear in list

AC:

• [x] A form is added to the top of the List view, above the shopping list

• [ ] The form includes the following elements

  • [ ] A text field (with semantic ) which narrows down the list as the user types
  • [x] When there’s text in the field, some kind of button (e.g., an X) to clear the field. When the field is cleared, the list is reset to its unfiltered state.

[ahsanatzapier]

Great work on this, team! I've left some suggestions in line with our commitment to clean up the code! I am deferring to @deeheber for the final approval since she's the weekly mentor!