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:
codepen.io/bradtraversy/pen/o...
20 Projects Course:
www.traversymedia.com/20-Vani...
Vanilla Projects Repo:
github.com/bradtraversy/vanil...
Blog Post:
www.traversymedia.com/blog/pr...
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

Пікірлер: 44

  • @codingman8056
    @codingman80562 ай бұрын

    Just for the note, I'm not beginner in web development, quite experienced, but i still love your work on VanillaJS. Thanks for supporting multiple technologies for years

  • @tubeloupe8444
    @tubeloupe84442 ай бұрын

    2.2M Subscribers 968 Videos No clickbait or OMG drama... But a 5 second, off-hand remark about "Case Preserving Multiple Cursors"? PRICELESS!

  • @andreea34

    @andreea34

    2 ай бұрын

    LOL Yeeess!! I looked it up as soon as he mentioned it. Saves sooooo much time! 😆

  • @AndrewKwabula
    @AndrewKwabula2 ай бұрын

    Brad is one of the few Developers I am always keen to learn from. Each time a new technology comes, I usually wonder how he will tackle it. The man has range in his understanding of the web.

  • @cesarjaramillo9455
    @cesarjaramillo94552 ай бұрын

    Hey Brad, I just finished your recent Next14 course. Good stuff, thanks!!

  • @altered3742
    @altered374228 күн бұрын

    Would love to see a React version with a backend data store. Thanks for the fast-paced tutorials. Always learn a lot.

  • @Olympian97
    @Olympian972 ай бұрын

    Just completed! Thanks Brad! Given your new video on React 19, it could be cool to see a version of this project in React 19 when it releases that explores some of the new changes / features.

  • @Iam_swenky
    @Iam_swenky2 ай бұрын

    Thank you Brad. 🥂

  • @DavidRagnar1
    @DavidRagnar12 ай бұрын

    Awesome stuff! Would loved to see this in Vue

  • @archamedis
    @archamedis2 ай бұрын

    Just finished your React course and wanted to practice my skills by making a filter component with pills and search for a large async list. This’ll come in handy if I get stuck/need inspiration. Thanks Brad!

  • @pfkellogg
    @pfkellogg2 ай бұрын

    Thanks again very much.

  • @vinoopb
    @vinoopb2 ай бұрын

    Hi Brad, thanks for this video. Is this also added to the udemy projects course?

  • @AbdullahAbid-qi5mq
    @AbdullahAbid-qi5mq2 ай бұрын

    Thank-you very much.

  • @sovereignlivingsoul
    @sovereignlivingsoul2 ай бұрын

    thanks Brad, very timely, i need something like this to display my coin hunting finds, i don't use frameworks so i will have to use vanilla CSS.

  • @vinayvardhanyt2415
    @vinayvardhanyt24152 ай бұрын

    Thank you

  • @slacle
    @slacle2 ай бұрын

    A Svelte 5 (after it's released) version of this would be awesome :)

  • @PhilanJames
    @PhilanJames2 ай бұрын

    Would be great to see in SolidJS.

  • @tarekt8571
    @tarekt85712 ай бұрын

    We need a new redux toolkit course with build website, please. thanks for all works brad

  • @hamishmoocow2070
    @hamishmoocow207015 күн бұрын

    Is there a simple way to allow for each product to have multiple categories like tags?

  • @mesafintminwagaw2110
    @mesafintminwagaw21102 ай бұрын

    great project thanks!! can you make this project with MERN stack project also with ts

  • @webphame
    @webphame2 ай бұрын

    Hey there brad , can you make it real world website like connect it with database . we as beginners just follow along the projects and dont get the idea how things actually work.

  • @harihoodibaba
    @harihoodibaba2 ай бұрын

    Thanks for this video. I learned JS mostly from your videos. Am wondering If this is the time to move to new Gen ai, and learn NLP LLM etc.. Please advise..

  • @harihoodibaba

    @harihoodibaba

    2 ай бұрын

    kzread.info/dash/bejne/qp97yrCqhsSXhtY.htmlsi=zNRNjaKf6s_OCxkb Sorry got the answer from you already. Thanks

  • @buddafi
    @buddafi2 ай бұрын

    Is there a coupon for this course? ;)

  • @mohammadfazlerabbi7712
    @mohammadfazlerabbi77122 ай бұрын

    Lets's say i am using tailwind css. So why do i need to add extra classList.add()? I could just directly paste any tailwind component in the div.innerHTML or write my own like Hey right?

  • @andreea34

    @andreea34

    2 ай бұрын

    @mohammadfazlerabbi7712 Yes, of course you could write your own component instead, but in that case you will need to write some extra CSS rules to style your custom classes. Brad is adding existing Tailwind classes in order to avoid writing extra CSS :) But, yes, you can insert custom code as needed. Remember there is always more than one way to do things in JavaScript.

  • @mohammadfazlerabbi7712

    @mohammadfazlerabbi7712

    2 ай бұрын

    @@andreea34 yeah i got your point Thanks 😀

  • @havecodesoft
    @havecodesoft2 ай бұрын

    Please make this kind of project using laravel and React using inertia.js. there are no more free resources doing that specially laravel and react. love your tuts btw.

  • @Alique_VSI
    @Alique_VSI2 ай бұрын

    Yes we are interested lets build it using react or nextjs please sir

  • @sharadrao4893
    @sharadrao48932 ай бұрын

    Love to learn same project in react

  • @ermacasd6190
    @ermacasd61902 ай бұрын

    with react it would be perfect

  • @top5-vid814
    @top5-vid8142 ай бұрын

    Please do the react or node js version

  • @umairulislam9048
    @umairulislam90482 ай бұрын

    I didn't understand why we are adding the "add" class to the counter button. Can anyone explain ??

  • @andreea34

    @andreea34

    2 ай бұрын

    @umairulislam9048 The class "added" is used to keep track of which buttons have already been clicked on (or which products have already been "added to card"). Since buttons are elements that can't store information about user events, they need to be tagged in some way when the user clicks on them. This tag can then be used in a conditional JS statement to check if the buttons have already been clicked on. This essentially turns the buttons into checkboxes from a JS point of view, if that makes sense (checked/unchecked). Of course, it's not necessary to use the class name "added" to check the button status, you could use one of the existing Tailwind classes on the button if you prefer (like the bg-red-600 class for example), or you could use a custom HTML property instead, like data-added-to-cart="true", etc. But using a class name is the simplest way to do this. Hope all that makes sense!

  • @umairulislam9048

    @umairulislam9048

    2 ай бұрын

    @@andreea34 Thanks I got it

  • @abenetbeyene3398
    @abenetbeyene33982 ай бұрын

    Please do with React projects

  • @top5-vid814

    @top5-vid814

    2 ай бұрын

    u rock buddy

  • @devoni_com
    @devoni_com2 ай бұрын

    Hello sir, I want to learn the web from scratch, but I do not know how to contact you

  • @afriend8961
    @afriend89612 ай бұрын

    Is that a VS Code Theme or custom? =).

  • @TheNarancia

    @TheNarancia

    2 ай бұрын

    Should be github dark theme

  • @MutantBikers
    @MutantBikers2 ай бұрын

    Do it in react

  • @danish7335

    @danish7335

    2 ай бұрын

    it will be easy

  • @BMikel
    @BMikel2 ай бұрын

    Please create the same but with Vue js

  • @Legacylanes_moto
    @Legacylanes_moto2 ай бұрын

    Really tired with all the frameworks.. nothing beats a simple project without any of the bs 💩

Келесі