I have a question about showing multiple categories on the page by clicking multiple buttons. Codepen:
https://codepen.io/alena-chuyankova/pen/YzmWYKZ
- By default all pages are active;
- When I click and unclick certain buttons the cards with the same categories should apper and hide (works for one category so far);
- When I have multiple buttons it should show and hide cards with according categories. Like if the user wants to see product with Salmon and Shrimp cards that contain Salmon and Shrimp should be shown. Like if some button is active to show everything that contains the button inner text if that makes sense.
Thank you so much!
let products = {
data: [
{
productName: "Fantasy",
heart: "./icons/heart.svg",
heartCount: 2547,
category: "Salmon, Shrimp",
content:
"Lorem ipsum dolor sit amet, eu mei posse possim atomorum, vix cu fabellas assueverit. Vel ad option partiendo maiestatis, nec affert appetere te, his.",
picture: "./images/pexels-diego-pontes-901015-2323391.jpg",
},
{
productName: "Spring",
heart: "./icons/heart.svg",
heartCount: 2547,
category: "Veggie",
content:
"Lorem ipsum dolor sit amet, eu mei posse possim atomorum, vix cu fabellas assueverit. Vel ad option partiendo maiestatis, nec affert appetere te, his.",
picture: "./images/pexels-pixabay-357756.jpg",
},
{
productName: "Rainbow",
heart: "./icons/heart.svg",
heartCount: 2547,
category: "Salmon, Tuna, Unagi",
content:
"Lorem ipsum dolor sit amet, eu mei posse possim atomorum, vix cu fabellas assueverit. Vel ad option partiendo maiestatis, nec affert appetere te, his.",
picture: "./images/pexels-freestockpro-3147493.jpg",
},
{
productName: "Unique",
heart: "./icons/heart.svg",
heartCount: 2547,
category: "Salmon, Tuna, Unagi, Shrimp",
content:
"Lorem ipsum dolor sit amet, eu mei posse possim atomorum, vix cu fabellas assueverit. Vel ad option partiendo maiestatis, nec affert appetere te, his.",
picture: "./images/pexels-photo-248444.webp",
},
{
productName: "Perfection",
heart: "./icons/heart.svg",
heartCount: 2547,
category: "Salmon",
content:
"Lorem ipsum dolor sit amet, eu mei posse possim atomorum, vix cu fabellas assueverit. Vel ad option partiendo maiestatis, nec affert appetere te, his.",
picture: "./images/pexels-isabella-mendes-107313-858501.jpg",
},
{
productName: "Style",
heart: "./icons/heart.svg",
heartCount: 2547,
category: "Salmon, Tuna, Unagi, Shrimp",
content:
"Lorem ipsum dolor sit amet, eu mei posse possim atomorum, vix cu fabellas assueverit. Vel ad option partiendo maiestatis, nec affert appetere te, his.",
picture: "./images/pexels-rajesh-tp-749235-2098143.jpg",
},
{
productName: "Dreamy",
heart: "./icons/heart.svg",
heartCount: 2547,
category: "Salmon",
content:
"Lorem ipsum dolor sit amet, eu mei posse possim atomorum, vix cu fabellas assueverit. Vel ad option partiendo maiestatis, nec affert appetere te, his.",
picture: "./images/pexels-viniciusbenedit-3620705.jpg",
},
{
productName: "Spicy",
heart: "./icons/heart.svg",
heartCount: 2547,
category: "Shrimp",
content:
"Lorem ipsum dolor sit amet, eu mei posse possim atomorum, vix cu fabellas assueverit. Vel ad option partiendo maiestatis, nec affert appetere te, his.",
picture: "./images/pexels-catscoming-699544.jpg",
},
],
};
for (let i of products.data) {
let card = document.createElement("div");
card.classList.add("card", "i.category");
//image
let imgContainer = document.createElement("div");
imgContainer.classList.add("image-container");
let image = document.createElement("img");
image.classList.add("product-img");
image.setAttribute("src", i.picture);
imgContainer.appendChild(image);
card.appendChild(imgContainer);
document.getElementById("products").appendChild(card);
card.setAttribute("title", i.category);
image.addEventListener("error", () => {
image.style.display = "none"; // Hide the broken image
image.parentNode.style.backgroundColor = "#d9d9d9"; // Set background color
});
//content
let content = document.createElement("div");
content.classList.add("content");
card.appendChild(content);
//content title and likes section
let contentHead = document.createElement("div");
contentHead.classList.add("contentHead");
let productTitle = document.createElement("h2");
productTitle.classList.add("productTitle");
productTitle.innerText = i.productName;
let likesSection = document.createElement("div");
likesSection.classList.add("likesSection");
let likesIcon = document.createElement("img");
likesIcon.setAttribute("src", "./icons/heart.svg");
likesIcon.classList.add("likesIcon");
let likesCount = document.createElement("p");
likesCount.classList.add("likeCount");
likesCount.innerText = i.heartCount;
content.appendChild(contentHead);
contentHead.appendChild(productTitle);
contentHead.appendChild(likesSection);
likesSection.appendChild(likesIcon);
likesSection.appendChild(likesCount);
likesIcon.addEventListener("error", () => {
likesIcon.setAttribute(
"src",
"https://upload.wikimedia.org/wikipedia/commons/f/f1/Heart_coraz%C3%B3n.svg"
);
});
//gray line devider
let line = document.createElement("hr");
line.classList.add("product-line");
content.appendChild(line);
//item category
let itemCategory = document.createElement("p");
itemCategory.classList.add("item-category");
itemCategory.innerText = i.category;
content.appendChild(itemCategory);
//description
let itemDescription = document.createElement("p");
itemDescription.classList.add("itemDescription");
itemDescription.innerText = i.content;
content.appendChild(itemDescription);
//read more
let readMore = document.createElement("p");
readMore.classList.add("readMore");
readMore.innerText = "Read more >>>";
content.appendChild(readMore);
}
let buttons = document.querySelectorAll(".category-button");
let cards = document.querySelectorAll(".card");
let buttonArr = [];
let buttonsString;
buttons.forEach((button) => {
button.addEventListener("click", () => {
let buttonValue = button.innerText;
button.classList.toggle("active-button");
if (button.classList.contains("active-button")) {
buttonArr.push(buttonValue);
}
if (button.classList.contains("active-button") == false) {
let unwantedButtonValue = buttonValue;
let index = buttonArr.indexOf(unwantedButtonValue);
buttonArr.splice(index, 1);
}
buttonArr.sort();
buttonsString = buttonArr.toString();
console.log(buttonsString);
});
buttons.forEach((button) => {
button.addEventListener("click", () => {
cards.forEach((card) => {
let cardCategories;
cardCategories = card
.getAttribute("title")
.split(",")
.map(function (value) {
return value.trim();
})
.sort()
.toString();
console.log(cardCategories);
if (cardCategories.includes(buttonsString) == false) {
card.classList.add("inactive-card");
}
if (cardCategories.includes(buttonsString)) {
card.classList.remove("inactive-card");
}
});
});
});
});