Created display results function

DiksonIvySon · Oct 16, 2023 · 64f2b84 · 64f2b84
1 parent ff38764
commit 64f2b84
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/foodRecipes/search.html b/foodRecipes/search.html
@@ -29,8 +29,8 @@ <h1 class="heading">Find the best meal recipes!!</h1>
         </section>
         <h2 class="resultsHeader">Your Search Results</h2>
         <main>
-            <div class="recipe-cards">
-                <div class="card">
+            <div id="recipe-cards" class="recipe-cards">
+           <!-- <div class="card">
                     <img src="images/burger.webp" alt="Avatar" style="width:100%">
                     <div class="container">
                       <h4><b>Burger</b></h4>
@@ -50,7 +50,7 @@ <h4><b>Burger</b></h4>
                       <h4><b>Burger</b></h4>
                       <button>View the Recipe</button>
                     </div>
-                </div>
+                </div>-->
             </div>
         </main>
 

diff --git a/foodRecipes/search.js b/foodRecipes/search.js
@@ -6,12 +6,40 @@ search_button.addEventListener('click', handleSearch);
 //function to handle search button click
 function handleSearch() {
     let search_input = document.querySelector('#search-input').value.trim();
-    fetchData("https:/www.themealdb.com/api/json/v1/1/filter.php?i=chicken");
+    let link = "https:/www.themealdb.com/api/json/v1/1/filter.php?i=" + search_input;
+    fetchData(link);
 }
 
 async function fetchData(link) {
     const response = await fetch(link, {mode: 'cors'})
     const recipeData = await response.json();
+
+    if (recipeData.meals == null){
+        alert("sorry could not find results")
+    }
+    else (
+        displayResults(recipeData)
+    )
+}
+
+function displayResults(recipeData) {
     console.log(recipeData);
+    let recipe_cards_container = document.querySelector('#recipe-cards');
+    recipe_cards_container.textContent = '';
+
+    for (let i = 0; i < recipeData.meals.length; i++) {
+        let card = document.createElement('div');
+        card.setAttribute('class', 'card')
+        card.innerHTML = `
+                            <img src=${recipeData.meals[i].strMealThumb} alt="food image" style="width:100%">
+                            <div class="container">
+                                <h4><b>${recipeData.meals[i].strMeal}</b></h4>
+                                <button onclick="handleViewRecipe(${recipeData.meals[i].idMeal})">View the Recipe</button>
+                            </div>
+                         `;
+
+    recipe_cards_container.appendChild(card);
+    console.log("done");
+    }
 }