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
- Intro
- Start The HTML
- Navbar / Search Area
- Main Products & Categories Area
- Hardcode HTML Items
- Start The JavaScript
- Select DOM Elements & Init
- Loop Over Products & Create Elements
- Refactor To Function
- Update Cart Item Count
- Filter Products