Make Portfolio Filterable Image Gallery With HTML CSS & JavaScript | Filterable Gallery

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 ม.ค. 2025

ความคิดเห็น • 70

  • @Tech2etc
    @Tech2etc  3 ปีที่แล้ว +4

    Hope you enjoyed, If you really do then please Subscribe Like & Share💖
    I really need your support.
    Also checkout our JavaScript Projects Playlist & Become JavaScript Master 👇
    th-cam.com/play/PL9bD98LkBR7P16BndaNtP4x6Wf5Ib85Hm.html

    • @CodingAddict
      @CodingAddict 3 ปีที่แล้ว

      Hello, can you do me a favor and stop using my content. Here is the original video from coding addict - th-cam.com/video/c5SIG7Ie0dM/w-d-xo.html

    • @techsquad2112
      @techsquad2112 2 ปีที่แล้ว

      Hey! No error in Code but not working help please

    • @techsquad2112
      @techsquad2112 2 ปีที่แล้ว

      (function () {
      const buttons = document.querySelectorAll('.btn')
      const storeImages = document.querySelectorAll('.store-item')

      buttons.forEach((button)=> {
      button.addEventListener('click', (e) => {
      e.preventDefult()
      const filter = e.target.dataset.filter

      storeImages.forEach((item) => {
      if (filter === 'all') {
      item.style.display ='block'
      } else {
      if (item.classList.contains(filter)) {
      item.style.display ='block'
      }
      else {
      item.style.display ='none'
      }
      }
      })
      })
      })
      })();

    • @techsquad2112
      @techsquad2112 2 ปีที่แล้ว

      links not working! Please Help me Brother!

    • @anythingcompany
      @anythingcompany ปีที่แล้ว

      HOPEFULLY YOU SEE THIS CODER!
      DELETE " (function() ) " and this code will work. That is no longer necessary in today's javascript.

  • @R3DA333
    @R3DA333 9 หลายเดือนก่อน +2

    you are the best i swear ; thank for you way of explaining things such an amazing tutorials

  • @professionalshahbaz8655
    @professionalshahbaz8655 ปีที่แล้ว +2

    That is what I was looking for.Thank you so much for for solving my problem and quality content.

  • @LuckyInfotech
    @LuckyInfotech ปีที่แล้ว +1

    if buttons clicking not appearing images , please check once data-filter names, and class names.

  • @shamirroy606
    @shamirroy606 3 ปีที่แล้ว +2

    You've made it look so easy. Thanks bhaia for such incredible tutorial.

    • @Tech2etc
      @Tech2etc  3 ปีที่แล้ว +1

      Glad U enjoyed.

  • @mayainfi
    @mayainfi 9 หลายเดือนก่อน

    Awesome! It worked 🎉

  • @aylinsentuerk8672
    @aylinsentuerk8672 ปีที่แล้ว

    This was so helpful ,thank you!

  • @BlackHeart-eb2nu
    @BlackHeart-eb2nu 3 ปีที่แล้ว +1

    It's very nice
    And you are a good teacher ☺️

  • @dexter3943
    @dexter3943 2 ปีที่แล้ว +7

    Great video ❤️
    I have a question though why have you created a function and putted all the codes inside that function! My codes weren't working until i removed that function! Thanks for the tutorial BTW

    • @hyd_explorer_360
      @hyd_explorer_360 2 ปีที่แล้ว

      Hey thank u
      I also removed the function, and now the code is working fine.....

    • @techsquad2112
      @techsquad2112 2 ปีที่แล้ว

      @@hyd_explorer_360 How to remove please share code Thanks

  • @rustyscrew5776
    @rustyscrew5776 ปีที่แล้ว +1

    Curious to know why your function is in brackets at 13:49. I'm new and I get that this is probably a silly question.

    • @sarcasticcat9876
      @sarcasticcat9876 ปีที่แล้ว

      Me also seen that kind of syntax only in his video

    • @raghavloknath9708
      @raghavloknath9708 ปีที่แล้ว

      so you know how function call works right? we just put the name of the function followed by () to call it....man's defining a function in place of the function name and then calling it.

    • @anythingcompany
      @anythingcompany ปีที่แล้ว

      Its exactly because we're new! 😂 he trying to get you to buy the code instead of following along the video.
      Notice the code had an error in it! Jump between 17:18 to 17:24 and you'll see a quick cut and updated code.
      DELETE " (function() ) " and this code will work.

  • @coding2409
    @coding2409 2 ปีที่แล้ว

    Beautiful ❤️❤️❤️ bro made more this type projects

  • @abuqeisimran9676
    @abuqeisimran9676 2 ปีที่แล้ว +1

    Thanks a ton sir, it works good like yours.

  • @studywithroman1997
    @studywithroman1997 ปีที่แล้ว

    mash allha excellent sir

  • @ArunKumar-rn5yk
    @ArunKumar-rn5yk ปีที่แล้ว +2

    dude that code is not working!
    kindly replay to help to sort out that trouble.

  • @soielumsay
    @soielumsay ปีที่แล้ว

    thank you so much! one question, if I wanted to add a transition, how could I do it?

  • @sajjadlatafaty2547
    @sajjadlatafaty2547 3 ปีที่แล้ว

    Continue with strength, bro.............thanks

    • @Tech2etc
      @Tech2etc  3 ปีที่แล้ว

      Thank you, I will

  • @ant7lop
    @ant7lop ปีที่แล้ว +1

    how to removed the "ALL" buttom and start with Logo Design only? thank you , great job

  • @shna90
    @shna90 ปีที่แล้ว

    it's awesome!

  • @antonymwangi6083
    @antonymwangi6083 2 ปีที่แล้ว

    The tutorials are really awsome. But you can include tutorials that will be based on data analys using js

  • @mahwishwasi478
    @mahwishwasi478 2 ปีที่แล้ว +2

    your code is not working in app.js part that button part was not working ?

  • @anamarie9585
    @anamarie9585 9 หลายเดือนก่อน

    Hello what if I want to add icons on the filter menu

  • @genztechman
    @genztechman 2 ปีที่แล้ว

    amazing video thanks

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Your welcome.

  • @hurairahrandhawa5160
    @hurairahrandhawa5160 ปีที่แล้ว

    Tech2 sir there is I'd name store item so we use id name with # sign Soo when we are using it in J's we will write like this document.queryselectorAll(.#Store-item) but u typed . There too can u tell me why

  • @aswina533
    @aswina533 3 ปีที่แล้ว

    Well done

  • @sajjadlatafaty2547
    @sajjadlatafaty2547 3 ปีที่แล้ว

    The bro of this code refers to the photos of that part... thanks
    item.style.display="block";

  • @gauravpatil534
    @gauravpatil534 3 ปีที่แล้ว +1

    Sir i want how to track personal ip address video can you give me???? Please...

  • @MustfaKhan-y8r
    @MustfaKhan-y8r ปีที่แล้ว

    From where did you learn JavaScript please tell me

  • @sudarshangirigoudar5079
    @sudarshangirigoudar5079 ปีที่แล้ว

    Can you make video on angular using type script sir plz!?

  • @hillogi
    @hillogi 2 ปีที่แล้ว

    Links not working?? Someone help me

  • @amrholo4445
    @amrholo4445 2 ปีที่แล้ว

    thanks a lot

    • @Tech2etc
      @Tech2etc  2 ปีที่แล้ว

      Your welcome.

  • @omarfurkan904
    @omarfurkan904 3 ปีที่แล้ว

    why Parentheses is used at starting and ending point of the function. can you please explain?

    • @surbhiagarwal8513
      @surbhiagarwal8513 2 ปีที่แล้ว

      these are IIFE functions which are imeediately invoked without explicit calling

    • @surbhiagarwal8513
      @surbhiagarwal8513 2 ปีที่แล้ว

      immediately*

  • @Unknown-cj8fv
    @Unknown-cj8fv 3 ปีที่แล้ว

    How to create search engine? Plz make a video about it! Thanks.

    • @Tech2etc
      @Tech2etc  3 ปีที่แล้ว

      Ok, I will try

  • @HamaadAfzal
    @HamaadAfzal ปีที่แล้ว

    sir make a cart page project using javascript

  • @orbit5859
    @orbit5859 3 ปีที่แล้ว +1

    Thnx

    • @Tech2etc
      @Tech2etc  3 ปีที่แล้ว

      Your most welcome

  • @mulyana4458
    @mulyana4458 3 ปีที่แล้ว

    thank u

  • @rabiafyz9952
    @rabiafyz9952 3 ปีที่แล้ว

    I cannot see well on mobile.

  • @umardarazofficials3529
    @umardarazofficials3529 2 ปีที่แล้ว

    Bro it's 2nf time, your js is not working 😢

    • @Everydayshorts913
      @Everydayshorts913 2 ปีที่แล้ว

      _yaduvanshi_jai

    • @anythingcompany
      @anythingcompany ปีที่แล้ว +1

      Its exactly because we're new! 😂 he trying to get you to buy the code instead of following along the video.
      Notice the code had an error in it! Jump between 17:18 to 17:24 and you'll see a quick cut and updated code.
      DELETE " (function() ) " at the beginning and this code will work. Also make sure you take a screenshot and compare your code to his around the 18:44 mark. 🎉🎉🎉

  • @harshkumarkoladiya7695
    @harshkumarkoladiya7695 ปีที่แล้ว

    Javascript part is not working no error but not working

  • @aftabsaleem2670
    @aftabsaleem2670 2 ปีที่แล้ว +1

    not working

    • @anythingcompany
      @anythingcompany ปีที่แล้ว

      Designed that way...
      Its because we're new!
      😂 he trying to get you to buy the code instead of following along the video.
      Notice the code had an error in it! Jump between 17:18 to 17:24 and you'll see a quick cut and updated code.
      DELETE " (function() ) " and this code will work. Also compare your code to a screenshot around 18:44 and make sure all your functions/brackets are closed.
      When running this through a Java console there are syntax errors. Meaning code isn't written properly. That function tag is not needed in today's coding.

  • @francisadekanye1537
    @francisadekanye1537 ปีที่แล้ว

    That's it