WELLCOME BACK
H
ello guys. How are you all? I hope you are all well. I came again with a post. Let’s go..
তো এই পোস্টে শেয়ার করবো Filterable Image Gallery। Bootstrap ব্যবহার করা আছে এতে
তো চলুন শুরু করা যাক।
Live Demo
All Codes
index.html
Filterable Image Gallery Bootstrap
[email protected]/dist/css/bootstrap.min.css">
/* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); * { font-family: "Poppins", sans-serif; } body { background: #f1f1f1 !important; } body .container { max-width: 1100px; } #filter-buttons button { border-radius: 3px; background: #fff; border-color: transparent; } #filter-buttons button:hover { background: #ddd; } #filter-buttons button.active { color: #fff; background: #6c757d; } #filterable-cards .card { width: 15rem; border: 2px solid transparent; } #filterable-cards .card.hide { display: none; } @media (max-width: 600px) { #filterable-cards { justify-content: center; } #filterable-cards .card { width: calc(100% / 2 - 10px); } }
// Select relevant HTML elements
const filterButtons = document.querySelectorAll("#filter-buttons button");
const filterableCards = document.querySelectorAll("#filterable-cards .card");
// Function to filter cards based on filter buttons
const filterCards = (e) => {
document.querySelector("#filter-buttons .active").classList.remove("active");
e.target.classList.add("active");
filterableCards.forEach(card => {
// show the card if it matches the clicked filter or show all cards if "all" filter is clicked
if(card.dataset.name === e.target.dataset.filter || e.target.dataset.filter === "all") {
return card.classList.replace("hide", "show");
}
card.classList.add("hide");
});
}
filterButtons.forEach(button => button.addEventListener("click", filterCards));
THE END
S
o friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.
