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