I'm new to JS, but watching your videos, while not really making me understand everything, always seems to give me a lot more clarity on peripheral ideas to the video, plus giving me an idea of how to think about problems that are beyond my abilities for the time being
As part of my college assignment, I was tasked with creating a review website, so this really helped in making it more fledged out and professional-looking. Thank you for the video, it's simple and really well done!
I absorbed this video like a sponge in serendipity today because I happen to be working on an HTML search bar for my feathersjs client application right now. It's mostly working and I'm in the middle of chasing down some bugs but you've given me some great ideas to improve it. Thanks Kyle!
This just made my life easier Before I always make two objects, 1 for the full list of information and the other 1 is for filtering, every input event a loop occurs to check if the letter typed by the user matches to any information thats in the full list object Its brilliant that appending everything on the webpage and then hide those who doesnt match from the input
Very nice video, and well made explanations. Just a small caveat : such a search shouldn't be used on a huge amount of data. When needing to filter through many entries, or through very large entries, it can be better to use a server-side filter. This will often result in a faster result due to the server being able to filter faster than most devices, less data being transmited, and the ability to cache common search results to deliver the same response to multiple users. This does go behond the scope of an easy tutorial, but I believe it's important to mention it, since I've seen people fall into the pitfall of using a full-javascript search for multi-thousand entries search; and it doesn't always goes well for them.
Agreed. I'll add that search can be implemented more efficiently than a one-by-one-filter by using a data structure meant for that use case (even if done in browser-side js), and that on the server you have ElasticSearch at your disposal to do just that.
After spending an hour tryna figure out how the does the toggle hide functionality works so well, I finally understand. It's basically has to do with the fact that classList.toggle("className", force) works differently with two arguments. One might assume that if force boolean is true, toggle will be performed, else ignored. But that isn't the case. In case of two arguments: - toggle will add the class if the second argument (force) is true. - and remove the class if the second argument (force) is false. That's why elements don't keep toggling when search is invalid consecutively.
Kyle. This is a filter not a search. Nobody building apps to search for a user would load ALL of the users first, especially if there are 1000's of them, to then filter them down. It would have been a much more realistic use case to create a search with typeahead functionality connected to a DB. This is a valid filter usage for other use cases but for users is just not realistic.
@@richardIambert Hi Richard. As you type new searches are performed. This needs to take into account debounce so that not EVERY keystroke performs a new search, rather only do this after a user stops typing for X number of seconds
@@brandonampang2199 Bro it's a huge problem because first you will have to pull up 1000s of users... And then filter it, that's gonna take up a lot of time
A good thing that might of been an idea to mention, is to set a stagger/delay to the fetch request itself if it's ever setup to trigger upon user input - IE set a 250/500ms timer, if the user hasnt made any additional inputs, fire the fetch request. Because having a fetch request (to what would usually be a db or an API which has its own set of throttles) fire rapidly for each individual character could come with it own caveats overtime
@@mykalimba I know its only applied to the initial load in this example, but i was more on about other use cases as not all the data is going to be loaded in straight away in every production scenario.
With this tutorial I won't have to refactor anything. Thankyou for your clear explanation and throwing in new concepts that I wasn't aware of. So grateful)))
I love your channel. I love how you always take the time to explain how each new piece of code works, and why it's there. You're an amazing teacher. I recommend your channel to everyone.
Just finished a coding bootcamp and your video is amazing at building on from what we learned. Your explanations are what make this video so great, thankyou! I think I wrote more comments than code!
Going very well thank you! was lucky and managed to find a job very soon after the boot camp! Been at my new company coming on for a year now and loving it. Bootcamps are an expensive way into the industry and maybe not the right move for everyone. But if you research the right one for you, then they can be a fantastic path forward.
I replaced all data- selectors with class and id selectors and it works fine. i even added h1.header on top of the body and it still works as expected.
Mann way to go this is pro! I didn't even know about the html template tag. Very clear and smooth tutorial. Very well structured. Liked and subscribed.
Very well explained. Even I don't know advanced JS still I understood what is done here, how and why. That's is what I expect from you. Thanks a lot!! @WebDevSimplified
I just started learning js , i learn today arrays methods.. , i don't understand how he made that search bar yet but i will come back later to see it again.
Alternatively, if you want to use a hyperlink or images from your data instead of just text, do: const hyperlink = card.querySelector("[data-link]"); const imgSource = card.querySelector("[data-src]"); hyperlink.href = user.link; imgSource.src =user.img;
The one thing you need to work on and what is it your playlist please organize your playlist when someone looking for a beginner to advanced JavaScript course your playlist is mashed up we all love your content and your design so consider this bro Love from Pakistan 🚀
One change I would make is to simply store a lowercase version of the name and email address when you store the user object. Rather than calling toLowerCase on name or email for all users on each and every single key pressed in the search bar.
It gives him more flexibility to add and repeat classes. I am not sure about ids but I don't think it's good practice to repeat ids since you usually create an ID to reference one element.
Ok but in this particular example he does card.querySelector(...) and not document.querySelector(...) so i don't think classes would be a problem if they are repeated elsewhere.
@@vigormilo168 card query selector is using document.query selector under the hood to reference the card template element. In this case he has a second query selector nested inside the card called data-header and data-body.
I believe he uses data attributes as a personal choice. My personal choice is to use an id, as it is implicit that there should be at most one element that matches the id. IMO, using data attributes or class names in an instance like this is not the best choice, because you're looking for exactly one element in the document (or card), but it is technically possible for the data attribute or class name to be assigned the multiple elements.
Legend!!! you always have ways of coding that blow my mind !! thanks so much for sharing this !! Quick questions tho, why don't you ever use query selectors like id's or classes? You're always creating html data attributes. There must be a reason behind it, and I'd love to know it. Again, you're awesome. Thanks so much for your content !!
This is short but as a self learner I need to understand how to connect/call the data from different nest or function. I hope i can recall this after a week and after i finish another project tutorial.
Also with searching, I would add debounce. As this solution Kyle is proposing you would make an API call after every keypress. Debounce adds a delay, when you stop writing fire the event, and make API call.
This solution doesn't make an API call on every key press. The data is fetched once and mapped over into an array. It is the array which is then iterated over on every key press 👍
Hey Web Dev Simplified i am confused here , what are you writing after class and template like " " and " thanks and your videos are by far the best among coding channels
These are called data attributes. You can use them to store any information related to a particular element. Kyle put them there so he could select the elements later using querySelector (although I think using classes and IDs would have the same result).
Any comparison between what way is better to use to populate elements on website? With html template element VS entirely through JS, with template literals ? From a performance standpoint, optimal performance standpoint, etc... Thanks!
I literally just submitted my cs assignment like an hour before watching this video, this would have been so helpful lol. Also what vscode add ons do you use? That autocomplete and auto format looks nice.
if you have only like 5 or 10 thing to serach throw an easy way to do it is to get the input from the bar check with .includes(//the contents of the bar) and check for every title of the element you are searhing if it is, now if one element has the contents in it , then do a main.innerHTML = main.innerHTML + `
+ use to lowercase and make sure your sorting method has all lowercase identifiers + unfortunantly if instead of typing fortnite you type fortnute it wont show (just like the tutorial but keep in mind small mistake in speling make a difference)
I'm new to JS, but watching your videos, while not really making me understand everything, always seems to give me a lot more clarity on peripheral ideas to the video, plus giving me an idea of how to think about problems that are beyond my abilities for the time being
Just stick to it. You'll go back to these eventually and things you've learned here, will suddenly make sense later.
same
how are you doing now?
me too but i'm not english and this is complicated
ey bro how da fuck is it going?
I'm literally creating a project that needs a search bar right now, so this video was perfect timing
Me too ;)
I think that just means google is stalking you lol
mee too 🤗
so now u could able to create search with ur own 😄
As part of my college assignment, I was tasked with creating a review website, so this really helped in making it more fledged out and professional-looking. Thank you for the video, it's simple and really well done!
I absorbed this video like a sponge in serendipity today because I happen to be working on an HTML search bar for my feathersjs client application right now. It's mostly working and I'm in the middle of chasing down some bugs but you've given me some great ideas to improve it. Thanks Kyle!
2 years and you still manage to keep helping me. Thanks a lot!
This just made my life easier
Before I always make two objects, 1 for the full list of information and the other 1 is for filtering,
every input event a loop occurs to check if the letter typed by the user matches to any information thats in the full list object
Its brilliant that appending everything on the webpage and then hide those who doesnt match from the input
Very nice video, and well made explanations. Just a small caveat : such a search shouldn't be used on a huge amount of data. When needing to filter through many entries, or through very large entries, it can be better to use a server-side filter.
This will often result in a faster result due to the server being able to filter faster than most devices, less data being transmited, and the ability to cache common search results to deliver the same response to multiple users.
This does go behond the scope of an easy tutorial, but I believe it's important to mention it, since I've seen people fall into the pitfall of using a full-javascript search for multi-thousand entries search; and it doesn't always goes well for them.
Yes, agreed but I think he was just demonstrating how it can be done client-side.
Agreed. I'll add that search can be implemented more efficiently than a one-by-one-filter by using a data structure meant for that use case (even if done in browser-side js), and that on the server you have ElasticSearch at your disposal to do just that.
Thanks for drawing attention to this extremely important point.
Yours are the best tutorials I've found on the web.
After spending an hour tryna figure out how the does the toggle hide functionality works so well, I finally understand.
It's basically has to do with the fact that classList.toggle("className", force) works differently with two arguments. One might assume that if force boolean is true, toggle will be performed, else ignored. But that isn't the case.
In case of two arguments:
- toggle will add the class if the second argument (force) is true.
- and remove the class if the second argument (force) is false.
That's why elements don't keep toggling when search is invalid consecutively.
Kyle you’re awesome. I can’t tell you how much I love your tutorials. It’s straight to the point, comprehensive, and consistently good.
Kyle. This is a filter not a search. Nobody building apps to search for a user would load ALL of the users first, especially if there are 1000's of them, to then filter them down. It would have been a much more realistic use case to create a search with typeahead functionality connected to a DB. This is a valid filter usage for other use cases but for users is just not realistic.
What is typhead functionality?
@@richardIambert Hi Richard. As you type new searches are performed. This needs to take into account debounce so that not EVERY keystroke performs a new search, rather only do this after a user stops typing for X number of seconds
Yeah I was wondering how this would be able to handle so much data. I'm actually trying to find a way to deal with 1000+ data for a project.
How about don’t show the todos, and then show it when you type in the search bar
@@brandonampang2199 Bro it's a huge problem because first you will have to pull up 1000s of users...
And then filter it, that's gonna take up a lot of time
A good thing that might of been an idea to mention, is to set a stagger/delay to the fetch request itself if it's ever setup to trigger upon user input - IE set a 250/500ms timer, if the user hasnt made any additional inputs, fire the fetch request.
Because having a fetch request (to what would usually be a db or an API which has its own set of throttles) fire rapidly for each individual character could come with it own caveats overtime
In this project, there's only one fetch request that's made the entire time. It runs once when the page is loaded, not every time the input changes.
@@mykalimba Thanks. Thats literally what I was just going to write right now.
@@mykalimba I know its only applied to the initial load in this example, but i was more on about other use cases as not all the data is going to be loaded in straight away in every production scenario.
you have the best channel for web dev on youtube. Great explanations of the solutions.
With this tutorial I won't have to refactor anything. Thankyou for your clear explanation and throwing in new concepts that I wasn't aware of. So grateful)))
My gosh that is awesome. I can definitely foresee myself watching this about 10 more times before I actually try to do it myself.
I love your channel. I love how you always take the time to explain how each new piece of code works, and why it's there.
You're an amazing teacher. I recommend your channel to everyone.
your channel is so underrated. Thank you so much, it helps me a lot with my college projects!
Just finished a coding bootcamp and your video is amazing at building on from what we learned. Your explanations are what make this video so great, thankyou! I think I wrote more comments than code!
How's the job search coming off after your bootcamp?
Going very well thank you! was lucky and managed to find a job very soon after the boot camp! Been at my new company coming on for a year now and loving it. Bootcamps are an expensive way into the industry and maybe not the right move for everyone. But if you research the right one for you, then they can be a fantastic path forward.
@@jamesabbott1517 Thanks for sharing man. Do appreciate the response.
I replaced all data- selectors with class and id selectors and it works fine. i even added h1.header on top of the body and it still works as expected.
Mann way to go this is pro! I didn't even know about the html template tag. Very clear and smooth tutorial. Very well structured. Liked and subscribed.
I love you, a quick tutorial to start the day. Bravo, my friend!😀
You are a very gifted presenter. Please continue.
Very well explained. Even I don't know advanced JS still I understood what is done here, how and why. That's is what I expect from you. Thanks a lot!! @WebDevSimplified
thanx bro i was making website for helping ayurvedic student and your video really helped me
😘
Thanks Kyle for not doing this with React.
I love straight JS!
So much knowledge imparted in so short a time! - So fluently delivered. Thank you, Kyle.
{2022-01-29}
Such a nice comment.
{2022-03-14}
Wow, as a JS newbie I've found that Javascript is very functional 😲
I just started learning js , i learn today arrays methods.. , i don't understand how he made that search bar yet but i will come back later to see it again.
Alternatively, if you want to use a hyperlink or images from your data instead of just text, do:
const hyperlink = card.querySelector("[data-link]");
const imgSource = card.querySelector("[data-src]");
hyperlink.href = user.link;
imgSource.src =user.img;
omg thx!!!
@@matitos Happy to help
Basically only to know theres an search input type made the Video worth watching
Dude!! How are you always able to no just solve my problems, but show me how I can simplify my code??? Every time!! 😂👏🏾👏🏾💪🏾💪🏾💪🏾
u're amazing! u said can't know everything but u do and I'm always stunted by all the knowledge u got. I wish one day I get this ability with JS
Very useful and educative video. I want to thank you for your time and dedication. Good luck in everything man!
Really good tutorial, quick and right to the point, that's what we need in 2022! Thanks
Thanks So Much, All The Other People Just Showed Only CSS, and front end
Excellent video! Thank you so much!
The one thing you need to work on and what is it your playlist please organize your playlist when someone looking for a beginner to advanced JavaScript course your playlist is mashed up we all love your content and your design so consider this bro Love from Pakistan 🚀
This is the video I have looking for. Thank you.
One change I would make is to simply store a lowercase version of the name and email address when you store the user object. Rather than calling toLowerCase on name or email for all users on each and every single key pressed in the search bar.
We need more developers like u.
Hello Kyle, why are you using data attributes to select elements with querySelector and not the ids or classes that already exist on those elements?
It gives him more flexibility to add and repeat classes. I am not sure about ids but I don't think it's good practice to repeat ids since you usually create an ID to reference one element.
Ok but in this particular example he does card.querySelector(...) and not document.querySelector(...) so i don't think classes would be a problem if they are repeated elsewhere.
@@vigormilo168 card query selector is using document.query selector under the hood to reference the card template element. In this case he has a second query selector nested inside the card called data-header and data-body.
I will test this case and get back to you when I find some time. Thanks!
I believe he uses data attributes as a personal choice. My personal choice is to use an id, as it is implicit that there should be at most one element that matches the id. IMO, using data attributes or class names in an instance like this is not the best choice, because you're looking for exactly one element in the document (or card), but it is technically possible for the data attribute or class name to be assigned the multiple elements.
Love it. Very very simple and easy to understand. Thanks bro.
6:00 If you make the script a type=module, you can use top-level-await, so you don't have to use .then().
Depending on browser support you require. Safari for example only added it with the very latest version, v15.
U R LIKE THE BEST GUY IN THE WORLDDD DUDEEEEE AND WITH THE BESTTT HAIIRRRRR LOVE FROM INDIA
Thank you so much man!! i really appreciate your content, gold as always.
i love u and your Mind Blowing Programming Skills...!
You're the best. one day I would like to program with the ease with which you do it 🤩
Love your contents man
Damn dude... I did not know VS code had HTML shortcuts like that.... good stuff
Legend!!!
you always have ways of coding that blow my mind !! thanks so much for sharing this !!
Quick questions tho, why don't you ever use query selectors like id's or classes? You're always creating html data attributes.
There must be a reason behind it, and I'd love to know it.
Again, you're awesome. Thanks so much for your content !!
man thanks for this clip... more power!
Loved it! Thank you very much!
Love the first search 💜💜 Time to become a purple monster 😈
Amazing tutorial I will be adding this feature to my site
this is awesome contet!! earned a suscriber here!
You are the best, like always
That was a very well explained and very understandable example.
I love tour videos. (The only thing that ennoys me a little is that you never use a semi-colon)
Kyle, you’re so good
Following you from somalia ,Thank you
This is short but as a self learner I need to understand how to connect/call the data from different nest or function. I hope i can recall this after a week and after i finish another project tutorial.
You're a wizard.
i have never been more motivated to code. i just wished you would go abit slower because watching your videos are like a speedrun for me xD
I just spent 3 days trying to do this in react, this is so much simpler.
i love your videos man , thank you so much
Your tuts actually work and are easy as to follow. Do you have a course or something. where is the best place to learn code by you?
I have multiple courses at courses.webdevsimplified.com
Hi, Kyle! I can't tell enough how much this video saved my school project haha. Thanks a lot. You're awesome 😁
All I can say is thanks man.
Thanks Kyle, you're awesome 👌
Hi Kyle, thanks for the video.
Please make another video like this and show us how to use debouncing and throttling.
great tutor, excellent presentation.
Hi! Thanks for this amazing video. Even though it was simple, uncomplicated but informative.
Also with searching, I would add debounce. As this solution Kyle is proposing you would make an API call after every keypress. Debounce adds a delay, when you stop writing fire the event, and make API call.
This solution doesn't make an API call on every key press. The data is fetched once and mapped over into an array. It is the array which is then iterated over on every key press 👍
@@richardIambert Oh I see, good point
awesome content 👍
Very good❤
Hey Web Dev Simplified i am confused here , what are you writing after class and template
like " " and "
thanks and your videos are by far the best among coding channels
These are called data attributes. You can use them to store any information related to a particular element. Kyle put them there so he could select the elements later using querySelector (although I think using classes and IDs would have the same result).
@@fgsaldanha thanks it helped a lot 👍👍
Brilliant!
Thank you very much for these Videos there are very helpful
Been meaning to learn this
Very good work!! thanks!!
Any comparison between what way is better to use to populate elements on website?
With html template element VS entirely through JS, with template literals ?
From a performance standpoint, optimal performance standpoint, etc...
Thanks!
You are the best!
I just spent 14minutes and 27 seconds examining the alignment of his hair 😂😂
By the way great tutorial
I was a thinker when we were looking for something that shows the data programmed in PHP
omg tysm i was curious!
I literally just submitted my cs assignment like an hour before watching this video, this would have been so helpful lol.
Also what vscode add ons do you use? That autocomplete and auto format looks nice.
Nice la wei.
It would be great if you made a video about typescript. Thanks.
if you have only like 5 or 10 thing to serach throw an easy way to do it is to get the input from the bar check with .includes(//the contents of the bar) and check for every title of the element you are searhing if it is, now if one element has the contents in it , then do a main.innerHTML = main.innerHTML + `
+ use to lowercase and make sure your sorting method has all lowercase identifiers + unfortunantly if instead of typing fortnite you type fortnute it wont show (just like the tutorial but keep in mind small mistake in speling make a difference)
Man I appreciate you
Thank you! That video is really helpfull
The best 👍💯
Can you please do a filter buttons as well, thank you
Dang. ❤ I’m going to try this.
Great video - one question tho - instead of "textContent" I need to append a image url to img src="". How do I do that?
Did u figure that out?
setAttribute( 'src' , '*img url*')
Thank you🖤
Thank you very much!
I love this!
Fantastic content
omg this helped me so much, thank you!! a really well explained straight foreward video