Update script.js

Author: mdzaberalhamid

project-2-recipe-book-app/script.js

@@ -1,6 +1,40 @@
+const API_KEY = "6716bbd7e07b44498e4287907d91a5ca";
 
+const recipeListElements = document.getElementById('recipe-list');
 
-const API_KEY = "6716bbd7e07b44498e4287907d91a5ca";
+function displayRecipes(recipes) {
+    recipeListElements.innerHTML = "";
+    recipes.forEach((recipe) => {
+        const recipeItemEl = document.createElement("li");
+        recipeItemEl.classList.add("recipe-item");
+
+        const recipeImageEl = document.createElement("img");
+        recipeImageEl.src = recipe.image;
+        recipeImageEl.alt = "recipe";
+
+        const recipeTitleEl = document.createElement("h2");
+        recipeTitleEl.innerText = recipe.title;
+
+        recipeIngredientsEl = document.createElement("p");
+        recipeIngredientsEl.innerHTML = `
+            <strong>Ingredients:</strong> ${recipe.extendedIngredients.map((ingredient) => ingredient.original).join(", ")}
+        `;
+
+        const recipeLinkEl = document.createElement("a");
+        recipeLinkEl.href = recipe.sourceUrl;
+        recipeLinkEl.innerText = "View Recipe";
+        
+        recipeItemEl.appendChild(recipeImageEl);
+
+        recipeItemEl.appendChild(recipeTitleEl);
+        
+        recipeItemEl.appendChild(recipeIngredientsEl);
+
+        recipeItemEl.appendChild(recipeLinkEl);
+
+        recipeListElements.appendChild(recipeItemEl);
+    });
+}
 
 async function getRecipes() {
     const response = await fetch(`https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`)
@@ -13,7 +47,8 @@ async function getRecipes() {
 async function init() {
     const recipes = await getRecipes()
 
-    console.log(recipes);
+    // console.log(recipes);
+    displayRecipes(recipes);
 }
 
 init()