soup-gen/cms.js

const cookbook = document.getElementById("cookbook");
const cookbookInfo = document.getElementById("cookbookInfo");

const ingredientsContainer = document.getElementById("ingredients-container");
const activeAllButton = document.getElementById("active-all");

let selectedIngredients = new Set();
let ingredientsList = []; // list of unique ingredients
let tagList;
let recipesList;

fetch("./cms.json")
	.then((response) => {
		return response.json();
	})
	.then((data) => {
		populateContents(data);
		recipesInfo(data.recipes);
		ingredientsTag();
		showAllTags();
		showSelectedRecipes();
	});

function populateContents(data) {
	data.recipes.forEach((recipe) => addRecipe(recipe));
	recipesList = [...document.getElementsByClassName("recipe")];
}

function addRecipe(recipe) {
	let card = document.createElement("div");
	card.classList.add("recipe");

	// INFO
	let info = document.createElement("div");
	info.classList.add("info");
	card.appendChild(info);

	let title = document.createElement("h2");
	title.classList.add("title");
	title.innerHTML = recipe.title; //si prende recipe come contenitore e ci butta dentro title
	info.appendChild(title); //aggiungi title alle info

	let description = document.createElement("div");
	description.classList.add("description");
	description.innerHTML = recipe.description;
	info.appendChild(description);

	let chef = document.createElement("div");
	chef.classList.add("chef");
	chef.innerHTML = recipe.chef;
	info.appendChild(chef);

	// INGREDIENTS
	let ingredients = document.createElement("div");
	ingredients.classList.add("ingredients");

	let ingredientsTitle = document.createElement("h3");
	ingredientsTitle.innerHTML = "Ingredients";
	ingredients.appendChild(ingredientsTitle);

	let ingredientsList = document.createElement("ul");
	recipe.ingredients.forEach((item) => {
		let ingredient = document.createElement("li");
		ingredient.innerHTML = item;
		ingredientsList.appendChild(ingredient);
		item = item.replaceAll(" ", "-");
		card.classList.add(item);
	});
	ingredients.appendChild(ingredientsList);
	card.appendChild(ingredients);

	// INSTRUCTIONS
	let instructions = document.createElement("div");
	instructions.classList.add("instructions");

	let instructionsTitle = document.createElement("h3");
	instructionsTitle.innerHTML = "Instructions";
	instructions.appendChild(instructionsTitle);

	let instructionsList = document.createElement("ol");
	recipe.instructions.forEach((item) => {
		let instruction = document.createElement("li");
		instruction.innerHTML = item;
		instructionsList.appendChild(instruction);
	});
	instructions.appendChild(instructionsList);
	card.appendChild(instructions);

	cookbook.appendChild(card);
}

function recipesInfo(recipes) {
	let ingredients = [];
	recipes.forEach((recipe) => (ingredients = [...ingredients, ...recipe.ingredients]));
	let unique = [...new Set(ingredients)];
	ingredientsList = Array.from(unique);

	cookbookInfo.innerHTML = `There are ${recipes.length} recipes in the cookbook, with a total of ${unique.length} different ingredients`;
}

// Create tags from the ingredients list of the recipes
function ingredientsTag() {
	ingredientsList.forEach((ingredient) => {
		let tag = document.createElement("li");
		tag.classList.add("tag");
		tag.setAttribute("data-tag", ingredient);
		tag.setAttribute("tabindex", 0);
		tag.innerHTML = ingredient;
		ingredientsContainer.appendChild(tag);
	});
	tagList = document.querySelectorAll("[data-tag]");
}

let allActive = true;

function conditionalToggle(element) {
	if (allActive) {
		tagList.forEach((tag) => {
			selectedIngredients.delete(tag.getAttribute("data-tag"));
			tag.classList.remove("active");
			tag.setAttribute("aria-expanded", "false");
		});
		activeAllButton.classList.remove("active");
		allActive = false;
	}

	// conditional toggle ecc
	if (element.classList.contains("active")) {
		element.classList.remove("active");
		element.setAttribute("aria-expanded", "false");
		selectedIngredients.delete(element.getAttribute("data-tag"));
	} else {
		element.classList.add("active");
		element.setAttribute("aria-expanded", "true");
		selectedIngredients.add(element.getAttribute("data-tag"));
	}

	// final check

	allActive = tagList.length == selectedIngredients.size;

	if (allActive) {
		activeAllButton.classList.add("active");
		activeAllButton.setAttribute("aria-expanded", "true");
	}
}

function showAllTags() {
	tagList.forEach((tag) => {
		selectedIngredients.add(tag.getAttribute("data-tag"));
		tag.classList.add("active");
		tag.setAttribute("aria-expanded", "true");
	});
	allActive = true;
	showSelectedRecipes();
}

function showSelectedRecipes() {
	recipesList.forEach((recipe) => {
		recipe.classList.remove("active");
	});

	selectedIngredients.forEach((ingredient) => {
		//filter function
		let selectedRecipes = recipesList.filter((el) => {
			ingredient = ingredient.replaceAll(" ", "-");
			return el.classList.contains(ingredient);
		});
		selectedRecipes.forEach((recipe) => {
			recipe.classList.add("active");
		});
	});

	allActiveCheck();
}

function allActiveCheck() {
	if (tagList.length === selectedIngredients.size) {
		allActive = true;
		tagList.forEach((tag) => tag.classList.add("all"));
		// categoriesContainer.firstElementChild.classList.add("active");
	} else {
		allActive = false;
		tagList.forEach((tag) => tag.classList.remove("all"));
		// categoriesContainer.firstElementChild.classList.remove("active");
	}
}

// Event Listeners

ingredientsContainer.addEventListener("click", (e) => {
	//if click is on a tag/LIst element, then execute conditional toggle
	if (e.target.tagName === "LI") {
		conditionalToggle(e.target);
		showSelectedRecipes();
	}
});

activeAllButton.addEventListener("click", (e) => {
	activeAllButton.classList.add("active");
	activeAllButton.setAttribute("aria-expanded", "true");
	showAllTags();
});