feat: Allow user to filter shopping list - Githubissues

yenly / smart-shopping-list

An exercise in walking in mentees' shoes to understand and empathize.

https://yenly-smart-shopping-list.netlify.app

1 stars 0 forks source link

feat: Allow user to filter shopping list #29

Closed yenly closed 3 years ago

yenly commented 3 years ago

Description

Allow users to use the input field to filter through shopping list items.

Related Issue

Closes #9

Acceptance Criteria

[x] Display a text field above the top of the shopping list
[x] As the user types into the field, the list should narrow to display only items that contain the text the user entered in the filter field
[x] When the field has text in it, the user should be able to tap a UI element (e.g., with an "X" button next to the field) to clear the field
[x] The filter text should match any part of the item name (i.e. it should not only match from the start of the string)

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

After

Screen Shot 2021-02-03 at 4 00 26 PM

Testing Steps / QA Criteria

Navigate to https://yenly-smart-shopping-list.netlify.app
Enter token arm game franc to view an existing list
Enter filter term i.e. cream under Filter items
Observe list changes to display only items with 'cream' as part of word(s)