// manually enumerate ingredients
function renderIngredients(meal) {
  let html = '<ul>';
  if (meal.strIngredient1 !== '') {
    html += `<li>${meal.strMeasure1}: ${meal.strIngredient1}</li>`;
  }
  if (meal.strIngredient2 !== '') {
    html += `<li>${meal.strMeasure2}: ${meal.strIngredient2}</li>`;
  }
  // write that ^^^ 18 more times...


  html += '</ul>';
  return html;
}

// fancy way render out ingredients
function renderIngredients(meal) {
  // we know there are 20 ingredient fields, so
  const list = Array(20).fill().map((_, i) => {
    if (meal[`strIngredient${i + 1}`] !== '') {
      return `<li>${meal['strMeasure' + (i + 1)]}: ${meal['strIngredient' + (i + 1)]}</li>`;
    }
  }).filter(x => x !== undefined).join('');
  return `<ul>${list}</ul>`;
}