Made results not to show if there are no results

DiksonIvySon · Oct 16, 2023 · 7a2d279 · 7a2d279
1 parent 124f472
commit 7a2d279
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/foodRecipes/search.html b/foodRecipes/search.html
@@ -59,7 +59,7 @@ <h4>Try searching another related ingredient</h4>
         </main>
 
         <div id="pop-up" class="pop-up" style="display: none">
-            <div class="close-popUp">
+            <div class="close-popUp" >
                 <i class="fa-solid fa-xmark"></i>
             </div>
             <div class="popUp-image-container">

diff --git a/foodRecipes/search.js b/foodRecipes/search.js
@@ -17,6 +17,7 @@ async function fetchData(link) {
 
     if (recipeData.meals == null){
         document.querySelector("#noResults-message").style.display = 'block';
+        document.querySelector('#recipe-cards').style.display = 'none';
     }
     else (
         displayResults(recipeData)
@@ -64,7 +65,7 @@ function displayViewRecipeData(viewRecipeData) {
     popUp_container.textContent = '';
     let popUp = document.createElement('div');
     popUp.innerHTML = `
-                        <div class="close-popUp">
+                        <div class="close-popUp" onclick="handleClosePopUp()">
                             <i class="fa-solid fa-xmark"></i>
                         </div>
                         <div class="popUp-image-container">
@@ -136,3 +137,9 @@ function handleIngredients(viewRecipeData) {
 
     return ingredients_string;
 }
+
+
+// Making close-pop-up function
+function handleClosePopUp() {
+    document.querySelector('#pop-up').style.display = 'none';
+}