fix: fixing error message

index.html

@@ -19,7 +19,7 @@
       <div class="container">
         <a class="navbar-brand" href="index.html">TasteTrack</a>
         <button
-          class="navbar-toggler"
+          class="navbar-toggler collapsed"
           type="button"
           data-bs-toggle="collapse"
           data-bs-target="#navbarNav"
@@ -29,10 +29,7 @@
         >
           <span class="navbar-toggler-icon"></span>
         </button>
-        <div
-          class="collapse navbar-collapse justify-content-end"
-          id="navbarNav"
-        >
+        <div class="navbar-collapse collapse" id="navbarNav">
           <ul class="navbar-nav">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>

js/script.js

@@ -1,10 +1,17 @@
 function randomMeal() {
+  $(".result-container").html(
+    `<div class="d-flex justify-content-center mt-5">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>`
+  );
+
   $.ajax({
     url: "https://www.themealdb.com/api/json/v1/1/random.php",
     dataType: "json",
     type: "get",
     success: function (response) {
-      console.log(response);
       showResult(response);
     },
   });
@@ -15,6 +22,13 @@ $("#swipe-button").on("click", function () {
 });
 
 function searchMeal() {
+  $(".result-container").html(
+    `<div class="d-flex justify-content-center mt-5">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>`
+  );
   $.ajax({
     url: "https://www.themealdb.com/api/json/v1/1/search.php",
     data: {
@@ -32,7 +46,7 @@ function showResult(response) {
   $("#instruction-order").html("");
   $("#ingredients-list").html("");
 
-  if (response !== null) {
+  if (response.meals !== null) {
     let meal = response.meals[0];
     if (meal.strTags === null) {
       meal.strTags = "-";