added show all functionality

index.html

@@ -116,9 +116,10 @@ <h1 class="text-4xl font-semibold mb-[50px] text-center">
         </h1>
 
         <!-- meals cart container -->
-        <div 
-        id="meals-container"
-        class="grid grid-cols-1 sm:grid-cols-2 justify-items-center gap-6">
+        <div
+          id="meals-container"
+          class="grid grid-cols-1 sm:grid-cols-2 justify-items-center gap-6"
+        >
           <!-- card -->
           <div
             class="flex items-center justify-center border rounded-lg hover:bg-gray-100 duration-200 ease-in-out"
@@ -212,6 +213,7 @@ <h3 class="text-2xl font-bold">Chicken Handi</h3>
         <!-- button -->
         <div class="text-center mt-[85px]">
           <button
+            onclick="handleShowAll()"
             class="text-xl font-bold px-10 py-4 rounded-lg bg-[#FFC107] hover:scale-105 duration-300"
           >
             Show All
@@ -287,6 +289,6 @@ <h6 class="mb-4 text-2xl font-bold text-[#403F3F]">Newsletter</h6>
     </footer>
 
     <!-- script -->
-     <script src="./scripts/app.js"></script>
+    <script src="./scripts/app.js"></script>
   </body>
 </html>

scripts/app.js

@@ -1,9 +1,14 @@
-const loadAllMeals = async () => {
+const loadAllMeals = async (status) => {
   const response = await fetch(
     "https://www.themealdb.com/api/json/v1/1/filter.php?a=Italian"
   );
   const data = await response.json();
-  displayAllMeals(data.meals);
+
+  if (status) {
+    displayAllMeals(data.meals);
+  } else {
+    displayAllMeals(data.meals.slice(0, 6));
+  }
 };
 
 const displayAllMeals = (meals) => {
@@ -28,8 +33,9 @@ const displayAllMeals = (meals) => {
             <div class="px-6">
               <h3 class="text-2xl font-bold">${meal.strMeal}</h3>
               <p class="text-lg leading-[30px] text-[#706F6F] mt-4 mb-6">
-                There are many variations of passages of available, but the
-                majority have suffered
+                This dish features a harmonious blend of flavors, with various interpretations available, 
+                ensuring a delightful culinary experience.
+
               </p>
               <button class="text-[#FFC107] font-semibold text-lg underline">
                 View Details
@@ -44,4 +50,8 @@ const displayAllMeals = (meals) => {
   });
 };
 
+const handleShowAll = () => {
+  loadAllMeals(true);
+};
+
 loadAllMeals();