Vanilla JavaScript - Tailwind & JavaScript Project - Products Filtering UI

5.0 (3)

31 learners

What you'll learn

This course includes

52 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

javascript vanilla javascript javascript project javascript tutorial js vanilla js tailwind tailwind css tailwind javascript

Full Transcript

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