omg thank you so much! This was exactly what I was looking for. No need for bloated frameworks, overly-complicated dependencies with npm etc. And the code is super beautiful too.
you just saved me from failing a class!! This was legit my whole semester work and i struggled so hard with the fecthing of the data from a json file (not even the searchbar but that helped too!) Thanks man for not just showing the searchbar but also the full process!!
Bless up! 🙏 been struggling with a search function for two weeks and this just made it so simple and you were great at explaining it - not just running through everything super fast and confusing!
Thank you, this was very instructive! I am also wondering how I could use checkbox filters on top of the search filter. For instance limit the search to just members of the Slytherin house by having and checking a Slytherin checkbox.
Thank you so much for this video! I am glad to hear that I don't need to learn a new Javascript framework for a simple search UI... It's sad that this basic stuff is so hard to find.
Hello, I was wondering if it is possible to also search by Number? I am doing the Pokedex you did and am implementing this Search Bar, however I can't seem to search for the IDs and Names because of the .Lowercase()
Thank you very much James! I am having a workshop at my school, and I was wondering if you could help on how to change the json file of harry potter characters to another json file and make the searching work, I am trying but without success!! Great video by the way!
James, i have a question, how can i do that search bar but using rick and morty api? i´m trying to do, but i have an error: array.filter is not a function :C . you are amazing!!. nice video
Dude I cannot believe you would do something like this this is unbelievable I’m so proud of that guys like you are so smart and can figure out that this would help us out so much I am trying to start my own start up company but I can help with searching things up for my program and I’m very new so it’s not easy thank you so
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life. ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Sorry if it's a lame question, but how to set up the api? Actually it's for my project, where I am trying to set up a search bar functionality where the search will filter results according to the "tags" present on each card. Each card may have multiple tags. Many thanks for the tutorial! Much appreciated.
Hey thank you so much for replying!! I did figure it out in the end, I simply added the tags as multiple class names to the cards and then filtered the results with js.
hey james thank you for the tutorial i'm just want to ask you i want to change the names and when it clicked on one of them it will take to another page can you help me pls ??
Hi, May I know how to change the harry potter characters into other characters from other movies? Like changing the harry potter characters into avengers characters
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life. ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Hi James, great tutorial. I am fairly new to JS and have a quick question about how you use the map method() to fill the string literals. Can I generate the outcome of another function inside a string literal? For example a list I generated somewhere else? Thanks! Michiel from Sweden
if your trying to sort the names in alphabetical order and the element for the name is formatted in full, this is what you want: data.sort((a, b) => { let splitNameA = a.name.split(" "); let splitNameB = b.name.split(" "); let lastNameA = splitNameA[splitNameA.length - 1]; let lastNameB = splitNameB[splitNameB.length - 1]; if(lastNameA < lastNameB){ return -1; }else if(lastNameA > lastNameB){ return 1; }else{ return 0; } });
Great tutorial pal! I have a question though. When I replicated this whenever I type a string that is NOT contained in ANY of the object´s keys, the page shows the last matches of the search (HP Characters in your example) instead of no matches at all. Any idea how to fix this? Thank you for the great video
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life. ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Amazing code ♥ I love it, I would like to edit the json, do you know if it is possible? I see there are some characters that do not have a photo. I would like to add one. Could it be possible? Thanks
I love this video. Please could u design a page like this with pagination. I was thinking one could use this in a more fashion way to replace small responsive tables, e.g. user management system.
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life. ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life. ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Sir, nice video. I'm beginner can you tell me please what's code or how to write api characters. I don't know which Language you use. Html, css, or javascript. How to write like you api characters
Any idea how could i implement BACKSPACE? if i type too many letters and press backspace to erase wrong ones it shows that? because it is missing feature for me :) other than that very nice tutorial :)
hi, thank you for this wonderful tutorial, I will try this. Question, how do you make the character clickable to its single page with their info? thank you
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life. ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
this was great tutorial, i wonder if you colud help me, i got it to work but i would like it to let me look whit 2 words. i mean, what if instead of looking for "HARRY", i want to look for "HARRY POTTER" to give you some context: what if i wanted to look in an ecommerce for "white fridge" i ask this because even when i got it to work whenever i put the "space" or (" ") it doesnt return any object. i am not an english native speaking so i hope you understand thanks
you could set the ul style to display none and check every time user presses a key see if the input text value is bigger or equal to 1 make the ul display block and else have ul display none.
omg thank you so much! This was exactly what I was looking for. No need for bloated frameworks, overly-complicated dependencies with npm etc. And the code is super beautiful too.
Everything can be done with vanilla, and more robustly, too.
One of the best tutorials I’ve ever come across. Super easy to understand, and the code looks super tidy.
Ahhh so good to hear that!
you just saved me from failing a class!! This was legit my whole semester work and i struggled so hard with the fecthing of the data from a json file (not even the searchbar but that helped too!)
Thanks man for not just showing the searchbar but also the full process!!
awesome. I was struggling to do this thing in react / next, took some time and worked !!
Great! Now I can create an offline search with filtering. Good enough for working on a project without a database!
Bless up! 🙏 been struggling with a search function for two weeks and this just made it so simple and you were great at explaining it - not just running through everything super fast and confusing!
YASSSSSSS!!!
I like this one more then Kyle's from WebDevSimplifeid, no offense to Kyle though! You're both legends, thank you both!
bahaha I'll make sure to let him know!
easily one of the best tutorial videos Ive seen, everything simplified and explained clearly and well. !!! just subscribed
Thank you, this was very instructive! I am also wondering how I could use checkbox filters on top of the search filter. For instance limit the search to just members of the Slytherin house by having and checking a Slytherin checkbox.
Thank you so much brother 🙏
Thank you! I was really struggling with this functionality and other tutorials didn't really help
You're the best teacher in UA-cam, thanks so much
Ahhh thank you!!!
Great Tutorial James!!! looking forward to implementing this to the next app I'm developing... Thank you soooo much :)))
Thank you :)
works wonders, and had much fun plugging this into my backend database. thanks alot!
Great video, very clean and easy to undestand code. Great Job!!!
Thank you ;)
Thank you so much for this video! I am glad to hear that I don't need to learn a new Javascript framework for a simple search UI... It's sad that this basic stuff is so hard to find.
Hello, I was wondering if it is possible to also search by Number? I am doing the Pokedex you did and am implementing this Search Bar, however I can't seem to search for the IDs and Names because of the .Lowercase()
You could certainly query by number if you want. Maybe you could have two different inputs, one being a number?
@@JamesQQuick Thanks. Rather than doing pokeman.id.includes(), I did pokeman.id == searchTarget
Thank you very much James! I am having a workshop at my school, and I was wondering if you could help on how to change the json file of harry potter characters to another json file and make the searching work, I am trying but without success!! Great video by the way!
@@i-am-oi how did you change the Json file?
i had to just grab the input value using querySelector and it worked. Great video!! Simple to understand. Thank you!
Awesome. Glad you got if!
James, i have a question, how can i do that search bar but using rick and morty api? i´m trying to do, but i have an error: array.filter is not a function :C . you are amazing!!. nice video
This is exactly what i needed for my project for this week hahha! seriously thank you so much !!!!!!! :)
Thanks so much for explaining it so clearly :D
Cheers, leveraged this tutorial to make a simple app using WordPress and the rest API
Dude I cannot believe you would do something like this this is unbelievable I’m so proud of that guys like you are so smart and can figure out that this would help us out so much I am trying to start my own start up company but I can help with searching things up for my program and I’m very new so it’s not easy thank you so
Great tutorial!
Wonderful tutorial, subscribed!
Hi James, would you mind sharing how can we use multiple words in a search to filter out, say for example: Diggory Snape? Thanks for great video.
wow! thx u so much :) the best tutorial video on UA-cam Ive seen!!!
Thanks for this video man! Greetings from Brazil!
Great tutorial, very well explained!
Thanks very much for this tutorial. I have learned a lot from this tutorial. Thanks
Glad to hear it!
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.
ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
thx for your video ! question : i have 2 search bar 1 for desktop view and another for tab view how to impliment in both
?
This was great! Quick question, how would add functionality if you inserted a 'space' in your search query? Ie. search full name: Harry Potter
Sorry if it's a lame question, but how to set up the api? Actually it's for my project, where I am trying to set up a search bar functionality where the search will filter results according to the "tags" present on each card. Each card may have multiple tags. Many thanks for the tutorial! Much appreciated.
Did you ever figure it out if not i can let you know
Hey thank you so much for replying!!
I did figure it out in the end, I simply added the tags as multiple class names to the cards and then filtered the results with js.
I like your sense of humour. Nice tutorial man!
Haha thanks
this tutorial is so good.
YAY!!
how can you make sure that for example if there where 2 harry potters but you needed only 1 it doesn't show doubles?
Really enjoyed it!!
hey james thank you for the tutorial i'm just want to ask you i want to change the names and when it clicked on one of them it will take to another page can you help me pls ??
How would you access it if it was wrapped in an object? For example { - char:[the api]}.
Hi, May I know how to change the harry potter characters into other characters from other movies? Like changing the harry potter characters into avengers characters
loved it a lot, would like to know how it can search through html or pictures that I have in an array or by event that i have i as cards
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.
ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Interesting, it looks like you are a little old school comparing to the " Web Dev Simplified", but anyway, it is a great guide.
Hi James, great tutorial. I am fairly new to JS and have a quick question about how you use the map method() to fill the string literals. Can I generate the outcome of another function inside a string literal? For example a list I generated somewhere else? Thanks! Michiel from Sweden
why am I getting empty array when trying to console.log(hpCharacters) outside the async function
Hard to tell without code. I have a Discord where you can ask questions and share code. learnbuildteach.com/
tks alot for this helpful tutorial.
Awesome video 👍
Hi James, Nice video. Im wondering if it is possible to list the characters in alphabetical order? If so how would you do it?
if your trying to sort the names in alphabetical order and the element for the name is formatted in full, this is what you want:
data.sort((a, b) => {
let splitNameA = a.name.split(" ");
let splitNameB = b.name.split(" ");
let lastNameA = splitNameA[splitNameA.length - 1];
let lastNameB = splitNameB[splitNameB.length - 1];
if(lastNameA < lastNameB){
return -1;
}else if(lastNameA > lastNameB){
return 1;
}else{
return 0;
}
});
I want to know that how to create data in this link on herokuapp. hp-api.herokuapp.com/api/characters
nice man gracias otra vez!
harry potter functions in javascript! love it!
Is there a way to have the unfiltered list hidden, then shown once it starts filtering? That’s what I’m looking for but can’t find a solution anywhere
Thank you!
This was amazing! It worked like a charm. Thank you so much!!!
can i ask you pls i want to change the names so how i can do that ?
What font are you using, Master? 😍
Thanks for teaching!
Thanks a lot I hope i'll get my internship with this searchBar. I've learned a lot
Yayyyyy
how do i dynamically refresh my html with the final filtered array, iam dsplaying my index from database pls help
thank you so much this video is very good
Great tutorial pal! I have a question though. When I replicated this whenever I type a string that is NOT contained in ANY of the object´s keys, the page shows the last matches of the search (HP Characters in your example) instead of no matches at all. Any idea how to fix this?
Thank you for the great video
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.
ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Thank you very much
Amazing code ♥ I love it, I would like to edit the json, do you know if it is possible? I see there are some characters that do not have a photo. I would like to add one. Could it be possible? Thanks
Excellent, thanks a lot!!
Sr. Thank you!
How can I search with a button onclick instead of the onchange from the input?
Thank you
thank you very much, it was very helpful
thanks for the tutorial, its very helpful
Glad to hear it!
I love this video. Please could u design a page like this with pagination. I was thinking one could use this in a more fashion way to replace small responsive tables, e.g. user management system.
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.
ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Thanks James! Any idea how to display the number of found results?
innerHTML of = array.length ...
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.
ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
it says "failed to fetch".. how to solve it please?
Character.map() doesn't work for me. It display map() is not function. How resolve problem ?
Sir, nice video. I'm beginner can you tell me please what's code or how to write api characters. I don't know which Language you use. Html, css, or javascript. How to write like you api characters
hello bro, can this javascript be used for any website or only for this one,
thanks you so much!!! this very useful to me hope u release more video like this
Great video thanks!
I Need A Help!!!
Please Tell Me How To Make Our Own API of Our Database Like Harry Potter API...
ty so much. You are a Star!
Thanks you so much for this video!
You’re very welcome!
Very good sir I like it
saved my fucking life thanks
wouldnt it would be more logical if search checked from first letter moving forward and not if letter exist anywhere in the name?
Thanks a lot!
THANKYOU
Any idea how could i implement BACKSPACE? if i type too many letters and press backspace to erase wrong ones it shows that? because it is missing feature for me :) other than that very nice tutorial :)
hi, thank you for this wonderful tutorial, I will try this. Question, how do you make the character clickable to its single page with their info? thank you
probably I'll get all elements by class name and addEventListenert to that array.
My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life.
ua-cam.com/play/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-.html
Thanks for tutorial.
You’re very welcome!
Thank you ☺️
but how do I make these work on a page I have done?
Really helpful thx
thanks you so much !!!!
Hey,does anyone know how to fetch data from mongodb in client side instead of using a url in fetch?
how to build a json database and create the URL and connect it to the fetch data?
Look up creative a node server
this was great tutorial, i wonder if you colud help me, i got it to work but i would like it to let me look whit 2 words. i mean, what if instead of looking for "HARRY", i want to look for "HARRY POTTER" to give you some context: what if i wanted to look in an ecommerce for "white fridge"
i ask this because even when i got it to work whenever i put the "space" or (" ") it doesnt return any object. i am not an english native speaking so i hope you understand thanks
Very nice !
The man! Thanks!
Does not working. it shows error - 'hpCharacters.filter is not a function'
I thought this was dope man. I'm going to build this using the same API cuz in also an HP nerd.
Haha yes. Love it!
hello James, please is there a way to keep the characters from showing and only appear when you search for it , please help
thanks
you could set the ul style to display none and check every time user presses a key see if the input text value is bigger or equal to 1 make the ul display block and else have ul display none.
thank you so much..,