I would like to load the image which is selected in filter. I am not sure how to implement it in javascript. Should I use the attribute for checking if the selected value is matched with the image attributes? I am not sure how to refer to all the attributes of images. What I would like to achieve is that if selected value is equal to the image attributes, the page only show the selected images.
I saw some people use the event listener of DOMContentLoaded. can someone guide me to implement this?
Here is my html script.
<main>
<!-- filter bar -->
<div class="filter">
<label>Filter by Species:
<select class="species-filter" name="species-filter">
<option value="all">All</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="rabbit">Rabbit</option>
</select>
</label>
</div>
<!-- animal photos -->
<section class="adoption-grid">
<div class="animal-card" data-species="cat">
<img src="animal1.jpg" alt="cat">
<p class="caption">Bailey</p>
</div>
<div class="animal-card" data-species="rabbit">
<img src="animal2.jpg" alt="rabbit">
<p class="caption">Vince</p>
</div>
<!-- Add more animal cards as needed -->
<div class="animal-card" data-species="turtle">
<img src="animal3.jpg" alt="turtle">
<p class="caption">Fifty</p>
</div>
<div class="animal-card" data-species="cat">
<img src="animal4.jpg" alt="cat">
<p class="caption">Timothy</p>
</div>
<div class="animal-card" data-species="cat">
<img src="animal5.jpg" alt="cat">
<p class="caption">Matty</p>
</div>
<div class="animal-card" data-species="dog">
<img src="animal6.jpg" alt="dog">
<p class="caption">Bella</p>
</div>
<div class="animal-card" data-species="dog">
<img src="animal7.jpg" alt="dog">
<p class="caption">Nancy</p>
</div>
<div class="animal-card" data-species="dog">
<img src="animal8.jpg" alt="dog">
<p class="caption">Darlie</p>
</div>
<div class="animal-card" data-species="dog">
<img src="animal9.jpg" alt="dog">
<p class="caption">Windie</p>
</div>
<div class="animal-card" data-species="dog">
<img src="animal10.jpg" alt="dog">
<p class="caption">Puff</p>
</div>
<div class="animal-card" data-species="dog">
<img src="animal11.jpg" alt="dog">
<p class="caption">Jelly</p>
</div>
<div class="animal-card" data-species="dog">
<img src="animal12.jpg" alt="dog">
<p class="caption">Mila</p>
</div>
<div class="page-selector">
<button class="page-button active">1</button>
<button class="page-button">2</button>
<button class="page-button">3</button>
</div>
</section>
</main>