In this project, we will create a product list using Tailwind CSS, and we will add filtering and add-to-cart functionality with JavaScript.

Code:

20 Projects Course:
https://www.traversymedia.com/20-Vanilla-JavaScript-Projects

Vanilla Projects Repo:
https://github.com/bradtraversy/vanillawebprojects

Blog Post:
https://www.traversymedia.com/blog/product-filtering-ui

0:00 – Intro
2:02 – Start The HTML
4:35 – Navbar / Search Area
9:00 – Main Products & Categories Area
14:26 – Hardcode HTML Items
19:30 – Start The JavaScript
20:25 – Select DOM Elements & Init
22:42 – Loop Over Products & Create Elements
27:53 – Refactor To Function
29:22 – Update Cart Item Count
35:23 – Filter Products

source