<div class="app">
  <form>
    <input type="text" placeholder="Enter meal or food">
    <input type="submit" value="Search">
  </form>
  <button>Random</button>

  <div class="result"></div>
  <div class="meals"></div>
  <div class="meal"></div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  min-height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: helvetica;
  color: #222;
}

form {
  padding: 0.5em;
}

input[type="text"] {
  padding: 0.4em 0.6em;
  text-align: center;
  outline: none;
  border: none;
  border-radius: 3px;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6);
}

input[type="submit"],
button {
  padding: 0.4em 0.6em;
  border: none;
  border-radius: 3px;
  background: linear-gradient(lightgreen, darkgreen);
  cursor: pointer;
}

button {
  margin: 0 0.5em 0.5em;
}

h3 {
  margin: 1em 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px #ddd;
  user-select: none;
}

.meals {
  padding: 0 1em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  text-align: center;
}

@media (min-width: 1280px) {
  .meals {
    grid-template-columns: repeat(6, 1fr);
  }
}

img {
  width: 100%;
  border-radius: 6px;
}

figure {
  font-size: 0.9em;
  cursor: pointer;
  transition: 0.2s;
}

figure:hover {
  transform: scale(0.95);
}

.meal {
  padding: 1em;
}

.meal img {
  display: block;
  margin: auto;
  max-width: 480px;
}

p {
  margin: 1em;
  line-height: 1.5em;
}

p:last-of-type {
  text-indent: 1.5em;
  text-align: justify;
}

ul {
  list-style: none;
  text-align: center;
}

li {
  margin: 0.5em 0;
}
const form = document.querySelector("form");
const input = document.querySelector('input[type="text"]');
const button = document.querySelector("button");
const result = document.querySelector(".result");
const meals = document.querySelector(".meals");
const mealBox = document.querySelector(".meal");

function search(e) {
  e.preventDefault();

  mealBox.innerHTML = "";

  const text = input.value;

  if (text.trim()) {
    fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${text}`)
      .then((res) => res.json())
      .then((data) => {
        result.innerHTML = `<h3>${text}</h3>`;

        if (data.meals === null) {
          result.innerHTML = `<p>There's no such meal</p>`;
        } else {
          meals.innerHTML = data.meals
            .map(
              (meal) => `
                        <figure data-id="${meal.idMeal}">
                            <img src="${meal.strMealThumb}" alt="${meal.strMeal}"/>
                            <figcaption>${meal.strMeal}</figcaption>
                        </figure>
                    `
            )
            .join("");
        }
      });
    input.value = "";
  } else return;
}

function getMeal(id) {
  fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`)
    .then((res) => res.json())
    .then((data) => {
      const meal = data.meals[0];

      addMeal(meal);
    });
}

function getRandom() {
  meals.innerHTML = "";
  result.innerHTML = "";

  fetch(`https://www.themealdb.com/api/json/v1/1/random.php`)
    .then((res) => res.json())
    .then((data) => {
      const meal = data.meals[0];
      addMeal(meal);
    });
}

function addMeal(meal) {
  const ingredients = [];

  for (let i = 1; i <= 20; i++) {
    if (meal[`strIngredient${i}`]) {
      ingredients.push(
        `${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`
      );
    } else break;
  }

  mealBox.innerHTML = `
        <h3>${meal.strMeal}</h3>
        <img src="${meal.strMealThumb}" alt="${meal.strMeal}" />
        ${meal.strCategory ? `<p>${meal.strCategory}</p>` : ""}
        ${meal.strArea ? `<p>${meal.strArea}</p>` : ""}
        <p>${meal.strInstructions}</p>
        <h3>Ingredients</h3>
        <ul>
            ${ingredients.map((ing) => `<li>${ing}</li>`).join("")}
        </ul>
    `;
}

form.addEventListener("submit", search);
button.addEventListener("click", getRandom);

meals.addEventListener("click", (e) => {
  if (e.target.parentElement.dataset.id) {
    const id = +e.target.parentElement.dataset.id;

    getMeal(id);
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.