From 14e7119985c0af37fb137894f6fed0cb840553bc Mon Sep 17 00:00:00 2001 From: erica-garga Date: Tue, 19 Oct 2021 02:09:45 +0200 Subject: [PATCH] first commit zuppette --- cms.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ cms.json | 42 ++++++++++++++++++++++++++ index.html | 67 ++++++++++++++++++++++++++++++++++++++++++ style.css | 26 +++++++++++++++++ 4 files changed, 221 insertions(+) create mode 100644 cms.js create mode 100644 cms.json create mode 100644 index.html create mode 100644 style.css diff --git a/cms.js b/cms.js new file mode 100644 index 0000000..145ac4a --- /dev/null +++ b/cms.js @@ -0,0 +1,86 @@ +const cookbook = document.getElementById("cookbook"); + +fetch("./cms.json") + .then((response) => { + return response.json(); + }) + .then((data) => populateContents(data)); + + + +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') + + 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) +} + + + + + + + + + + + + diff --git a/cms.json b/cms.json new file mode 100644 index 0000000..6b5746d --- /dev/null +++ b/cms.json @@ -0,0 +1,42 @@ +{ + "recipes": [ + { + "title": "Pizza and fruit salad soup", + "description": "Minim laborum ipsum sunt minim nulla officia cillum quis labore ad voluptate enim deserunt nulla.", + "chef": "chef Malvozzo", + "ingredients": [ + "🍕", + "🥭", + "🍉", + "🍈" + ], + "instructions": [ + "Id est velit ullamco ea sint aliqua laboris incididunt consectetur do aliqua sint eiusmod.", + "Mescola", + "Pariatur eu exercitation ipsum qui e", + "Quis pariatur magna id pariatur consectetur irure in sint.", + "Culpa sunt non consequat consequat excepteur amet ut veniam cupidatat in occaecat consectetur velit.", + "servire ben caldo!" + ] + }, + { + "title": "Kip & Ice Kream Siup", + "description": "Id consequat deserunt laborum ea commodo sit voluptate sunt commodo excepteur sit incididunt amet.", + "chef": "Mad Moonfish", + "ingredients": [ + "🍗", + "🍚", + "funghetti", + "🍠", + "🥗" + ], + "instructions": [ + "Exercitation eiusmod adipisicing ex ut amet qui minim est anim reprehenderit nulla voluptate quis.", + "Occaecat anim veniam occaecat ut pariatur culpa sit reprehenderit ullamco cupidatat.", + "Et reprehenderit mollit cillum Lorem est.", + "Magna aliquip sint aliqua proident.", + "sluuuurp" + ] + } + ] +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..442855e --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + + + + + + + 🥣 + + + + +
+

Soup Generator

+ each soup has: + + 1. a title
+ 2. a list of ingredients
+ 3. a list of instructions
+ 4. a chef
+ 5. an image ? TODO ? ahah
+
+ so we have: +
+ 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?? +
+ +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a611652 --- /dev/null +++ b/style.css @@ -0,0 +1,26 @@ +body{ + margin: 0; +} + +.intro { + margin: 16px; +} + +.cookbook { + display: flex; + flex-direction: row; + +} + +.recipe { + margin: 16px; + display: inline-block; + width: 120ch; + border: 1px solid currentColor; + border-radius: 16px; + padding: 1ch; +} + +.recipe .title { + margin: 0; +} \ No newline at end of file