Meal Finder (1) Search & Display Meals from API

이 포스트는 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

https://www.themealdb.com/api.php

TheMealDB.com

 

 

 

 

submit.addEventListener('submit', searchMeal);

사용자가 submit 버튼을 누르면 searchMeal event handler가 돌아간다 '-'

 

 

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

  // Clear single meal
  single_mealEl.innerHTML = '';

  // Get search term
  const term = search.value;

  // Check for empty
  if (term.trim()) {
    fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${term}`)
      .then(res => res.json())
      .then(data => {
        console.log(data);
        resultHeading.innerHTML = `<h2>Search results for '${term}':</h2>`;

        if (data.meals === null) {
          resultHeading.innerHTML = `<p>There are no search results. Try again!<p>`;
        } else {
          mealsEl.innerHTML = data.meals
            .map(
              meal => `
            <div class="meal">
              <img src="${meal.strMealThumb}" alt="${meal.strMeal}" />
              <div class="meal-info" data-mealID="${meal.idMeal}">
                <h3>${meal.strMeal}</h3>
              </div>
            </div>
          `
            )
            .join('');
        }
      });
    // Clear search text
    search.value = '';
  } else {
    alert('Please enter a search term');
  }
}

실제로 submit 되서 화면이 reload 되는 것을 막기 위해

event parameter를 받아와서

e.preventDefault()를 해준다.

 

 

single_meal의 innerHTML을 비운다 -> 이유는 뒤에 코드와 관련

 

 

const term에 사용자가 입력한 음식 이름을 받아온다.

 

term.trim을 해서 입력한 내용이 실제로 있으면

fetch API를 이용해서 data를 받아온다.

없으면 (코드 가장 아랫줄) alert를 이용해서 다시 입력해달라고 요청한다.

 

 

 

 

사용자 입력값을 받아서 fetch API를 이용해 data 요청을 한 경우,

resultHeading에 검색 결과를 알려주는 paragraph를 짧게 넣어주는데

 

검색한 내용을 찾을 수 없다면

resultHeading에 찾을 수 없다는 메시지를 띄운다.

 

음식이 있다면!

data가 array로 되어 있기 때문에

map()을 이용해서 loop through해준다.

음식의 이미지와 음식 이름을 넣은 array를 새로 만들어 주고

join('')을 이용해서 하나의 string으로 만들어서 

mealsEl의 innerHTML에 넣어준다. (=> 화면에 display됨!)

 

그리고 나서 입력창을 비워준다.