grgr
/
soup-gen
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

design min and cms fix

Browse Source
master
km0 3 years ago
parent a96de97410
commit aaf03f8910
4 changed files with 194 additions and 137 deletions
Show Stats Download Patch File Download Diff File

122
cms.js
Unescape Escape View File

@ -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') let title = document.createElement("h2");
description.classList.add('description') title.classList.add("title");
description.innerHTML = recipe.description title.innerHTML = recipe.title; //si prende recipe come contenitore e ci butta dentro title
info.appendChild(description) info.appendChild(title); //aggiungi title alle info
let chef = document.createElement('div') let description = document.createElement("div");
chef.classList.add('chef') description.classList.add("description");
chef.innerHTML = recipe.chef description.innerHTML = recipe.description;
info.appendChild(chef) info.appendChild(description);
let chef = document.createElement("div");
chef.classList.add("chef");
chef.innerHTML = recipe.chef;
info.appendChild(chef);
// INGREDIENTS // INGREDIENTS
let ingredients = document.createElement('div') let ingredients = document.createElement("div");
ingredients.classList.add("ingredients");
let ingredientsTitle = document.createElement('h3')
ingredientsTitle.innerHTML = 'Ingredients' let ingredientsTitle = document.createElement("h3");
ingredients.appendChild(ingredientsTitle) ingredientsTitle.innerHTML = "Ingredients";
ingredients.appendChild(ingredientsTitle);
let ingredientsList = document.createElement('ul')
recipe.ingredients.forEach(item => { let ingredientsList = document.createElement("ul");
let ingredient = document.createElement('li') recipe.ingredients.forEach((item) => {
ingredient.innerHTML = item let ingredient = document.createElement("li");
ingredientsList.appendChild(ingredient) ingredient.innerHTML = item;
}) ingredientsList.appendChild(ingredient);
ingredients.appendChild(ingredientsList) });
card.appendChild(ingredients) ingredients.appendChild(ingredientsList);
card.appendChild(ingredients);
// INSTRUCTIONS // INSTRUCTIONS
let instructions = document.createElement('div') let instructions = document.createElement("div");
instructions.classList.add("instructions");
let instructionsTitle = document.createElement('h3')
instructionsTitle.innerHTML = 'Instructions' let instructionsTitle = document.createElement("h3");
instructions.appendChild(instructionsTitle) instructionsTitle.innerHTML = "Instructions";
instructions.appendChild(instructionsTitle);
let instructionsList = document.createElement('ol')
recipe.instructions.forEach(item => { let instructionsList = document.createElement("ol");
let instruction = document.createElement('li') recipe.instructions.forEach((item) => {
instruction.innerHTML = item let instruction = document.createElement("li");
instructionsList.appendChild(instruction) instruction.innerHTML = item;
}) instructionsList.appendChild(instruction);
instructions.appendChild(instructionsList) });
card.appendChild(instructions) instructions.appendChild(instructionsList);
card.appendChild(instructions);
cookbook.appendChild(card)
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`;
}

2
cms.json
Unescape Escape View File

@ -27,7 +27,7 @@
"🍗", "🍗",
"🍚", "🍚",
"funghetti", "funghetti",
"🍠", "🍉",
"🥗" "🥗"
], ],
"instructions": [ "instructions": [

69
index.html
Unescape Escape View File

@ -1,67 +1,68 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
<script src="cms.js" defer></script> <script src="cms.js" defer></script>
<title>🥣</title> <title>🥣</title>
</head> </head>
<body> <body>
<div class="intro"> <div class="intro">
<div class="description">
<h1>Soup Generator</h1> <h1>Soup Generator</h1>
each soup has: 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 haveee:
<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>
<div class="cookbook" id="cookbook"> <div class="recipe">
<!-- structure of the recipes -->
<!-- <div class="recipe">
<div class="info"> <div class="info">
<h2 class="title">Soup name</h2> <h2 class="title">A. Title [string]</h2>
<div class="description">Incididunt Lorem magna cillum aliquip laborum nisi anim eu.</div> <div class="description">B. Description [string]</div>
<div class="chef">giraffa anonima</div> <div class="chef">C. Chef [string]</div>
</div> </div>
<div class="ingredients"> <div class="ingredients">
<h3>Ingredients</h3> <h3>D. List of ingredients [array of strings]</h3>
<ul> <ul>
<li>First ingredient</li> <li>First ingredient</li>
<li>Second ingredient</li> <li>Second ingredient</li>
</ul> </ul>
</div> </div>
<div class="instructions"> <div class="instructions">
<h3>Instructions</h3> <h3>E. List of instructions [array of strings]</h3>
<ol> <ol>
<li>First instruction</li> <li>First instruction</li>
<li>Second instruction</li> <li>Second instruction</li>
</ol> </ol>
</div> </div>
</div> --> </div>
<div class="todo">
<ul>
<em>TODO short term:</em>
<li>💻 Receive recipe as a form ?</li>
<li>🔍 Ingredients list and filter!!! (like chat reader)</li>
<li>💬 Different types of entries for the cms: recipe, diary, ecc.</li>
<li>📷 Add recipe picture ?</li>
<li>🎨 Design</li>
<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> </div>
</body> Ask to Michael: what is the best solution to add images??
</div>
<div class="cookbook">
<h2>Soup Gen Cookbook</h2>
<div class="cookbook-info" id="cookbookInfo"></div>
<div class="recipes" id="cookbook"></div>
</div>
</body>
</html> </html>

64
style.css
Unescape Escape View File

@ -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 {
margin: 16px;
padding: 24px;
background-color: #cec;
border-radius: 16px;
}
.cookbook-info {
margin: 16px 0;
font-style: italic;
}
.recipes {
display: flex; display: flex;
flex-direction: row; 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-bottom: 8px;
}
.recipe .info {
margin: 16px 0;
}
.recipe .ingredients {
margin: 16px 0;
}
.recipe ul,
.recipe ol {
margin: 0; margin: 0;
} }
.intro .recipe {
margin: 16px 0;
}

Write Preview
Loading…
Cancel
Save