Feature Enhance in Grocery and Header update

Grocery-/index.html

@@ -18,21 +18,43 @@
 
 
   <div class="containter-fluid bg-white">
-    <div class="containter-fluid p-3 mt-1" style="border-bottom: 1px solid #e4e7eb;">
+    <div class="containter-fluid p-3 mt-1 bg-success text-white" style="border-bottom: 1px solid #e4e7eb;">
       <h4>Grocery</h4>
     </div>
-    <div id="grocery-product" class="row m-1"></div>
-  </div>
 
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-12"><img src="https://rukminim2.flixcart.com/flap/1000/1000/image/37ba2d80e7566df1.jpg?q=50" alt="" width="100%"></div>
+        <div class="col-md-6"><img src="https://rukminim2.flixcart.com/flap/1050/1050/image/15cbd99e6fcb6fc1.jpg?q=50" alt="" class="img-fluid"></div>
+        <div class="col-md-6"><img src="https://rukminim2.flixcart.com/flap/1050/1050/image/ed04b09381eec3f9.jpg?q=50" alt="" class="img-fluid"></div>
+
+        <div class="col-12"><img src="https://rukminim2.flixcart.com/flap/1000/1000/image/7f003daeaf4ae8dc.jpg?q=50" alt="" width="100%"></div>
+        <div class="col-md-3"><img src="https://rukminim2.flixcart.com/flap/1050/1050/image/7245c5bc2a7c3dcb.jpg?q=50" alt="" class="img-fluid"></div>
+        <div class="col-md-3"><img src="https://rukminim2.flixcart.com/flap/1050/1050/image/538bbfa1ed73f14a.jpg?q=50" alt="" class="img-fluid"></div>
+        <div class="col-md-3"><img src="https://rukminim2.flixcart.com/flap/1050/1050/image/14017df9b6f0c7c5.png?q=50" alt="" class="img-fluid"></div>
+        <div class="col-md-3"><img src="https://rukminim2.flixcart.com/flap/1050/1050/image/f2f929242d71a365.jpg?q=50" alt="" class="img-fluid"></div>
+
+
+        <div class="col-12"><img src="https://rukminim2.flixcart.com/flap/1000/1000/image/f6ce91ec12acfe5a.jpg?q=50" alt="" width="100%"></div>
+        <div class="col-md-4"><img src="https://rukminim2.flixcart.com/flap/1050/1050/image/8c79136d5eeaae1f.jpg?q=50" alt="" class="img-fluid"></div>
+        <div class="col-md-4"><img src="https://rukminim2.flixcart.com/flap/1050/1050/image/b3e4fd5dce73256b.png?q=50" alt="" class="img-fluid"></div>
+        <div class="col-md-4"><img src="https://rukminim2.flixcart.com/flap/1050/1050/image/a3df8d2af525ec55.jpg?q=50" alt="" class="img-fluid"></div>
 
+        <div class="col-12"><img src="https://rukminim2.flixcart.com/flap/1000/1000/image/862eb4eabe3f7ba4.jpg?q=50" alt="" width="100%"></div>
+
+      </div>
+    </div>
+    <!-- fetch item -->
+    <div id="grocery-product" class="row m-1"></div>
+  </div>
 
 
 
 
-  <footer id="footer-grocery" style="background-color: #292d33;"> </footer>
+  <footer id="footer-grocery" style="background-color: #172337;"> </footer>
   <!-- javaScript -->
   <script src="../js/bootstrap.bundle.min.js"></script>
   <script src="../js/grocery-store-script.js"></script>
 </body>
 
-</html>
+</html>

css/header.css

@@ -52,7 +52,7 @@
 
   #header-bluebg .searchBar_h input{
     width: 28vw;
