Add Product Filtering option

index.html

@@ -411,6 +411,22 @@
                 </div>
             </div>
         </div>
+        <div class="filter-container">
+            <button id="filterBtn" class="filter-btn">Filter Options</button>
+            <div id="filterOptions" class="filter-options">
+              <h3>Categories</h3>
+              <label><input type="checkbox" id="clothing" value="clothing"> Clothing</label><br>
+              <label><input type="checkbox" id="electronics" value="electronics"> Electronics</label><br>
+              <label><input type="checkbox" id="home-appliances" value="home-appliances"> Home Appliances</label><br>
+
+              <h3>Price Range</h3>
+              <label for="priceRange">Price: <span id="priceValue">$0 - $500</span></label>
+              <input type="range" id="priceRange" min="0" max="500" step="10" value="500">
+              <!-- Submit Button -->
+              <button id="submitBtn" class="submit-btn">Submit</button>
+            </div>
+          </div>
+          <script src="menu.js"></script>
     </nav>
 
     <!--Navbar End-->

menu.js

@@ -1,3 +1,35 @@
+// Toggle filter options visibility
+document.getElementById('filterBtn').addEventListener('click', function() {
+    const filterOptions = document.getElementById('filterOptions');
+    if (filterOptions.style.display === 'none' || filterOptions.style.display === '') {
+      filterOptions.style.display = 'block';
+    } else {
+      filterOptions.style.display = 'none';
+    }
+  });
+
+  // Update price range display value
+  const priceRange = document.getElementById('priceRange');
+  const priceValue = document.getElementById('priceValue');
+
+  priceRange.addEventListener('input', function() {
+    priceValue.textContent = `$0 - $${priceRange.value}`;
+  });
+
+  // Submit filter options
+  document.getElementById('submitBtn').addEventListener('click', function() {
+    const selectedCategories = [];
+    if (document.getElementById('clothing').checked) selectedCategories.push('Clothing');
+    if (document.getElementById('electronics').checked) selectedCategories.push('Electronics');
+    if (document.getElementById('home-appliances').checked) selectedCategories.push('Home Appliances');
+
+    const selectedPriceRange = priceRange.value;
+
+    // Process the selected filters (e.g., display them in the console)
+    console.log('Selected Categories:', selectedCategories);
+    console.log('Selected Price Range: $0 - $' + selectedPriceRange);
+  });
+
 // adding items from menu to cart
 document.addEventListener('DOMContentLoaded', function () {
     var menuContainers = document.querySelectorAll('.menu_container');

style.css

@@ -40,6 +40,40 @@ body {
 }
 <<<<<<< HEAD
 */
+.filter-container {
+  margin: 20px;
+}
+
+.filter-btn, .submit-btn {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.filter-btn:hover, .submit-btn:hover {
+  background-color: #0056b3;
+}
+
+.filter-options {
+  display: none;
+  margin-top: 10px;
+  border: 1px solid #ddd;
+  padding: 15px;
+  width: 250px;
+  background-color: #f9f9f9;
+}
+
+h3 {
+  margin: 10px 0;
+}
+
+input[type="range"] {
+  width: 100%;
+  margin: 5px 0;
+}
 
 =======
 >>>>>>> feature/marquee-hover
@@ -1090,4 +1124,4 @@ padding-left:2px;
   cursor: pointer;
   margin-top: 5px;
   width: 60%;
-}
+}