Tailwind & JavaScript Project - Products Filtering UI

JavaScript / Web 38.6K צפיות 27/02/2024
פתח ב-YouTube

דרג סרטון זה

התחבר כדי לדרג

תיאור

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

#Traversy Media