soup-gen/cms.js

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

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

function populateContents(data) {
	data.recipes.forEach((recipe) => addRecipe(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);
	});
	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)];

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