Tailwind & JavaScript Project - Products Filtering UI

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 48

  • @codingman8056
    @codingman8056 10 месяцев назад +18

    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

  • @Gman_new_jersey
    @Gman_new_jersey 17 дней назад

    Wow Brad you never cease to amaze me. In my opinion you are the best coding instructor on the web! Your project are real world and you explain them so that anyone can understand. I appreciate you as a person taking time out to help. Thank you!!!

  • @AndrewKwabula
    @AndrewKwabula 9 месяцев назад

    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.

  • @Olympian97
    @Olympian97 9 месяцев назад +2

    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.

  • @cesarjaramillo9455
    @cesarjaramillo9455 10 месяцев назад +2

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

  • @ibrahimblahblahyapyap
    @ibrahimblahblahyapyap 9 месяцев назад

    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!

  • @BLC-x7z
    @BLC-x7z 2 месяца назад

    Yes please do a back end version with React! You are the best

  • @stephenadeoye8370
    @stephenadeoye8370 2 месяца назад

    Yes! React version is welcome, sir.

  • @altered3742
    @altered3742 8 месяцев назад

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

  • @DavidRagnar1
    @DavidRagnar1 10 месяцев назад +1

    Awesome stuff! Would loved to see this in Vue

  • @webphame
    @webphame 9 месяцев назад +1

    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.

  • @katungiyassin9947
    @katungiyassin9947 5 месяцев назад

    Brad is my best tutor though haven't been able fo buy his courses, much I learnt up to where I am simply got it from him. He has the best teaching style. I only have a simple request if he could do some Golang tutorials and the Gin framework in Go.
    Thanks good tutor. May God bless you.

  • @argempusrecords
    @argempusrecords 2 месяца назад

    thanks man, just what I needed for my project

  • @arisjacko1582
    @arisjacko1582 6 месяцев назад

    Brad I would love a follow up of this in React!

  • @slacle
    @slacle 9 месяцев назад

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

  • @hamishmoocow2070
    @hamishmoocow2070 7 месяцев назад

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

  • @sovereignlivingsoul
    @sovereignlivingsoul 9 месяцев назад

    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.

  • @newabyuser
    @newabyuser 9 месяцев назад +2

    Please do with React projects

  • @xbodoubles8974
    @xbodoubles8974 3 месяца назад

    How can I add pagination to it?

  • @Iam_swenky
    @Iam_swenky 10 месяцев назад +1

    Thank you Brad. 🥂

  • @top5-vid814
    @top5-vid814 9 месяцев назад

    Please do the react or node js version

  • @umairulislam9048
    @umairulislam9048 9 месяцев назад

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

    • @andreea34
      @andreea34 9 месяцев назад

      @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 9 месяцев назад

      @@andreea34 Thanks I got it

  • @devoni_com
    @devoni_com 9 месяцев назад

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

  • @mohammadfazlerabbi7712
    @mohammadfazlerabbi7712 10 месяцев назад

    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 9 месяцев назад

      @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 9 месяцев назад

      @@andreea34 yeah i got your point Thanks 😀

  • @buddafi
    @buddafi 10 месяцев назад

    Is there a coupon for this course? ;)

  • @PhilanJames
    @PhilanJames 10 месяцев назад

    Would be great to see in SolidJS.

  • @Alique_VSI
    @Alique_VSI 9 месяцев назад

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

  • @vinoobharadwaj
    @vinoobharadwaj 10 месяцев назад

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

  • @mesafintminwagaw2110
    @mesafintminwagaw2110 9 месяцев назад

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

  • @harihoodibaba
    @harihoodibaba 10 месяцев назад

    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 10 месяцев назад

      ruclips.net/video/xkGhNqVa1Vs/видео.htmlsi=zNRNjaKf6s_OCxkb Sorry got the answer from you already. Thanks

  • @MutantBikers
    @MutantBikers 10 месяцев назад +1

    Do it in react

    • @danish7335
      @danish7335 10 месяцев назад

      it will be easy

  • @afriend8961
    @afriend8961 10 месяцев назад

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

    • @TheNarancia
      @TheNarancia 9 месяцев назад

      Should be github dark theme

  • @sharadrao4893
    @sharadrao4893 9 месяцев назад

    Love to learn same project in react

  • @habtesellasie
    @habtesellasie 10 месяцев назад

    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.

  • @ermacasd6190
    @ermacasd6190 9 месяцев назад

    with react it would be perfect

  • @pfkellogg
    @pfkellogg 10 месяцев назад

    Thanks again very much.

  • @AbdullahAbid-qi5mq
    @AbdullahAbid-qi5mq 10 месяцев назад

    Thank-you very much.

  • @vinayvardhanyt2415
    @vinayvardhanyt2415 9 месяцев назад

    Thank you

  • @Uncaught_in_promise
    @Uncaught_in_promise 10 месяцев назад +1

    Please create the same but with Vue js

  • @Legacylanes_moto
    @Legacylanes_moto 9 месяцев назад +2

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