%%html
<html>
<head>
    <title>Recipe Search</title>
    <style>
        /* Style for the search bar container */
        .search-bar {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }

        /* Style for the search bar elements */
        .search-bar h1 {
            margin: 0;
        }

        .search-input-container {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border-radius: 25px;
            margin: 20px 0;
            max-width: 600px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        .search-icon {
            padding: 10px;
            border-top-left-radius: 25px;
            border-bottom-left-radius: 25px;
            background: url('search-icon.png') no-repeat center center;
            background-size: 20px 20px;
        }

        .search-input {
            padding: 10px;
            border: none;
            border-radius: 0;
            font-size: 16px;
            width: 100%;
        }

        /* Style for recipe display */
        .recipe-item {
            text-align: center;
            padding: 20px;
        }

        .recipe-item img {
            border-radius: 50%;
            max-width: 200px;
            display: block;
            margin: 0 auto;
        }

        .recipe-item ul {
            list-style-type: disc;
            text-align: left;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <div class="search-bar">
        <h1>Recipe Search</h1>
        <div class="search-input-container">
            <div class="search-icon"></div>
            <input type="text" id="searchInput" class="search-input" placeholder="Search for a recipe" onkeydown="if (event.key === 'Enter') searchRecipes()">
        </div>
    </div>

    <div id="results">
        <!-- Search results will be displayed here -->
    </div>

    <script>
        function searchRecipes() {
            const apiKey = '6402f0a5647c2c2bb72cb3bb592d0c8b'; // Replace with your Edamam API key
            const appId = '9d5f6314'; // Replace with your Edamam APP ID
            const searchQuery = document.getElementById('searchInput').value;
            const apiUrl = `https://api.edamam.com/search?q=${searchQuery}&app_id=${appId}&app_key=${apiKey}`;

            // Make an API request to Edamam
            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    displayResults(data.hits);
                })
                .catch(error => console.error(error));
        }

        function displayResults(recipes) {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = ''; // Clear previous results

            recipes.forEach(recipe => {
                const recipeData = recipe.recipe;
                const recipeItem = document.createElement('div');
                recipeItem.className = 'recipe-item';

                // Extract recipe information
                const name = recipeData.label;
                const ingredients = recipeData.ingredientLines;
                const steps = recipeData.url;
                const sourceUrl = recipeData.url;
                const calories = recipeData.calories;
                const nutrients = recipeData.totalNutrients;
                const image = recipeData.image;

                // Display the information in a neat format
                recipeItem.innerHTML = `
                    <h2>${name}</h2>
                    <img src="${image}" alt="${name}">
                    <ul>
                        <li><strong>Ingredients:</strong></li>
                        ${ingredients.map(ingredient => `<li>${ingredient}</li>`).join('')}
                    </ul>
                    <p><strong>Steps:</strong> ${steps}</p>
                    <p><strong>Source URL:</strong> <a href="${sourceUrl}" target="_blank">${sourceUrl}</a></p>
                    <p><strong>Calories:</strong> ${calories.toFixed(2)} kcal</p>
                    <p><strong>Nutritional Info:</strong></p>
                    <ul>
                        <li>Carbohydrates: ${nutrients.CHOCDF.quantity.toFixed(2)}g (${(nutrients.CHOCDF.quantity / calories * 100).toFixed(2)}%)</li>
                        <li>Fat: ${nutrients.FAT.quantity.toFixed(2)}g (${(nutrients.FAT.quantity / calories * 100).toFixed(2)}%)</li>
                        <li>Protein: ${nutrients.PROCNT.quantity.toFixed(2)}g (${(nutrients.PROCNT.quantity / calories * 100).toFixed(2)}%)</li>
                        <li>Cholesterol: ${nutrients.CHOLE.quantity.toFixed(2)}mg</li>
                    </ul>
                `;

                resultsDiv.appendChild(recipeItem);
            });
        }
    </script>
</body>
</html>
Recipe Search

Recipe Search