Getting Data From Spoonacular • 1 min read

<script>
    document.getElementById('recipeForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const apiKey = '84cfe45628de456c87a13a80b76f5bd8'; 
        const ingredients = document.getElementById('ingredients').value;
        const apiUrl = `https://api.spoonacular.com/recipes/findByIngredients?apiKey=${apiKey}&ingredients=${ingredients}`;
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                const resultsList = document.getElementById('results');
                resultsList.innerHTML = ''; 
                if (data.length === 0) {
                    const noResultsItem = document.createElement('li');
                    noResultsItem.textContent = 'No recipes found for these ingredients.';
                    resultsList.appendChild(noResultsItem);
                } else {
                    data.forEach(recipe => {
                        const recipeItem = document.createElement('li');
                        recipeItem.innerHTML = `<strong>${recipe.title}</strong> (Likes: ${recipe.likes})`;
                        const missingIngredients = recipe.missedIngredients.map(ingredient => ingredient.name);
                        const usedIngredients = recipe.usedIngredients.map(ingredient => ingredient.name);
                        recipeItem.innerHTML += `<br>Missing Ingredients: ${missingIngredients.join(', ')}`;
                        recipeItem.innerHTML += `<br>Used Ingredients: ${usedIngredients.join(', ')}`;
                        resultsList.appendChild(recipeItem);
                    });
                }
            })
            .catch(error => {
                console.error('Error fetching recipes:', error);
            });
    });
</script>