스파르타 AI-8기 TIL(1/25)-TeamProject

오늘 수정 한 것

    async function fetchRecommendedDish() {
        const apiUrl = 'https://www.themealdb.com/api/json/v1/1/random.php';
        const meals = [];
        try {
            for (let i = 0; i < 3; i++) {
                const response = await fetch(apiUrl);
                const data = await response.json();
                if (data.meals && data.meals.length > 0) {
                    const meal = data.meals[0];
                    meals.push({
                        name: meal.strMeal,
                        image: meal.strMealThumb,
                        category: meal.strCategory
                    });
                }
            }
        
            if (meals.length > 0) {
                const recommendedDishElement = document.createElement('div');
                recommendedDishElement.innerHTML = `
                    <div class="message-text">
                        안녕하세요! 원하시는 음식을 입력하면 레시피가 나옵니다!<br>
                        혹시 뭘 찾아야 할지 모르시겠나요? 이건 어때요?:
                        버튼을 누르면 자동으로 채팅창에 들어갑니다!<br>
                        1. <div class="meal-button" onclick="populateSearchBox('${meals[0].name}')">${meals[0].name}</div><br>
                        <img src="${meals[0].image}" alt="${meals[0].name}" style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-left: 10px;">
                        <span style="font-size: 12px; color: #ccc;">(${meals[0].category})</span><br>
                        
                        2. <div class="meal-button" onclick="populateSearchBox('${meals[1].name}')">${meals[1].name}</div><br>
                        <img src="${meals[1].image}" alt="${meals[1].name}" style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-left: 10px;">
                        <span style="font-size: 12px; color: #ccc;">(${meals[1].category})</span><br>
                        
                        3. <div class="meal-button" onclick="populateSearchBox('${meals[2].name}')">${meals[2].name}</div><br>
                        <img src="${meals[2].image}" alt="${meals[2].name}" style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-left: 10px;">
                        <span style="font-size: 12px; color: #ccc;">(${meals[2].category})</span>
                    </div>
                `;
                recommendedDishElement.className = 'message bot';
                document.getElementById('chat-container').appendChild(recommendedDishElement);
            } else {
                document.getElementById('chat-container').innerHTML = '<p>No meals found.</p>';
            }
        } catch (error) {
            console.error('Error fetching the meal:', error);
            document.getElementById('chat-container').innerHTML = '<p>Failed to load recommended dishes. Please try again later.</p>';
        }
    }
    
    function populateSearchBox(mealName) {
        const userInput = document.getElementById('user-input');
        userInput.value = mealName;  
    }
    
    document.addEventListener('DOMContentLoaded', fetchRecommendedDish);

이렇게 fetch를 통해 API 연결을 통해 실시간으로 추가적인 사진과 여러 디테일을 가져온다
https://www.themealdb.com/api.php

Free Meal API | TheMealDB.com

참고로 API는 여기서....