diff --git a/cms.js b/cms.js index 145ac4a..8d24c56 100644 --- a/cms.js +++ b/cms.js @@ -1,86 +1,84 @@ const cookbook = document.getElementById("cookbook"); +const cookbookInfo = document.getElementById("cookbookInfo"); fetch("./cms.json") .then((response) => { return response.json(); }) - .then((data) => populateContents(data)); - - + .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') + 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') - - 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') - - 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) -} - - - - - + 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`; +} diff --git a/cms.json b/cms.json index 6b5746d..d11c1b4 100644 --- a/cms.json +++ b/cms.json @@ -27,7 +27,7 @@ "🍗", "🍚", "funghetti", - "🍠", + "🍉", "🥗" ], "instructions": [ diff --git a/index.html b/index.html index ba2d166..56b24fe 100644 --- a/index.html +++ b/index.html @@ -1,67 +1,68 @@ + + + + + + + 🥣 + - - - - - - - 🥣 - + +
+
+

Soup Generator

+ each soup has: +
- +
+
+

A. Title [string]

+
B. Description [string]
+
C. Chef [string]
+
-
-

Soup Generator

- each soup has: +
+

D. List of ingredients [array of strings]

+
    +
  • First ingredient
    • +
  • Second ingredient
    • +
+
+
+

E. List of instructions [array of strings]

+
    +
  1. First instruction
    2. +
  2. Second instruction
    3. +
+
+
- 1. a title
- 2. a list of ingredients
- 3. a list of instructions
- 4. a chef
- 5. an image ? TODO ? ahah
-
- so we haveee: -
- name is a string - ingredients are an array of strings - recipe is an array of strings (first this, second this, third this, ecc) - and the chef (usually who upload the recipe) is a string again ? or maybe we can avoid this? idk is funny -
- ask to michael: what is the best solution to add images?? -
+
+ +
+ Ask to Michael: what is the best solution to add images?? +
- - - - - - - - - \ No newline at end of file +
+

Soup Gen Cookbook

+
+
+
+ + diff --git a/style.css b/style.css index a611652..bc7c15c 100644 --- a/style.css +++ b/style.css @@ -1,26 +1,84 @@ -body{ - margin: 0; +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 1.25rem; } .intro { - margin: 16px; + margin: 16px; } +.intro .recipe { + border: 1px solid currentColor; +} + +h1, +h2, +h3 { + margin: 0; +} + +ul, +ol { + padding: 0; + list-style-position: inside; +} + +em { + display: block; + margin: 1em 0; + font-weight: bold; +} + +/* COOCKBOOK */ + .cookbook { - display: flex; - flex-direction: row; + margin: 16px; + padding: 24px; + background-color: #cec; + border-radius: 16px; +} + +.cookbook-info { + margin: 16px 0; + font-style: italic; +} + +.recipes { + display: flex; + flex-direction: row; + flex-wrap: wrap; + row-gap: 16px; + column-gap: 16px; } .recipe { - margin: 16px; - display: inline-block; - width: 120ch; - border: 1px solid currentColor; - border-radius: 16px; - padding: 1ch; + flex: 1; + display: inline-block; + background-color: #ffffff; + width: 80ch; + border-radius: 16px; + padding: 1ch; } .recipe .title { - margin: 0; -} \ No newline at end of file + margin-bottom: 8px; +} + +.recipe .info { + margin: 16px 0; +} + +.recipe .ingredients { + margin: 16px 0; +} + +.recipe ul, +.recipe ol { + margin: 0; +} + +.intro .recipe { + margin: 16px 0; +}