How to filter image gallery by tags using Javascript?

user_12834927 0
Viewed 482

I've been struggling to understand how to overcome this problem. I've been tasked to retrieve user input, and on keystroke see if user input matches any amount of .tags If not, hide the .thumb-display.

So far, I've been able to gather that I'll need to add/remove the classlist "hidden" as well use the event handler "input", however I don't quite understand how to use event handler "input" in this context as well as change event.

This is for homework so I'd much rather have an explanation for an answer, rather than just an answer so I can understand what I currently can't. Even a hint could be vital and set me on the right track! Rules are: no changing HTML and must use JavaScript.

Here is the HTML:

        <form class="frm-filter">
            <div class="frm-group">
                <a class="reset hidden" href="#">Reset</a>
                <input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
            </div>
        </form>
    </nav>
    <section class="gallery">
        <div class="row">
            <h1>Gallery</h1>
        </div>
        <div class="row">
            <div class="thumb-display">
                <img src="img/thumbs/african_road_to_the_mountain.jpg" alt="african road to the mountain" />
                <p class="tags">#africa #mountain #road</p>
            </div>
            <div class="thumb-display">
                <img src="img/thumbs/beach_and_palms.jpg" alt="beach and palms" />
                <p class="tags">#palmbeach #distantpeaks</p>
            </div>
            <div class="thumb-display">
                <img src="img/thumbs/beach_road.jpg" alt="beach road" />
                <p class="tags">#oceanbeach #mountainroad</p>
            </div>
            <div class="thumb-display">
                <img src="img/thumbs/calm_lake.jpg" alt="calm lake" />
                <p class="tags">#lake #clearskies #onthewater</p>
            </div>
            <div class="thumb-display">
                <img src="img/thumbs/fall_bridge.jpg" alt="fall bridge" />
                <p class="tags">#fallcolors #bridgecrossing #river</p>
            </div>
        </div>
    </section>
gallery filter search html javascript
2 Answers

You need to get user input. So you need to listen for an event. Add Event Listener to the rescue. Which event, though? How about "change".

Ok, so you can get what they typed, good. Now you need to compare it to the tags. So it's time to find all of those. You can get all of the ".tags" with a querySelector. That will get you a list of nodes that you can loop through to collect the innerText. You can check if the innerText includes the input that the user typed. If it doesn't, then you find the closest ".thumb-display" and set a style attribute to hide it. If the input IS in the innerText, then you need to remove any style attribute that is hiding the closest parent.

Boom, done. Maybe, I didn't try it an I almost never get it right the first time. But it would be something along those lines.

user_32340

You need to listen on input keyup event and retrieve value from input then check if that value matches any tags and show/hide `parentNode

document.addEventListener('DOMContentLoaded', () => {
    const inputEl = document.getElementById('filter');
    const tags = Array.from(document.querySelectorAll('.tags'));

    inputEl.addEventListener('keyup', () => {
        const value = inputEl.value;

        tags.forEach(tag => {
            if (tag.textContent.includes(value)) {
                tag.parentNode.style.display = 'block'
            } else {
                tag.parentNode.style.display = 'none'
            }
        })
    })
})
<form class="frm-filter">
    <div class="frm-group">
        <a class="reset hidden" href="#">Reset</a>
        <input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
    </div>
</form>
<section class="gallery">
    <div class="row">
        <h1>Gallery</h1>
    </div>
    <div class="row">
        <div class="thumb-display">
            <img src="img/thumbs/african_road_to_the_mountain.jpg" alt="african road to the mountain" />
            <p class="tags">#africa #mountain #road</p>
        </div>
        <div class="thumb-display">
            <img src="img/thumbs/beach_and_palms.jpg" alt="beach and palms" />
            <p class="tags">#palmbeach #distantpeaks</p>
        </div>
        <div class="thumb-display">
            <img src="img/thumbs/beach_road.jpg" alt="beach road" />
            <p class="tags">#oceanbeach #mountainroad</p>
        </div>
        <div class="thumb-display">
            <img src="img/thumbs/calm_lake.jpg" alt="calm lake" />
            <p class="tags">#lake #clearskies #onthewater</p>
        </div>
        <div class="thumb-display">
            <img src="img/thumbs/fall_bridge.jpg" alt="fall bridge" />
            <p class="tags">#fallcolors #bridgecrossing #river</p>
        </div>
    </div>
</section>

user_77988410
Related