ImagesLesson 93Free preview

Portfolio with Filtering

This lesson is part of How To · All levels

Summary

Portfolio with filtering adds a category button to display only specific projects. Each button stores a filter on the data-filter attribute, while each project stores its own category. JavaScript compares the two and then hides the wrong card.

Key points

The data-filter attribute on the button saves the selected category.
The data-category attributes on the card store the project category.
The hidden property hides the wrong card.
The .active class marks the filter button being used.
The 'all' filter displays all the projects back.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.