design min and cms fix
parent
a96de97410
commit
aaf03f8910
@ -1,86 +1,84 @@
|
|||||||
const cookbook = document.getElementById("cookbook");
|
const cookbook = document.getElementById("cookbook");
|
||||||
|
const cookbookInfo = document.getElementById("cookbookInfo");
|
||||||
|
|
||||||
fetch("./cms.json")
|
fetch("./cms.json")
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response.json();
|
return response.json();
|
||||||
})
|
})
|
||||||
.then((data) => populateContents(data));
|
.then((data) => {
|
||||||
|
populateContents(data);
|
||||||
|
recipesInfo(data.recipes);
|
||||||
|
});
|
||||||
|
|
||||||
function populateContents(data) {
|
function populateContents(data) {
|
||||||
data.recipes.forEach((recipe) => addRecipe(recipe));
|
data.recipes.forEach((recipe) => addRecipe(recipe));
|
||||||
}
|
}
|
||||||
|
|
||||||
function addRecipe(recipe) {
|
function addRecipe(recipe) {
|
||||||
let card = document.createElement('div')
|
let card = document.createElement("div");
|
||||||
card.classList.add('recipe')
|
card.classList.add("recipe");
|
||||||
|
|
||||||
// INFO
|
// INFO
|
||||||
let info = document.createElement('div')
|
let info = document.createElement("div");
|
||||||
info.classList.add('info')
|
info.classList.add("info");
|
||||||
card.appendChild(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 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`;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,67 +1,68 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<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>
|
||||||
|
|
||||||
<head>
|
<body>
|
||||||
<meta charset="UTF-8">
|
<div class="intro">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<div class="description">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<h1>Soup Generator</h1>
|
||||||
<link rel="stylesheet" href="style.css">
|
each soup has:
|
||||||
<script src="cms.js" defer></script>
|
</div>
|
||||||
<title>🥣</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<div class="recipe">
|
||||||
|
<div class="info">
|
||||||
|
<h2 class="title">A. Title [string]</h2>
|
||||||
|
<div class="description">B. Description [string]</div>
|
||||||
|
<div class="chef">C. Chef [string]</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="intro">
|
<div class="ingredients">
|
||||||
<h1>Soup Generator</h1>
|
<h3>D. List of ingredients [array of strings]</h3>
|
||||||
each soup has:
|
<ul>
|
||||||
|
<li>First ingredient</li>
|
||||||
|
<li>Second ingredient</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="instructions">
|
||||||
|
<h3>E. List of instructions [array of strings]</h3>
|
||||||
|
<ol>
|
||||||
|
<li>First instruction</li>
|
||||||
|
<li>Second instruction</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
1. a title <br>
|
<div class="todo">
|
||||||
2. a list of ingredients <br>
|
<ul>
|
||||||
3. a list of instructions <br>
|
<em>TODO short term:</em>
|
||||||
4. a chef <br>
|
<li>💻 Receive recipe as a form ?</li>
|
||||||
5. an image ? TODO ? ahah <br>
|
<li>🔍 Ingredients list and filter!!! (like chat reader)</li>
|
||||||
<br>
|
<li>💬 Different types of entries for the cms: recipe, diary, ecc.</li>
|
||||||
so we haveee:
|
<li>📷 Add recipe picture ?</li>
|
||||||
<br>
|
<li>🎨 Design</li>
|
||||||
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">
|
<em>TODO long term:</em>
|
||||||
|
<li>💾 Better CMS (and not just a JSON file ah ah)</li>
|
||||||
|
<li>🦥 Recipes lazy loading :P</li>
|
||||||
|
<li>📔 Web to print design</li>
|
||||||
|
<li>📃 Soup pagination</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Ask to Michael: what is the best solution to add images??
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- structure of the recipes -->
|
<div class="cookbook">
|
||||||
|
<h2>Soup Gen Cookbook</h2>
|
||||||
<!-- <div class="recipe">
|
<div class="cookbook-info" id="cookbookInfo"></div>
|
||||||
<div class="info">
|
<div class="recipes" id="cookbook"></div>
|
||||||
<h2 class="title">Soup name</h2>
|
</div>
|
||||||
<div class="description">Incididunt Lorem magna cillum aliquip laborum nisi anim eu.</div>
|
</body>
|
||||||
<div class="chef">giraffa anonima</div>
|
</html>
|
||||||
</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>
|
|
||||||
|
|||||||
@ -1,26 +1,84 @@
|
|||||||
body{
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro {
|
.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 {
|
.cookbook {
|
||||||
display: flex;
|
margin: 16px;
|
||||||
flex-direction: row;
|
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 {
|
.recipe {
|
||||||
margin: 16px;
|
flex: 1;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 120ch;
|
background-color: #ffffff;
|
||||||
border: 1px solid currentColor;
|
width: 80ch;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 1ch;
|
padding: 1ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe .title {
|
.recipe .title {
|
||||||
margin: 0;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.recipe .info {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe .ingredients {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe ul,
|
||||||
|
.recipe ol {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro .recipe {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue