Fixed Filter bug

richardkanai123 · Aug 14, 2021 · e2ab1de · e2ab1de
1 parent 05833a1
commit e2ab1de
Show file tree

Hide file tree

Showing 6 changed files with 433 additions and 20 deletions.
diff --git a/app.js b/app.js
@@ -65,6 +65,8 @@ window.onclick = function(e){
     let NavClass = e.target.parentElement.classList
     if(NavClass == "Show"){
         Nav.classList.toggle('Show'); 
+}else{
+    console.log(" ");
 }
 }
 // give header background on scrolling
@@ -103,25 +105,34 @@ function CreateProductCard(Pimage, PName, PCompany, PMake, PCost){
     CardsHolder.append(newCard);
 }
 
+
+
 // Displaying Products depending on the category the user wants
-// ProductsCategory.addEventListener('change', ()=>{
-//     console.log(ProductsCategory.value);
-//     let categoryChoice = ProductsCategory.value;
-//         fetch("./products.json")
-//         .then(response => response.json())
-//         .then(data =>{
-//             data.map(data=>{
-//             if(data.category === categoryChoice){
-//                 CardsHolder.innerHTML = "";
-//                 let FilteredData = data;
-//                 console.table(FilteredData);
-//                 // FilteredData.map(FilteredData=>{
-//                 //     // create card for each data 
-//                 //     CreateProductCard(FilteredData.image, FilteredData.name, FilteredData.company, FilteredData.make, FilteredData.cost)
-//                 // })
-//             }   
-//         })
-
-//     });
+ProductsCategory.addEventListener('change', ()=>{
+    CardsHolder.innerHTML = "";
+    if((ProductsCategory.value) === "All"){
+        GetProducts();
+    }else{
+    SortByCategory(ProductsCategory.value)
+    }
+
+    // CardsHolder.style.height = "unset";
+})
+
+
+// CreateCardforArray(SortByCategory("Computer"))
+
+function SortByCategory(userChoice){
+    let source = `./${userChoice}.json`
+    console.log(source);
+    fetch(source)
+    .then(response => response.json())
+    .then(data =>{
+        console.log(data);
+        data.map(data=>{
+            CreateProductCard(data.image, data.name, data.company, data.make, data.cost)
+        })
+    })
 
-// })
+}
+
diff --git a/camera.json b/camera.json
@@ -0,0 +1,82 @@
+[
+    {
+        "name":"Nikon D56 Camera",
+        "image":"Images/Camera1.png",
+        "company": "Camera",
+        "make": "CM001 Brand New",
+        "cost": "20000",
+        "category":"Camera"
+    },
+    {
+        "name":"Canon ED6s ",
+        "image":"Images/Canon Camera1.png",
+        "company": "Canon",
+        "make": "EDS 5500 Brand New",
+        "cost": "60000",
+        "category":"Camera"
+    },
+    {
+        "name":"Sony 4K",
+        "image":"Images/HdCamera1.png",
+        "company": "Sony",
+        "make": "HD4K Brand New",
+        "cost": "90000",
+        "category":"Camera"
+    },
+    {
+        "name":"Canon 4K",
+        "image":"Images/HdCamera2 Canon.png",
+        "company": "Canon",
+        "make": "4K Brand New",
+        "cost": "97000",
+        "category":"Camera"
+    },
+    {
+        "name":"Nikon Camera",
+        "image":"Images/Nikon Camera1.png",
+        "company": "Nikon",
+        "make": "D5600 Brand New",
+        "cost": "45000",
+        "category":"Camera"
+    },
+    {
+        "name":"NikonD67 Camera",
+        "image":"Images/Nikon Camera2.png",
+        "company": "Nikon",
+        "make": " Brand New",
+        "cost": "37000",
+        "category":"Camera"
+    },
+    {
+        "name":"Portable Sony Camera",
+        "image":"Images/PortableCamera1.png",
+        "company": "Sony",
+        "make": "4X Portable Brand New",
+        "cost": "17000",
+        "category":"Camera"
+    },
+    {
+        "name":"Samsung Shoot",
+        "image":"Images/Samsung Camera1.png",
+        "company": "Samsung",
+        "make": "35ES Brand New",
+        "cost": "32000",
+        "category":"Camera"
+    },
+    {
+        "name":"Sony Full HD",
+        "image":"Images/SonyCamera1.png",
+        "company": "Sony",
+        "make": "EY1 Full HD Brand New",
+        "cost": "47770",
+        "category":"Camera"
+    },
+    {
+        "name":"Canon2 Camera",
+        "image":"Images/Nikon Camera2.png",
+        "company": "Canon",
+        "make": " Brand New",
+        "cost": "37000",
+        "category":"Camera"
+    }
+]
diff --git a/computer.json b/computer.json
@@ -0,0 +1,74 @@
+[
+    {
+        "name":"Apple Desktop",
+        "image":"Images/ComputerA1.png",
+        "company": "Apple",
+        "make": "Desktop Monitor",
+        "cost": "66900",
+        "category":"Computer"
+    },
+    {
+        "name":"Apple MiniDesktop",
+        "image":"Images/ComputerA2.png",
+        "company": "Apple",
+        "make": "Desktop Monitor",
+        "cost": "60900",
+        "category":"Computer"
+    },
+    {
+        "name":"Mackbook",
+        "image":"Images/ComputerA3.png",
+        "company": "Apple",
+        "make": "Mackbook AZ1",
+        "cost": "89900",
+        "category":"Computer"
+    },
+    {
+        "name":"Abus Gaming Computer",
+        "image":"Images/ComputerG1.png",
+        "company": "Abus",
+        "make": "8th Gen Blue Brand",
+        "cost": "55500",
+        "category":"Computer"
+    },
+    {
+        "name":"IGG Gaming Computer",
+        "image":"Images/ComputerG2.png",
+        "company": "IGG",
+        "make": "8th Gen Red Brand",
+        "cost": "56900",
+        "category":"Computer"
+    },
+    {
+        "name":"RichTonics Gaming Computer",
+        "image":"Images/ComputerG3.png",
+        "company": "Richtonics",
+        "make": "6th Gen Gaming Computer",
+        "cost": "44999",
+        "category":"Computer"
+    },
+    {
+        "name":"RichTonicsHC Gaming Computer",
+        "image":"Images/ComputerG4.png",
+        "company": "Richtonics",
+        "make": "6th Gen GamingHC Computer",
+        "cost": "47999",
+        "category":"Computer"
+    },
+    {
+        "name":"RichTonicsRD Gaming Computer",
+        "image":"Images/ComputerG5.png",
+        "company": "Richtonics",
+        "make": "6th Gen Red Gaming Computer",
+        "cost": "41999",
+        "category":"Computer"
+    },
+    {
+        "name":"RichTonics Water Cooled Computer",
+        "image":"Images/ComputerG6.png",
+        "company": "Richtonics",
+        "make": "9th Gen UltraGaming Computer",
+        "cost": "74999",
+        "category":"Computer"
+    }
+]
diff --git a/headphone.json b/headphone.json
@@ -0,0 +1,82 @@
+[
+    {
+        "name":"RichTonics White",
+        "image":"Images/Headphone1.png",
+        "company": "RichTonics",
+        "make": " White E1 ",
+        "cost": "1500",
+        "category":"Headphone"
+    },
+    {
+        "name":"RichTonics black with Mic",
+        "image":"Images/Headphone2.png",
+        "company": "RichTonics",
+        "make": " Black 001 Brand New",
+        "cost": "1700",
+        "category":"Headphone"
+    },
+    {
+        "name":"Bull Reds",
+        "image":"Images/Headphone3.png",
+        "company": "Bull",
+        "make": "Red,Brand New",
+        "cost": "2000",
+        "category":"Headphone"
+    },
+    {
+        "name":"Bull Yellows",
+        "image":"Images/Headphone4.png",
+        "company": "Bull",
+        "make": "Yellow Brand New",
+        "cost": "2000",
+        "category":"Headphone"
+    },
+    {
+        "name":"Bull White Super",
+        "image":"Images/Headphone5.png",
+        "company": "Bull",
+        "make": "White Brand",
+        "cost": "2100",
+        "category":"Headphone"
+    },
+    {
+        "name":"Rich Blues",
+        "image":"Images/Headphone6.png",
+        "company": "Bull",
+        "make": "Blue 03S Brand New",
+        "cost": "900",
+        "category":"Headphone"
+    },
+    {
+        "name":"Black Fire ",
+        "image":"Images/Headphone7.png",
+        "company": "Bull",
+        "make": "Black Brand New",
+        "cost": "2900",
+        "category":"Headphone"
+    },
+    {
+        "name":"Girly Cherrys",
+        "image":"Images/Headphone8.png",
+        "company": "Bull",
+        "make": "Pink Brand New",
+        "cost": "2000",
+        "category":"Headphone"
+    },
+    {
+        "name":"Fer Racers Headphones",
+        "image":"Images/Headphone9.png",
+        "company": "Bull",
+        "make": "Red Brand New",
+        "cost": "5000",
+        "category":"Headphone"
+    },
+    {
+        "name":"OrangeRiches with Mic",
+        "image":"Images/Headphone10.png",
+        "company": "Bull",
+        "make": "Orange Brand New",
+        "cost": "7000",
+        "category":"Headphone"
+    }
+]
diff --git a/phone.json b/phone.json
@@ -0,0 +1,82 @@
+[
+    {
+        "name":"Samsung S10 2019",
+        "image":"Images/Phone1.png",
+        "company": "Samsung",
+        "make": "S10 Black Brand New",
+        "cost": "20000",
+        "category":"Phone"
+    },
+    {
+        "name":"Iphane5 mini",
+        "image":"Images/Phone2.png",
+        "company": "Apple",
+        "make": "i5 mini Black Brand New",
+        "cost": "15000",
+        "category":"Phone"
+    },
+    {
+        "name":"Iphane 5",
+        "image":"Images/Phone3.png",
+        "company": "Apple",
+        "make": "i5 Black Brand New",
+        "cost": "20000",
+        "category":"Phone"
+    },
+    {
+        "name":"Iphane 6",
+        "image":"Images/Phone4.png",
+        "company": "Apple",
+        "make": "i6 Black Brand New",
+        "cost": "23000",
+        "category":"Phone"
+    },
+    {
+        "name":"iphane 5 Silk",
+        "image":"Images/Phone5.png",
+        "company": "Apple",
+        "make": "Silver Grey Brand New",
+        "cost": "25000",
+        "category":"Phone"
+    },
+    {
+        "name":"iphane 5 White",
+        "image":"Images/Phone6.png",
+        "company": "Apple",
+        "make": "White-black Brand New",
+        "cost": "25000",
+        "category":"Phone"
+    },
+    {
+        "name":"iphane 7",
+        "image":"Images/Phone7.png",
+        "company": "Apple",
+        "make": "Pink-White Brand New",
+        "cost": "27000",
+        "category":"Phone"
+    },
+    {
+        "name":"iphane8 mini",
+        "image":"Images/Phone8.png",
+        "company": "Apple",
+        "make": "red, blue,white Brands",
+        "cost": "25000",
+        "category":"Phone"
+    },
+    {
+        "name":"iphoneX",
+        "image":"Images/Phone9.png",
+        "company": "Apple",
+        "make": "Black,Blue,Grey White Brands",
+        "cost": "35000",
+        "category":"Phone"
+    },
+    {
+        "name":"iphone9 mini",
+        "image":"Images/Phone10.png",
+        "company": "Apple",
+        "make": "White Brand New",
+        "cost": "35000",
+        "category":"Phone"
+    }
+]