From e2ab1de5c9004c4ea8481634457d196193a6e1d6 Mon Sep 17 00:00:00 2001 From: RichardKanai Date: Sat, 14 Aug 2021 17:31:17 +0300 Subject: [PATCH] Fixed Filter bug --- app.js | 51 +++++++++++++++++++------------ camera.json | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++ computer.json | 74 +++++++++++++++++++++++++++++++++++++++++++++ headphone.json | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++ phone.json | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++ printer.json | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 433 insertions(+), 20 deletions(-) create mode 100644 camera.json create mode 100644 computer.json create mode 100644 headphone.json create mode 100644 phone.json create mode 100644 printer.json diff --git a/app.js b/app.js index 7553ff4..01aa45c 100644 --- 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) + }) + }) -// }) \ No newline at end of file +} + diff --git a/camera.json b/camera.json new file mode 100644 index 0000000..9e2edc7 --- /dev/null +++ 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" + } +] \ No newline at end of file diff --git a/computer.json b/computer.json new file mode 100644 index 0000000..fc88eba --- /dev/null +++ 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" + } +] \ No newline at end of file diff --git a/headphone.json b/headphone.json new file mode 100644 index 0000000..f4386f9 --- /dev/null +++ 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" + } +] \ No newline at end of file diff --git a/phone.json b/phone.json new file mode 100644 index 0000000..fdd978e --- /dev/null +++ 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" + } +] \ No newline at end of file diff --git a/printer.json b/printer.json new file mode 100644 index 0000000..68436f2 --- /dev/null +++ b/printer.json @@ -0,0 +1,82 @@ +[ + { + "name":"ZP Colored Printer", + "image":"Images/Printer1.png", + "company": "ZP", + "make": "Colored Photo Printer", + "cost": "10000", + "category":"Printer" + }, + { + "name":"ZP Printer", + "image":"Images/Printer2.png", + "company": "ZP", + "make": "B&W Printer", + "cost": "7900", + "category":"Printer" + }, + { + "name":"QP BLue Laser Printer", + "image":"Images/Printer3.png", + "company": "QP", + "make": "Coloured Printer", + "cost": "11900", + "category":"Printer" + }, + { + "name":"AB Printer", + "image":"Images/Printer4.png", + "company": "AB", + "make": "B&W Printer", + "cost": "6400", + "category":"Printer" + }, + { + "name":"ZPB Laser Printer", + "image":"Images/Printer5.png", + "company": "ZP", + "make": "Brand 091 Laser Printer", + "cost": "8900", + "category":"Printer" + }, + { + "name":"ZP Black Printer", + "image":"Images/Printer6.png", + "company": "ZP", + "make": "ZPH1 Printer", + "cost": "7900", + "category":"Printer" + }, + { + "name":"ZP Office Printer", + "image":"Images/Printer7.png", + "company": "ZP", + "make": "Multipurpose Printer", + "cost": "17000", + "category":"Printer" + }, + { + "name":"Canon Photo Printer", + "image":"Images/Printer8.png", + "company": "ZP", + "make": "CNH2 Photo Printer", + "cost": "17800", + "category":"Printer" + }, + { + "name":"Canon office Printer", + "image":"Images/Printer9.png", + "company": "ZP", + "make": "CNH2 Office Printer", + "cost": "19900", + "category":"Printer" + }, + { + "name":"Canon-B01 Photo Printer", + "image":"Images/Printer10.png", + "company": "ZP", + "make": "CNH1B01 Photo Printer", + "cost": "9900", + "category":"Printer" + } +] \ No newline at end of file