project done

Author: uttamsaha

assets/images/icons/favicon.png

@@ -56,7 +56,7 @@ ul input {
 .banner {
   display: flex;
   justify-content: center;
-  margin-top: 60px;
+  margin-top: 70px;
 }
 .banner-item {
   display: flex;
@@ -91,7 +91,7 @@ ul input {
 }
 #supporters {
   text-align: center;
-  margin-bottom: 60px;
+  margin-top: 15px;
 }
 
 .main {
@@ -334,4 +334,8 @@ footer a {
 }
 .food-details a{
   color: white;
+}
+#no-search-result{
+  display: none;
+  margin-top: 30px;
 }

css/style.css

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://kit.fontawesome.com/ff4421e871.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="css/style.css">
+    <link rel="shortcut icon" href="assets/images/icons/favicon.png" type="image/png">
     <title>TheMealDB.com</title>
 </head>
 
@@ -393,6 +394,11 @@ <h1>Welcome to TheMealDB</h1>
         <div id="preloader">
             <img src="assets/images/preloader.webp" alt="">
         </div>
+
+        <!-- no search result found  -->
+        <div id="no-search-result">
+            <p style="color: red; text-align: center; font-size: 22px;"><del><b>No search result found</b></del></p>
+        </div>
         <!-- display food details  -->
         <div id="food-details" class="food-details">
 

index.html

@@ -2,8 +2,19 @@ const loadFoods = () => {
     document.getElementById('preloader').style.display = 'block';
     const inputField = document.getElementById('input-field');
     const inputFieldValue =inputField.value;
+    if(!inputFieldValue){
+        alert('Write something.............');
+        document.getElementById('preloader').style.display = 'none';
+        return;
+    }
+    else if(inputFieldValue < 0){
+        alert('Enter positive number');
+        document.getElementById('preloader').style.display = 'none';
+        return;
+    }
 
     document.getElementById('display-search-result').innerHTML = '';
+    document.getElementById('no-search-result').style.display = 'none';
     document.getElementById('main').style.display = "none";
     document.getElementById('footer').style.display = "none";
     fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${inputFieldValue}`)
@@ -14,6 +25,10 @@ const loadFoods = () => {
 }
 
 const displayFoods = foods => {
+    if(!foods){
+        document.getElementById('no-search-result').style.display = 'block';
+        document.getElementById('preloader').style.display = 'none';
+    }
     console.log(foods);
     // document.getElementById('display-search-result').innerHTML = '';
     const searchResult = document.getElementById('display-search-result');
@@ -31,6 +46,7 @@ const displayFoods = foods => {
         searchResult.appendChild(div);
     })
     document.getElementById('preloader').style.display = 'none';
+    document.getElementById('no-search-result').style.display = 'none';
 }
 
 const loadFoodDetails = foodId => {
@@ -47,7 +63,7 @@ const getFoodDetails = food => {
          <img src="${food.strMealThumb}">
         <h4>${food.strMeal}</h4>
         <p>${food.strInstructions}</p>
-        <button><a href="${food.strYoutube}" target="_blank">Visit Youtube</a></button>
+        <button><a href="${food.strYoutube}" target="_blank">Watch in Youtube</a></button>
         
     </div>