Hosted Project
https://js-beginners.github.io/filter-project/Github Source Files
https://github.com/JS-Beginners/filter-projectJavaScript Used
- DOM Manipulation
- Control Structures
- Array.forEach()
- JavaScript CSS Manipulation
- eventListeners
- Immediately Invoked Function Expressions
Project Description/Summary
This 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.New Things Learned or Refreshed
This project involved the use of using the HTML5 dataset property to select items from the project's store. This was only the second time I used it and I have a better understanding of how I can use JavaScript to retrieve data from HTML elements. “Thedataset property on the HTMLElement interface provides read/write access to all the custom data attributes (data-*) set on the element.” In other words, as I understand it, to use JavaScript to retrieve HTML elements with a attribute of data-user = "hello", you have to use HTMLElement.dataset.user to 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 Code
This 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 Code
This 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.Your Turn!
What to Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - If you think you need to see a video solution first, be sure to pick up John's JavaScript Tutorial and Projects Course.
- 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?
Get John's JavaScript Tutorial and Projects Course
const btn = document.querySelectorAll(‘a[data-filter]’);
const dataItem = document.querySelectorAll(‘div[data-item]’);
const storeItems = document.querySelector(‘#store-items’);
const searchInput = document.querySelector(‘#search-item’);
btn.forEach( button => {
button.addEventListener(‘click’, (e) => {
e.preventDefault();
storeItems.innerHTML = ”;
searchInput.value = ”;
let filterBtn = e.target.dataset.filter;
dataItem.forEach( (i) => {
if (filterBtn == i.dataset.item) {
storeItems.prepend(i);
} else if (filterBtn == ‘all’) {
for (all of dataItem) {
storeItems.prepend(all);
}
}
} );
});
});
searchInput.addEventListener(‘input’, (event) => {
storeItems.innerHTML = ”;
let searchWord = event.target.value;
dataItem.forEach((i) => {
let match = i.dataset.item.match(searchWord);
if (match) {
storeItems.prepend(i)
}
});
});