-    padding: 2px;
+    padding: 5px;
   }
   .cartLogoandname{
     position: relative ;

header/header.html

@@ -22,15 +22,15 @@
     .searchBar_h input {
       width: 300px;
       padding: 5px 10px;
-      border-radius: 5px 0 0 5px;
+      border-radius: 5px;
       border: 1px solid #ccc;
     }
 
     .searchBar_h i {
-      padding: 5px 10px;
+      padding: 3px 10px;
       border-radius: 0 5px 5px 0;
       background-color: #fff;
-      border: 1px solid #ccc;
+      /* border: 1px solid #ccc; */
       cursor: pointer;
     }
 
@@ -154,7 +154,6 @@
 
   <!-- JavaScript -->
   <script src="../js/bootstrap.bundle.min.js"></script>
-  <script src="../js/header_bluebg.js"></script>
 </body>
 
 </html>

js/account.js

@@ -15,3 +15,26 @@ document.addEventListener("DOMContentLoaded", () => {
       );
   });
 });
+
+
+
+// header search bar search function 
+setTimeout(() => {  
+  const inputField_h = document.getElementById('inputField_h');
+  const fetchButton_h = document.getElementById('fetchButton_h');
+
+  function fetchValue_h() {
+      const value = inputField_h.value;
+      window.location.href = `../search/?query=${value}`;
+  }
+
+  fetchButton_h.addEventListener('click', fetchValue_h);
+
+  inputField_h.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+          fetchValue_h();
+      }
+  });
+
+
+}, 500);

js/addKartProduct.js

@@ -136,4 +136,31 @@ fetch("../json-api/product.json")
     }, 1500);
 
   })
-  .catch((error) => console.error("Error fetching data:", error));
+  .catch((error) => console.error("Error fetching data:", error));
+
+
+
+
+
+// header search bar search function 
+setTimeout(() => {  
+  const inputField_h = document.getElementById('inputField_h');
+  const fetchButton_h = document.getElementById('fetchButton_h');
+
+  function fetchValue_h() {
+      const value = inputField_h.value;
+      window.location.href = `../search/?query=${value}`;
+  }
+
+  fetchButton_h.addEventListener('click', fetchValue_h);
+
+  inputField_h.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+          fetchValue_h();
+      }
+  });
+
+
+}, 500);
+
+//end 

js/appliances-script.js

@@ -62,3 +62,27 @@ function createapplianceProductCard(product) {
       applianceFetch(g);
       })
       .catch(error => console.error('Error fetching data:', error));
+
+
+// header search bar search function 
+setTimeout(() => {  
+  const inputField_h = document.getElementById('inputField_h');
+  const fetchButton_h = document.getElementById('fetchButton_h');
+
+  function fetchValue_h() {
+      const value = inputField_h.value;
+      window.location.href = `../search/?query=${value}`;
+  }
+
+  fetchButton_h.addEventListener('click', fetchValue_h);
+
+  inputField_h.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+          fetchValue_h();
+      }
+  });
+
+
+}, 500);
+
+//end 

js/beautyToys&more-script.js

@@ -64,3 +64,28 @@ function createbeautyToysProductCard(product) {
       beautyToysFetch(g);
       })
       .catch(error => console.error('Error fetching data:', error));
+
+
+
+// header search bar search function 
+setTimeout(() => {  
+    const inputField_h = document.getElementById('inputField_h');
+    const fetchButton_h = document.getElementById('fetchButton_h');
+
+    function fetchValue_h() {
+        const value = inputField_h.value;
+        window.location.href = `../search/?query=${value}`;
+    }
+
+    fetchButton_h.addEventListener('click', fetchValue_h);
+
+    inputField_h.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            fetchValue_h();
+        }
+    });
+
+
+  }, 500);
+
+  //end 

js/electronics-script.js

@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 });
 
-// end footer
+// end fetch footer
 
 
 // Function to create a product card
@@ -62,4 +62,30 @@ function createelectronicsProductCard(product) {
       const g = data.filter(product => product.category.toLowerCase().includes('electronic'));
       electronicsFetch(g);
       })
