JavaScript Project | Create Product Search Engine/Bar/Filter in JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

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

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

    JavaScript Project | Create Product Search Engine/Bar/Filter in JavaScript.
    - Need Your Support Guys. Help Me To Reach 200K SUBSCRIBERS 🔥
    More JavaScript Projects:
    th-cam.com/play/PL9bD98LkBR7P16BndaNtP4x6Wf5Ib85Hm.html
    Timestamps:
    0:00 Intro
    1:41 File Directory
    2:40 HTML For Search Bar Interface
    4:52 CSS For Styling Search Bar Interface
    9:55 Adding Products and Details
    11:35 Styling Product Image & Details
    14:34 Adding More Products
    15:08 Fixing More Products in CSS
    16:55 Make Search Bar working in JS
    17:33 Creating Function
    20:48 Matching Products Showing
    23:40 Removing Unmatched Products
    24:37 Quick Demonstration (Important)
    27:04 Lets See What we have made
    Download Images: www.patreon.com/posts/58490866

    • @Chandraprakash-kx4ic
      @Chandraprakash-kx4ic ปีที่แล้ว

      Waiting for 100K SUBSCRIBERS 🔥

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

      Bro there is an issue we have to refresh page every time to search new product

    • @Sweet-ex8ln
      @Sweet-ex8ln ปีที่แล้ว

      Js concept not understand in search engines

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

      @@Sweet-ex8ln Hey bro.. If you are trying to clear your js concepts by just watching one video.. Then wake up from your sleep. Programming is not for you. Find another passion or field. I have seen people who are sticking to js nearly over a year just to learn the basics. Im not here to demotivate you, just giving you reality check 👍

  • @jayshah5065
    @jayshah5065 ปีที่แล้ว +6

    Thank you for this!!!
    I tweaked the code according to my requirement and it worked just perfect!!! you are doing a great job !!

  • @ad.infinitum.per.aspera
    @ad.infinitum.per.aspera 8 หลายเดือนก่อน +2

    A super project for beginners to sum up their basic knowledge. Thank you!

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

    Too good ....just done making this ...and without your help wouldn't be possible... thank you so much 🙏❣️

  • @Logicrealtor_dubaipro
    @Logicrealtor_dubaipro 3 ปีที่แล้ว +10

    You're a great teacher, you should have a coding Bootcamp

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

      Thanks man

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

    One of the best out there. I can't thank you enough for this immensely informative and easy-to-understand tutorial. Also, I appreciate the fact that you took the time to explain everything (again) before wrapping up your video. I've happily subscribed and now, I am going to watch all your videos to learn more Javascript. Thank you again mate!

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

      Im glad that you are enjoying this channel

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

      @@Tech2etc I am indeed enjoying this channel. It's a great discovery.

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

      ++++

    • @RajPal-i2w
      @RajPal-i2w ปีที่แล้ว

      Pls any one give me the code in comment box

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

    You explain coding JS very well. The best is that you say all that is needed and no more extra stuff said. thanks for sharing.

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

    thanks brother . i never see some one like you everything in your video are clear and easy coding thanks a gain bro👑👑

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

    I love Tech2etc's content very much...

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

    thanks for the overflow-y : scroll
    and offcourse the whole project its awesome

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

      More projects are coming soon.
      Please share this project on your social media. It will help us. Thanks.

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

    This is fantastic. So many possible project ideas based on these functionalities thank you

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

    TNice tutorials is absolutly the best video of the world you expaining skills are good and it was a honor to see tNice tutorials vid well done

  • @shivrajprachande540
    @shivrajprachande540 8 หลายเดือนก่อน

    Thank you so much !!
    Keep Making such videos more 😍🥰

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

    Working properly ..thanks man.

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

    thanks heaps mate this is something I wanted to implement on my own project and worked perfectly!

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

    Bro...
    JavaScript ki playlist upload kijea...
    Your teaching method is awesome...

  • @unknownroaster5477
    @unknownroaster5477 6 หลายเดือนก่อน

    Thanks a lot sir, it was really helpful and informative

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

    wow great video, easy to follow and well explained

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

    Ohh thank buddy ,I was looking for a same type of video since so long.

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

      Your most welcome. Please share this project on your social media. Will appreciate that.

  • @TheIndianOutcast
    @TheIndianOutcast 5 หลายเดือนก่อน

    Great work.

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

    thanks a lot sir i finding this method and we get and i emplemet this work fine love you...

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

      Tnx dear

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

    Your demonstration is perfect 👌

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

      Thank you so much

  • @Deksii
    @Deksii 4 หลายเดือนก่อน

    Great job 10q sir

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

    very perfect....Create JavaScript projects again, I enjoyed it, thank you

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

      Most welcome

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

      Please check JavaScript projects playlist for more projects like this.

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

    Thank you sir And sir your way of explaining is great and This video is very useful for those who want a working search bar.

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

      Your Most welcome

  • @somebody1222
    @somebody1222 11 หลายเดือนก่อน

    Great Work!

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

    God bless you bro, keep up the good work

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

    thankyou sir, your vid really helped me, it worked on my case

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

    Thank you, Proper explanation. Great work

  • @rohan67.
    @rohan67. ปีที่แล้ว

    superb explination

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

    Good voice. Relevant.

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

    Hello bro.
    Thank you.
    I liked it. It is the best project I have ever seen. ✊.
    I wish you all the best.
    Thank you bro.

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

    This is nice🔥🔥🍻🍻I'm Glade I came to this video 🔥🔥🔥very nice n clean code

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

      You're very welcome!
      More projects are coming soon.
      Please share this project on your social media. It will help us. Thanks.

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

    Hello, thank you very much for this wonderful video, but I have a question, if you allow me, how can I hide the list of products where the results appear only when I search from the search bar, for the products I search for??

  • @Meshack_Locho
    @Meshack_Locho 10 หลายเดือนก่อน

    Hey mahn, this is amazing thank you so much

    • @Tech2etc
      @Tech2etc  10 หลายเดือนก่อน

      Your most welcome 😇

  • @Anonymous-jx4zp
    @Anonymous-jx4zp 3 ปีที่แล้ว +1

    i like the way you explain

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

    This was awesome!!! Thansk!!!!

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

    good! very good expanation

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

    Nicely done. Thank you. Keep up with the good work

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

      Your most welcome. Please share this project on your social media. Will appreciate that.

  • @trapx6349
    @trapx6349 11 หลายเดือนก่อน

    Broooo, thankyou so much❤

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

    Thank you sooo much bro ❤

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

    Really appreciate ❤

  • @wolf-splay4956
    @wolf-splay4956 2 ปีที่แล้ว

    Bro I love You 😍

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

    This helped so much thank you.

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

      More projects are coming soon.
      Please share this project on your social media. It will help us. Thanks.

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

    TYYYYYYYYYYY SOOOOOOOOO MUCH
    It worked and it was also kinda easy to understand

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

      Thank you

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

    Thanks 🎉

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

    Thanks , It's work

  • @tammammohammed4442
    @tammammohammed4442 5 หลายเดือนก่อน

    Thank you for all the effort. I have a problem and it seems that it is a repeated problem whenever I write a js code. The js part of the project does not work. What could be the problem. Note: I installed node.js and I put the path in the system variable but still it does not work.

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

    Can you make it so the box and the products only appears when I click on the search box

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

    yes its working

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

    Will it bring you to another page after you click the selection?

  • @val_en_tine
    @val_en_tine 11 หลายเดือนก่อน

    Thank you so much 🥹

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

    thanks broo

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

    Thanks❤

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

    Please mine is still not working. Where I replaced document with storeitems const pname is saying HTMLElement | null

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

    Great

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

    a great tutorial

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

      Thanks bro

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

    Maa Sha Allah vaiia, Aapni ki Bangladeshi?

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

    thank you boss

  • @aligh9983
    @aligh9983 11 หลายเดือนก่อน

    it was really useful for and i learn a lot spcially css and html and i would to learn javascript with if it is possible

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

    Good tutorial ! But the search box isn't working , do you have any idea ? all the code is written in the right way

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

      Am having the same problem here,plz help

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

      Same problem bro

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

      same issue too...and there is no error

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

      It's working. Check whether I'd name in html matches with js

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

    Amazing!!

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

    How it apply in e commerce? I want to create an search bar in the nav bar but the pictures is hidden.

  • @Maywebmst
    @Maywebmst 11 หลายเดือนก่อน

    pls can you make a video of calculating total price in cart item using javascript

  • @JNS_NLS
    @JNS_NLS 7 หลายเดือนก่อน

    Hey bro, I tried this out and everything worked except for the objects moving upwards to the search bar itself after searching for them. They usually have a weird margin (i think thats the problem) but I cant find the trigger to my problem. Do you know how to solve this problem?

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

    Thank you, perfect video! But what script should I put if also want to search h3 value?

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

    Dude, there's a much easier way.
    const searchSentence = value.trim().toLowerCase()
    const result = products.filter(val => val.productName.toLowerCase().includes(searchSentence)

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

      where do you put these 2 lines, what do they do, and what do they replace?

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

    Thank you sir I'm having problem in my music player search bar

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

    hi~
    What about adding more search items instead of only one item?

  • @Movies-rl3ti
    @Movies-rl3ti ปีที่แล้ว

    everyone can search with keyword " how to search/ filter list W3School". This code is similar.

  • @AhmadBilal-dy9ou
    @AhmadBilal-dy9ou 2 วันที่ผ่านมา

    sir jo ap nay app.js ki file create ki hui hai us ka code to ap nay video main dikhaya hi nhi hai

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

    Subscribed

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

    tried it..it didnt work...checked for errors no errors..and yet not working

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

    I was challanged for an hour to decode an error and guess what?..i found out that I wrote the wrong spelling of character under .

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

    Great job! but you declared a variable 'storeitems' and it was not used anywhere.

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

    Python videos pls 😅😅

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

    Thanks for this video, but mine doesn’t work even I copied the code exactly. Const storeitems: HTMLElement | null. This is what I get at the declaration of the pname.

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

    sir mere me ye work Kyun nhi kr rha
    na koi error show kr rha hai console me jab ki script show kr rha
    plz help me!!

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

    what is the use of [0] . you write in line no. 8

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

      indexOf() returns the position of a specified value in an array.
      To create For Loop, declaring var i=0 or var x=0 is a must.
      var i=0 was used here to set a variable before the loop starts.
      let match = product[i].getElementsByTagName("h2")[0]; ----This was your question----
      i here means i number of products (its an assumption)
      [0] here means he is trying to access the first element of the product and in javascript, 0th product means 1st product.
      example from W3Schools:
      const fruits = ["Banana", "Orange", "Apple", "Mango"];
      Question: Find the index of Banana.
      Answer:
      let index = fruits.indexOf("Banana");
      console.log(index);
      It will log 0 because Banana sits in the 1st position in this array, which is considered as the 0th position in javascript!
      Counts in JavaScript starts from 0 1 2 3 4 5 etc.
      Banana 0
      Orange 1
      Apple 2
      Mango 3

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

    Can i make with this search engine for buttons

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

    hi, how can i do this with select box buttons? example: "first select box: city , second select box: district, third select box: categories"

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

    excellent but let me ask you one question what is the d/ce between software enginner and computer science

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

      "Software engineering is the application of engineering principles to computer hardware and software, usually to solve real-world problems. Computer science is the application of the scientific method to computer software. CS is broader and more abstract and is used for theoretical applications than practical ones" - careerkarma.
      Please search this question in google. You will get a lot of helpful articles regarding this topic.

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

    Tried checking the code word for word, doesn't work.

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

      Let me know the issue you are facing. Will try to help.

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

      Am facing the same problem

    • @DeviDevi-yr2sv
      @DeviDevi-yr2sv 2 ปีที่แล้ว

      @@Tech2etc same issue I am also facing

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

      same here

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

      @@Tech2etc same issue sirr.. am not getting any error still not working

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

    It's not working?

  • @Anonymous-mj4zw
    @Anonymous-mj4zw ปีที่แล้ว

    Does it work without hosting website

  • @21-himanshujadav83
    @21-himanshujadav83 ปีที่แล้ว

    how do i initially hide all the products and let them show when some text is written in search bar?

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

    Hey, nice video, it help me a lot.
    One question, if i want to hide the products until the user become to type the name of them, and that moment they start to appear, how can i do it?

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

      I resolve to do:
      Create a new variable inside search() that is:
      const is-visible = document.getElementById("product-list")
      And then, inside the second if, i added to the product[i].style.display = "";:
      is-visible.classList.remove('overflow-hidden');
      is-visible.classList.add('overflow-visible');
      Because i use bootstrap 5, but i have an issue.
      When i delete the letters in the search box, the products doesnt disapear, they all stuck in the screen.
      Any suggestions?

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

    Kindly go for JavaScript dedicated playlist....

  • @Bharatiyath
    @Bharatiyath 4 หลายเดือนก่อน

    Dude it is showing toUpperCase() undefined what to do...?

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

    search box not working

  • @DM-fr3ve
    @DM-fr3ve 2 ปีที่แล้ว +1

    Hello! Thanks for the video! I am having some trouble getting it to work. Can I show you my code somehow please? I validated the HTML, CSS and JS with online validators and I have no errors. Thanks in advance!

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

      Please join our discord.

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

      @@Tech2etc sir how to join

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

    I don't know what's wrong wit me. I can't fix my problem. my code isn't running.

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

    Are you using Android studio Sir?

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

      Vs code

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

      @@Tech2etc alright thanks , well-done . I just subscribed

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

    Search Box is not working.

  • @ABHISHEKSingh-205
    @ABHISHEKSingh-205 2 ปีที่แล้ว

    Sir plz make more video on javascript

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

      Sure bro, i will

  • @AhmadBilal-dy9ou
    @AhmadBilal-dy9ou 2 วันที่ผ่านมา

    Sir search icon is not display with your code

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

    Can you do another video for searching with both title and price

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

      Sure, will try that

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

      @@Tech2etc I will really appreciate,I will be looking forward to that

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

    hi bro how to add images into image file with what extension

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

      exactly bro, I have this same problem, when I'm inserting my own images, it is not working, as his

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

    now an input interface would complete this project, it could be adapted to other applications

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

    Its work 🔥🔥😌

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

      Im glad to hear that.