first commit zuppette
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…
Reference in New Issue