You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.0 KiB
JavaScript
87 lines
2.0 KiB
JavaScript
3 years ago
|
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)
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|