Github Source Fileshttps://github.com/JS-Beginners/filter-project
- DOM Manipulation
- Control Structures
- Immediately Invoked Function Expressions
Project Description/SummaryThis project involves wiring up two different sections. The first section is the filter buttons, whose purposes are to filter the store items by class. The first section is the search filter, whose purpose is to filter the store items by a search.
datasetproperty on the
HTMLElementinterface provides read/write access to all the custom data attributes (
data-user = "hello", you have to use
HTMLElement.dataset.userto return the string “hello”. I also learned the
event.PreventDefault()method works to prevent the default behavior of in-page links. The default behavior sends the user to the top of the page after a link lower in the page is clicked. Previously, I only used the
event.PreventDefault()to prevent the default behavior of form submissions.
Time to CodeThis took about 30 minutes to code. As you'll see in my GitHub repository, I coded the first section using a bunch of if-else statements. It worked, but I knew there had to be a better way. So, I watched John's solution and sure enough he simply added an event listener to each store item. Duh.
Lines of CodeThis took about 40 lines of code.
Biggest Take Away(s)Retrieving elements from the DOM using the dataset property is no more complicated than using the querySelector() method. The difference is only a matter of how they are accessed. In this case, the properties were accessed by targeting the elements who had a given data property.
What to Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
- Add a link to your finished project below!
What You Should See
- In the “Our Store” section of the website, when you click on a given button, only the described items should show in the store.
- When you use the search function in the “Our Store” section of the website, only the case-insensitive searched items should show by name.
Need to see the video solution for this project?