Meal Finder (2) - Show Single Meal Page

이 포스트는 udemy.com 20 Web Projects With Vanilla JavaScript 강의를 보고 정리한 내용입니다.

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

20 Web Projects With Vanilla JavaScript

 

 

 

 

 

만드려는 것: 

원하는 음식을 클릭했을 때

화면에 원하는 음식 사진과 함께

요리법, 재료들이 나오게.

 

 

 

 

API를 통해 음식을 받아올 때,

음식마다 id가 있었다.

 

 

 

 

이 음식 id를 meal info div에 각각 넣어줬었다.

 

 

이 아이디를 이용해

다시 fetchAPI를 써서

data를 받아와

화면에 display

 

 

 

 

 

 

 

 

 

 

---

 

mealsEl.addEventListener("click", (e) => {
	console.log(e.path);
});

mealsEl을 클릭한 경우

 

 

console.log(e.path)

를 해보면

 

 

 

선택한 div부터 parent Element를 거슬러 올라가서 마지막에는 window까지!!! array element로 들어온 것을 볼 수 있다.

우리는 이 중 mealInfo라는 class를 가진 div만 필요하다.

 

 

 

 

mealsEl.addEventListener("click", (e) => {
  const mealInfo = e.path.find((item) => {
    if (item.classList) {
      return item.classList.contains("meal-info");
    } else {
      return false;
    }
  });

  if (mealInfo) {
    const mealID = mealInfo.getAttribute("data-mealid");
    getMealById(mealID);
  }
});

e.path에서 우리는 item을 찾으려고 하는데

어떤 아이템이냐면

우선 classList를 가지고 있는데

classList가 meal-info를 포함하는 item만 return해서

mealInfo에 담아 줄 것이다.

 

적절한 mealInfo가 들어오면

거기서 data-mealid 속성을 받아와서 mealID에 저장해주고

이 mealID를 getMealById라는 함수의 parameter로 넘겨준다.

 

 

+) 저건 선생님이 알려주신 코드이고 나는 저 return값이 약간 확~ 와닿지 않아서

mealsContainer.addEventListener("click", (e) => {
  const mealInfo = e.path.find((item) => {
    if (item.classList.contains("mealInfo")) {
      return item;
    } else {
      return false;
    }
  });
  // console.log(mealInfo);
  const mealID = mealInfo.getAttribute("data-mealid");
  // console.log(mealID);
  getMealById(mealID);
});

처음부터 item의 classList가 mealInfo를 포함하고 있는지 확인하고

그렇다면 그 item을 return 해주는 것으로 바꿨다..

 

 

 

---

 

 

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

      addMealToDOM(meal);
    });
}

 

getMealById 함수는 간단하다(여기까지는 정말 그렇다...)

이제 받아온 meal을 addMealToDOM으로 넘긴다............ (하.............)

 

 

 

---

 

 

 

// Add meal to DOM
function addMealToDOM(meal) {
  const ingredients = [];

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

  single_mealEl.innerHTML = `
    <div class="single-meal">
      <h1>${meal.strMeal}</h1>
      <img src="${meal.strMealThumb}" alt="${meal.strMeal}" />
      <div class="single-meal-info">
        ${meal.strCategory ? `<p>${meal.strCategory}</p>` : ""}
        ${meal.strArea ? `<p>${meal.strArea}</p>` : ""}
      </div>
      <div class="main">
        <p>${meal.strInstructions}</p>
        <h2>Ingredients</h2>
        <ul>
          ${ingredients.map((ing) => `<li>${ing}</li>`).join("")}
        </ul>
      </div>
    </div>
  `;
}

...........그렇다

건투를 빈다.................