cocktailsDB API에서 fetch() API를 사용하여 레시피와 함께 임의의 칵테일 영감 표시

소개
fetch() API를 사용하면 서버에서 브라우저로 HTTPS 요청을 할 수 있습니다.
CocktailsDB API을 사용하여 사용자에게 임의의 칵테일 영감을 생성하는 간단한 응용 프로그램을 만듭니다.
Fetch API를 사용하여 Cocktails DB API에서 칵테일 목록을 가져왔습니다.
칵테일 이미지, 칵테일 이름, 칵테일 잔, 칵테일 재료 및 조치
사용된 JavaScript 개념
DOM 조작
가져오기() API
이벤트 리스너


프로젝트를 저장할 빈 폴더를 만듭니다.
폴더에는 index.js 파일, index.html 파일 및 사용자 지정 스타일 지정을 위한 style.css가 있어야 합니다.
CocktailsDB API URL에 가져오기 요청을 만드는 것으로 시작합니다.

fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php')
        .then(res => res.json())
        .then(res => {
        createCocktail(res.drinks[0]);
    });
});

API에 가져오기 요청을 보낸 후 임의의 칵테일 목록, 이미지, 재료, 측정 및 레시피 지침을 가져와 DOM에서 업데이트합니다.

const createCocktail = (cocktail) => {
    const ingredients = [];
    // Get all ingredients from the object. Up to 20
    for(let i=1; i<=20; i++) {
        if(cocktail[`strIngredient${i}`]) {
            ingredients.push(`${cocktail[`strIngredient${i}`]} - ${cocktail[`strMeasure${i}`]}`)
        } else {
            // Stop if no more ingredients
            break;
        }
    }

    const newInnerHTML = `
        <div id="rowa" id="cocktail-dataa">
            <div id="five">
                <img src="${cocktail.strDrinkThumb}" >
            </div>
            <div id="seven">
               <h4>${cocktail.strDrink}</h4>

               <div class="likes"> 
                  <button id="likeButton">
                    <i class="fa fa-thumbs-up"></i>
                  </button>
                  <input type="number" id="inputLike" value="0" name="">likes</input>
               </div>


                <p><strong>Category:</strong> ${cocktail.strCategory}</p>
                <p><strong>Glass type:</strong> ${cocktail.strGlass}</p>
                <p><strong>Type:</strong> ${cocktail.strAlcoholic}</p>
                <h5>Ingredients:</h5>
                <ul>
                    ${ingredients.map(ingredient => `<li>${ingredient}</li>`).join('')}
                </ul>
                <h5>Instructions:</h5>
                <p>${cocktail.strInstructions}</p>

            </div>
        </div>

    `;

계속해서 getcocktail 버튼을 클릭하여 화면에 임의의 칵테일을 표시할 수 있습니다.

또한 클릭 이벤트 리스너를 사용하여 사용자가 가장 좋아하는 칵테일에 좋아요를 추가할 수 있습니다.

    cocktail_container.innerHTML = newInnerHTML;
    let likebtn = document.querySelector('#likeButton');
    let inputLike= document.querySelector('#inputLike');

    likebtn.addEventListener('click', () => {
    inputLike.value = parseInt(inputLike.value) + 1;
    // inputLike.style.color = "#12ff00";
})