Display webpage recipe

[yllenfer]

Retrieve and display recipe's webpage

Using the Spoonocular API, recipe's information should be retrieved, when recipe is clicked, we should be taken to the recipe itself where we should be able to see an more in-detailed webpage. `export function displayKeto(data) { // Log the entire data to inspect its structure console.log("API response data:", data);

const recipes = data.results; // Adjust the key based on the API response structure

if (!Array.isArray(recipes)) {
    console.error("Invalid data format: recipes is not an array");
    return;
}

const recipeHtml = recipes.map(recipe => `
<div class="recipe">
    <h3>
        <a href="../recipe-display/recipecontainer.html?id=${recipe.id}" target="_blank">${recipe.title}</a>
    </h3>
    <input type="checkbox" class="save-recipe-checkbox" data-recipe-id="${recipe.id}" />
</div>

`).join('');

// Insert the recipe HTML into the container
const recipeContainer = document.getElementById('recipeContainer');
if (recipeContainer) {
    recipeContainer.innerHTML = recipeHtml;
}

}

window.onload = function () {

const apiKey = 'f2e848f81f85424ab0240a9b15ded9da';  
const apiUrl = `https://api.spoonacular.com/recipes/complexSearch?diet=ketogenic&apiKey=${apiKey}`;

fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
        // Handle the data and display the recipes
        displayKeto(data);
    })
    .catch(error => {
        console.error("Error fetching recipes:", error);
    });

};`

[yllenfer]

Functionality added, tested and merged.