markvet123
New Coder
I'm a newbie into all this but I want to learn new things, and here's my problem. I want to create a search bar which would work like this:
When user types "Summer" into search bar, only tiles/cards that contains word Summer(there might be a case that couple of them will contain word summer if it matters) will pop up.
Also I'm curious if the script for this search bar have to be based on the words that are in the divs or if it's possible to add special value to the tile/card(like a class or smthg), because I'm not sure if I want to put any words in the tiles/cards(I'm planning to put photos inside them), but if it will be needed I will put words as well - hopefully you will understand what I mean.
I'm totally confused how to do it, I found some basic search bars but they were made on 'ul' attribute and my design is made on divs, I mean I don't need to use divs if there's easier way to do this search bar but I want to keep the design of these tiles/cards as it is. Hopefully my goal is clear, any help will be very much appreciated!
Here's my code: https://jsfiddle.net/8td4gaym/
When user types "Summer" into search bar, only tiles/cards that contains word Summer(there might be a case that couple of them will contain word summer if it matters) will pop up.
Also I'm curious if the script for this search bar have to be based on the words that are in the divs or if it's possible to add special value to the tile/card(like a class or smthg), because I'm not sure if I want to put any words in the tiles/cards(I'm planning to put photos inside them), but if it will be needed I will put words as well - hopefully you will understand what I mean.
I'm totally confused how to do it, I found some basic search bars but they were made on 'ul' attribute and my design is made on divs, I mean I don't need to use divs if there's easier way to do this search bar but I want to keep the design of these tiles/cards as it is. Hopefully my goal is clear, any help will be very much appreciated!
Here's my code: https://jsfiddle.net/8td4gaym/