document.addEventListener("DOMContentLoaded", function() {
const buttons = document.querySelectorAll(".filter-btn");
const galleryItems = document.querySelectorAll(".gallery-strips-item");
// Check if elements are selected
console.log("Buttons:", buttons);
console.log("Gallery Items:", galleryItems);
if (buttons.length === 0 || galleryItems.length === 0) {
console.warn("Filter buttons or gallery items are not found. Please check the HTML structure.");
return; // Prevent further execution if elements are not found
}
function getDescriptionTag(item) {
const img = item.querySelector("img");
return img ? img.getAttribute("alt")?.toLowerCase() : ""; // Get alt text and convert to lowercase
}
buttons.forEach(button => {
button.addEventListener("click", () => {
const filter = button.dataset.filter.toLowerCase();
console.log(`Filtering by: ${filter}`); // Log the filter to check if the button click is registered
galleryItems.forEach(item => {
const description = getDescriptionTag(item); // Get the alt text of the image
// Show item if it matches the filter, or if the filter is "all"
if (filter === "all" || description.includes(filter)) {
item.style.display = ""; // Show item
} else {
item.style.display = "none"; // Hide item
}
});
});
});
});
