add data in json

vedhatech002 · Jan 24, 2024 · 5b3b61d · 5b3b61d
1 parent 2a966e0
commit 5b3b61d
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 43 deletions.
diff --git a/assets/data/data.json b/assets/data/data.json
@@ -124,5 +124,19 @@
     "rating": 4.2,
     "color": "Teal",
     "brand": "Dennis Lingo"
+  },
+  {
+    "id": 9,
+    "name": "Black Racing Oversized Sweat Tshirt",
+    "category": "tshirts",
+    "price": 1099,
+    "img": "https://www.snitch.co.in/cdn/shop/files/Swatshirt353.jpg?v=1704803556",
+    "sizes": ["S", "L", "XXL"],
+    "in_stock": true,
+    "discount_percentage": 15,
+    "discountedPrice": null,
+    "rating": 4.2,
+    "color": "Teal",
+    "brand": "Dennis Lingo"
   }
 ]
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,10 +1,11 @@
+//import data from json
 import productsData from "../data/data.json";
-console.log(productsData);
 
 const productContainer = document.querySelector("#products-container");
 const categoryList = document.querySelector("#category-list");
 const brandList = document.querySelector("#brand-list");
 const sortList = document.querySelector("#sortList");
+
 // calculate discounted price and store it in data
 for (const product of productsData) {
   if (product.discount_percentage !== null) {
@@ -18,8 +19,6 @@ for (const product of productsData) {
   }
 }
 
-console.log(productsData);
-
 function displayProducts(datas) {
   if (datas.length > 0) {
     const productCardsfragment = new DocumentFragment();
@@ -67,7 +66,6 @@ function displayProducts(datas) {
 
       const sizeBoxEL = document.createElement("span");
       sizeBoxEL.classList.add("size-box");
-      console.log(productObj.sizes);
 
       const sizes = productObj.sizes;
       sizes.forEach((el) => {
@@ -97,7 +95,6 @@ function displayProducts(datas) {
       productCardsfragment.append(cardDivEl);
     });
 
-    console.dir(productCardsfragment);
     productContainer.innerHTML = "";
     productContainer.append(productCardsfragment);
   }
@@ -117,7 +114,7 @@ function setFilterOption() {
   const allBrand = productsData.map((product) => {
     return product.brand;
   });
-  console.log(allBrand);
+
   const brands = [
     ...allBrand.filter((category, index) => {
       return allBrand.indexOf(category) === index;
@@ -256,9 +253,9 @@ function filterbyBrand() {
   }
 }
 
-//dropdown
+//dropdown list
 const dropdownEl = document.querySelectorAll("#drop-down");
-console.log(dropdownEl);
+
 dropdownEl.forEach((el) => {
   el.addEventListener("click", (e) => {
     let siblingEL = el.nextElementSibling;
@@ -279,6 +276,7 @@ searchBarEl.addEventListener("input", (e) => {
   txtSearch(text);
 });
 
+//textsearch functionality
 function txtSearch(txt) {
   const searchText = txt.toLowerCase();
   const result = productsData.filter(
@@ -290,6 +288,20 @@ function txtSearch(txt) {
   displayProducts(result);
 }
 
-document.querySelector("#search-icon").addEventListener("click", () => {
+const searchIcon = document.querySelector("#search-icon");
+
+searchIcon.addEventListener("click", () => {
   searchBarEl.classList.toggle("hidden");
+  changeIcon(searchIcon, "fa-magnifying-glass", "fa-xmark");
 });
+
+// function to change Icon
+function changeIcon(element, targetedClass, changeClass) {
+  if (element.classList.contains(targetedClass)) {
+    element.classList.remove(targetedClass);
+    element.classList.add(changeClass);
+  } else {
+    element.classList.add(targetedClass);
+    element.classList.remove(changeClass);
+  }
+}
diff --git a/index.html b/index.html
@@ -9,8 +9,14 @@
       type="image/x-icon"
     />
     <title>vedha's online clothings</title>
+
+    <script
+      src="https://kit.fontawesome.com/6ae5c2f316.js"
+      crossorigin="anonymous"
+    ></script>
     <link rel="stylesheet" href="./assets/css/main.css" />
   </head>
+
   <body>
     <!-- header -->
     <header
@@ -23,46 +29,23 @@ <h2 class="font-rubik text-2xl pt-1">vedha's</h2>
       </div>
       <!-- navbar -->
       <nav class="flex items-center gap-6">
-        <div class="relative">
-          <a id="search-icon" class="cursor-pointer">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              id="search"
-              width="28"
-              height="28"
-              version="1.1"
-              viewBox="0 0 29 29"
-              xml:space="preserve"
-            >
-              <circle
-                cx="11.854"
-                cy="11.854"
-                r="9"
-                fill="none"
-                stroke="#000"
-                stroke-miterlimit="10"
-                stroke-width="2"
-              ></circle>
-              <path
-                fill="none"
-                stroke="#000"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-miterlimit="10"
-                stroke-width="2"
-                d="M18.451 18.451l7.695 7.695"
-              ></path>
-            </svg>
-          </a>
+        <!-- search  -->
+        <div class="relative text-2xl">
+          <i
+            class="fa-solid fa-magnifying-glass cursor-pointer"
+            id="search-icon"
+          ></i>
+
           <input
             id="search-bar"
             type="text"
-            class="bg-[#f8f8f8] border-[1.5px] px-4 py-2 w-[300px] rounded-md outline-none text-xs absolute right-10 -top-0.5"
+            class="bg-[#f8f8f8] hidden border-[1.5px] px-4 py-2 w-[300px] rounded-md outline-none text-xs absolute right-8 -top-0.5"
             placeholder="Search "
           />
         </div>
 
-        <a href="#">
+        <!-- profile -->
+        <a class="cursor-pointer text-xl">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 256 256"
@@ -91,7 +74,10 @@ <h2 class="font-rubik text-2xl pt-1">vedha's</h2>
             ></path>
           </svg>
         </a>
-        <a href="#">
+
+        <!-- cart -->
+
+        <a class="cursor-pointer text-xl">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="28"
@@ -106,6 +92,7 @@ <h2 class="font-rubik text-2xl pt-1">vedha's</h2>
         </a>
       </nav>
     </header>
+    <!-- main area for products list and filter page -->
     <main class="grid font-inter pt-[68px]">
       <!-- filter section -->
       <section