-      .catch(error => console.error('Error fetching data:', error));
+      .catch(error => console.error('Error fetching data:', error));
+
+
+
+
+// header search bar search function 
+setTimeout(() => {  
+  const inputField_h = document.getElementById('inputField_h');
+  const fetchButton_h = document.getElementById('fetchButton_h');
+
+  function fetchValue_h() {
+      const value = inputField_h.value;
+      window.location.href = `../search/?query=${value}`;
+  }
+
+  fetchButton_h.addEventListener('click', fetchValue_h);
+
+  inputField_h.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+          fetchValue_h();
+      }
+  });
+
+
+}, 500);
+
+//end 

js/fashion-script.js

@@ -66,4 +66,25 @@ function createfashionsProductCard(product) {
 
 
 
-
+  // header search bar search function 
+setTimeout(() => {  
+  const inputField_h = document.getElementById('inputField_h');
+  const fetchButton_h = document.getElementById('fetchButton_h');
+
+  function fetchValue_h() {
+      const value = inputField_h.value;
+      window.location.href = `../search/?query=${value}`;
+  }
+
+  fetchButton_h.addEventListener('click', fetchValue_h);
+
+  inputField_h.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+          fetchValue_h();
+      }
+  });
+
+
+}, 500);
+
+//end 

js/fetchProductOfIndex.js

@@ -16,7 +16,7 @@ function createProductCard(product) {
     <style>
     .products div{font-size:14px}.products img:hover{transform:scale(1.1)}.products{font-size:medium;display:flex;flex-direction:column;align-items:center}.rating{background-color:green;width:fit-content;padding:0 16px;border-radius:5px;color:#fff}.products .product_Img{height:150px}.products img{padding:1px;width:100%;height:100%;object-fit:contain}
     </style>
-      <a class="btn col-lg-2 col-md-2 col-sm-4 col-6 p-2" href="addtokart/?query=${product.name}">
+      <a class="btn col-lg-2 col-md-3 col-sm-4 col-6 p-2" href="addtokart/?query=${product.name}">
           <div class="products">
               <div class="text-center product_Img img-fluid">
                   <img src="json-api/product-img/${product.productImg}" alt="${product.id}">

js/fkMobileApp.js

@@ -15,3 +15,28 @@ document.addEventListener("DOMContentLoaded", () => {
       );
   });
 });
+
+
+
+// header search bar search function 
+setTimeout(() => {  
+  const inputField_h = document.getElementById('inputField_h');
+  const fetchButton_h = document.getElementById('fetchButton_h');
+
+  function fetchValue_h() {
+      const value = inputField_h.value;
+      window.location.href = `../search/?query=${value}`;
+  }
+
+  fetchButton_h.addEventListener('click', fetchValue_h);
+
+  inputField_h.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+          fetchValue_h();
+      }
+  });
+
+
+}, 500);
+
+//end 

js/giftCard.js

@@ -13,6 +13,7 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 });
 
+
 // fetch footer
 
 document.addEventListener("DOMContentLoaded", () => {

js/grocery-store-script.js

@@ -63,4 +63,29 @@ fetch('../json-api/product.json')
     const g = data.filter(product => product.category.toLowerCase().includes('grocery'));
     groceryFetch(g);
     })
-    .catch(error => console.error('Error fetching data:', error));
+    .catch(error => console.error('Error fetching data:', error));
+
+
+
+// header search bar search function 
+setTimeout(() => {  
+  const inputField_h = document.getElementById('inputField_h');
+  const fetchButton_h = document.getElementById('fetchButton_h');
+
+  function fetchValue_h() {
+      const value = inputField_h.value;
+      window.location.href = `../search/?query=${value}`;
+  }
+
+  fetchButton_h.addEventListener('click', fetchValue_h);
+
+  inputField_h.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+          fetchValue_h();
+      }
+  });
+
+
+}, 500);
+
+//end