You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.5 KiB
JavaScript
85 lines
2.5 KiB
JavaScript
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`;
|
|
}
|