let queries = []

async function fetchCategories() {

  const response = await fetch('https://www.themealdb.com/api/json/v1/1/categories.php')
  const data = await response.json()

  categories = data.categories.map(category => (
    queries.push(category.strCategory)
  ))

  return queries
}

async function fetchFood(query) {
  const response = await fetch(`https://www.themealdb.com/api/json/v1/1/filter.php?c=${query}`)
  const data = await response.json()

  document.getElementById('root').innerHTML += `<h1>${query}</h1>`
  data.meals.map(meal => (
    document.getElementById("root").innerHTML += `${meal.strMeal}</br>`
  ))
}

fetchCategories()
  .then(result => {
    for (query of result) {
      fetchFood(query)
    }
  }
)