filter shopping list implemented

flbarfield commented 6 months ago

For an example of how to fill this template out, see this Pull Request.

Description

Allowing users to search through their list will help them cut down on clutter and focus on items they’re looking for.

Notes

Related Issue

closes #7

Acceptance Criteria

[ ] 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
- 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.

You will know your is correctly implemented if you click on the label and keyboard focus moves to the related input. Refer to the MDN docs on for more info. The filter text should match any part of the item name (e.g., it should not only match from the start of the string)

Notes:

You will know your is correctly implemented if you click on the label and keyboard focus moves to the related input. Refer to the MDN docs on for more info.
The filter text should match any part of the item name (e.g., it should not only match from the start of the string)

Type of Changes

Feature

Updates

Before

before

After

after

Testing Steps / QA Criteria

After selecting a list that will be edited on the home page:

Navigate to list view from the bottom of the page
Type in characters into the search bar, list items will filter based upon
Can also click 'X' to clear input. This resets the list items to be show all items within list.

github-actions[bot] commented 6 months ago

Visit the preview URL for this PR (updated for commit 73be79c):

https://tcl-67-smart-shopping-list--pr35-rb-ab-feature-filter-migdie06.web.app

_{(expires Wed, 28 Feb 2024 01:25:55 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1dc6f6876568bd8a1c97781eec7984835c207f7c}

flbarfield commented 6 months ago

Thank you all again for your feedback and clarification during today's hurdle! I implemented all of your requests and re-requested your reviews.

the-collab-lab / tcl-67-smart-shopping-list