feat:add filter option to filter by categories

assets/js/app.js

@@ -2,6 +2,7 @@ import productsData from "../data/data.json";
 console.log(productsData);
 
 const productContainer = document.querySelector("#products-container");
+const categoryList = document.querySelector("#category-list");
 
 // calculate discounted price and store it in data
 for (const product of productsData) {
@@ -18,36 +19,6 @@ for (const product of productsData) {
 
 console.log(productsData);
 
-/*<!-- product card -->
-<div class="product-card">
-  <!-- product img -->
-  <img
-    class="product-img"
-    src="https://www.dennislingo.com/cdn/shop/products/4_6c6c6c34-aadb-4294-b7c5-95784455cc9d_720x.jpg?v=1663893926"
-    alt=""
-  />
-  <!-- products details -->
-  <div class="product-details">
-    <h1 class="text-sm font-medium">
-      Cotton Buffalo Check Slim Fit Casual Shirt
-    </h1>
-    <!-- price area -->
-    <div class="price-details">
-      <p class="current-price">₹699</p>
-      <p class="mrp-price">₹800</p>
-      <p class="offer">68% off</p>
-    </div>
-    <!-- size area -->
-    <div class="size-list">
-      <span class="size-box">L</span>
-      <span class="size-box">XL</span>
-      <span class="size-box">XXL</span>
-    </div>
-  </div>
-  <!-- badge -->
-  <div class="badge">out of stock</div>
-</div>*/
-
 function displayProducts(datas) {
   if (datas.length > 0) {
     const productCardsfragment = new DocumentFragment();
@@ -126,7 +97,69 @@ function displayProducts(datas) {
     });
 
     console.dir(productCardsfragment);
+    productContainer.innerHTML = "";
     productContainer.append(productCardsfragment);
   }
 }
 displayProducts(productsData);
+
+function setCategories() {
+  const allCategories = productsData.map((product) => product.category);
+  const categories = [
+    "All",
+    ...allCategories.filter((category, index) => {
+      return allCategories.indexOf(category) === index;
+    }),
+  ];
+
+  categoryList.innerHTML = categories
+    .map(
+      (category) =>
+        `<li class="cursor-pointer">
+        <label
+          for="${category}"
+          class="flex items-center gap-2 text-xs font-semibold cursor-pointer capitalize"
+         
+        >
+          <input
+            class="p-0.5"
+            type="radio"
+            name="category"
+            value="${category}"
+            id="${category}"
+          />${category}
+        </label>
+      </li>`
+    )
+    .join("");
+
+  // filter
+  categoryList.addEventListener("change", filterbyCategories);
+}
+setCategories();
+
+//filter by categoris
+function filterbyCategories(e) {
+  let selectedCategory = e.target.value;
+  console.log(selectedCategory);
+  // console.log(selectedCategory);
+  selectedCategory === "All"
+    ? displayProducts(productsData)
+    : displayProducts(
+        productsData.filter((product) => product.category === selectedCategory)
+      );
+}
+
+//dropdown
+const dropdownEl = document.querySelectorAll("#drop-down");
+console.log(dropdownEl);
+dropdownEl.forEach((el) => {
+  el.addEventListener("click", (e) => {
+    let siblingEL = el.nextElementSibling;
+    if (siblingEL) {
+      siblingEL.classList.toggle("hidden");
+    } else {
+      alert("we working on that feature...");
+    }
+  });
+});

index.html

@@ -100,7 +100,7 @@ <h2 class="font-rubik text-2xl pt-1">vedha's</h2>
     <main class="grid font-inter pt-[68px]">
       <!-- filter section -->
       <section
-        class="py-1 border-r-[1px] h-screen md:block hidden w-[260px] fixed"
+        class="py-1 border-r-[1px] h-screen md:block hidden w-[260px] fixed font-inter"
       >
         <!-- title div -->
         <div class="border-b-[1px] px-8 py-2 flex items-center gap-2">
@@ -126,7 +126,10 @@ <h2 class="font-semibold text-lg">Filters</h2>
         </div>
         <!-- category -->
         <div class="px-8 py-4 border-b-[1px]">
-          <div class="flex items-center justify-between cursor-pointer">
+          <div
+            class="flex items-center justify-between cursor-pointer"
+            id="drop-down"
+          >
             <h3 class="font-semibold text-sm text-[#232c33]">Categories</h3>
             <span>
               <svg
@@ -147,13 +150,16 @@ <h3 class="font-semibold text-sm text-[#232c33]">Categories</h3>
 
           <!-- category list -->
           <ul
-            class="px-2 text-sm font-medium text-black"
+            class="space-y-3 mt-4 text-sm font-medium text-[#232c33d6]"
             id="category-list"
           ></ul>
         </div>
         <!-- sort by -->
         <div class="px-8 py-4 border-b-[1px]">
-          <div class="flex items-center justify-between cursor-pointer">
+          <div
+            class="flex items-center justify-between cursor-pointer"
+            id="drop-down"
+          >
             <h3 class="font-semibold text-sm text-[#232c33]">Sort by</h3>
             <span>
               <svg
@@ -171,16 +177,13 @@ <h3 class="font-semibold text-sm text-[#232c33]">Sort by</h3>
               </svg>
             </span>
           </div>
-
-          <!-- category list -->
-          <ul
-            class="px-2 text-sm font-medium text-black"
-            id="category-list"
-          ></ul>
         </div>
         <!-- brands -->
         <div class="px-8 py-4 border-b-[1px]">
-          <div class="flex items-center justify-between cursor-pointer">
+          <div
+            class="flex items-center justify-between cursor-pointer"
+            id="drop-down"
+          >
             <h3 class="font-semibold text-sm text-[#232c33]">Brands</h3>
             <span>
               <svg
@@ -200,10 +203,6 @@ <h3 class="font-semibold text-sm text-[#232c33]">Brands</h3>
           </div>
 
           <!-- category list -->
-          <ul
-            class="px-2 text-sm font-medium text-black"
-            id="category-list"
-          ></ul>
         </div>
       </section>
       <!-- product section -->