Traversy Media | Tailwind & JavaScript Project - Products Filtering UI @TraversyMedia | Uploaded 6 months ago | Updated 3 hours ago
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:
https://codepen.io/bradtraversy/pen/oNVKXBo

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