Tailwind & JavaScript Project - Products Filtering UI

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