Instantly share code, notes, and snippets.

Embed
What would you like to do?
WEB APP RICETTARIO ( FETCH API + JAVASCRIPT + HTML5 - NO FRAMEWORKS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="pure-g">
<div class="pure-u-1-3">
<ul id="listaAree"></ul>
</div>
<div class="pure-u-2-3">
<ul id="listaRicette"></ul>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
let areeRicette = []
fetch("https://www.themealdb.com/api/json/v1/1/list.php?a=list")
.then(e => e.json())
//.then(aree => console.log(aree.meals))
.then(aree => {
let tmp = []
aree.meals.forEach(area => tmp.push(area))
tmp.forEach(area => areeRicette.push(area.strArea))
console.log(areeRicette)
const areeUl = document.getElementById("listaAree")
areeRicette.forEach(area => {
let areaLi = document.createElement("li")
areaLi.innerHTML = area
areaLi.setAttribute("area-name", area)
areaLi.onclick = event => {
console.log(area)
UpdateMealList(area)
}
areeUl.appendChild(areaLi)
})
})
.catch(err => console.error(err))
// https://www.themealdb.com/api/json/v1/1/filter.php?a=Canadian
const area = "Canadian"
function UpdateMealList(area = "Canadian") {
const URL_MEAL_BY_AREA = "https://www.themealdb.com/api/json/v1/1/filter.php?a=" + area
let ricetteUl = document.getElementById("listaRicette")
const gridElement = ricetteUl.parentNode
gridElement.removeChild(ricetteUl)
ricetteUl = document.createElement("ul")
ricetteUl.setAttribute("id", "listaRicette")
gridElement.appendChild(ricetteUl)
let mealsList = []
fetch(URL_MEAL_BY_AREA)
.then(e => e.json())
.then(e => e.meals)
.then(meals => {
meals.forEach(meal => {
mealsList.push(meal)
console.log(meal)
let mealDiv = document.createElement("div")
mealDiv.setAttribute("id", meal.idMeal)
let mealTitle = document.createElement("h4")
mealTitle.innerHTML = meal.strMeal
let mealThumb = document.createElement("img")
mealThumb.setAttribute("src", meal.strMealThumb)
mealThumb.setAttribute("width", "200")
mealDiv.appendChild(mealTitle)
mealDiv.appendChild(mealThumb)
ricetteUl.appendChild(mealDiv)
})
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment