first commit zuppette

master
erica-garga 3 years ago
commit 14e7119985

@ -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)
}

@ -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"
]
}
]
}

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="cms.js" defer></script>
<title>🥣</title>
</head>
<body>
<div class="intro">
<h1>Soup Generator</h1>
each soup has:
1. a title <br>
2. a list of ingredients <br>
3. a list of instructions <br>
4. a chef <br>
5. an image ? TODO ? ahah <br>
<br>
so we have:
<br>
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
<br>
ask to michael: what is the best solution to add images??
</div>
<div class="cookbook" id="cookbook">
<!-- structure of the recipes -->
<!-- <div class="recipe">
<div class="info">
<h2 class="title">Soup name</h2>
<div class="description">Incididunt Lorem magna cillum aliquip laborum nisi anim eu.</div>
<div class="chef">giraffa anonima</div>
</div>
<div class="ingredients">
<h3>Ingredients</h3>
<ul>
<li>First ingredient</li>
<li>Second ingredient</li>
</ul>
</div>
<div class="instructions">
<h3>Instructions</h3>
<ol>
<li>First instruction</li>
<li>Second instruction</li>
</ol>
</div>
</div> -->
</div>
</body>
</html>

@ -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;
}
Loading…
Cancel
Save