Photos fix 1

richardkanai123 · Aug 13, 2021 · 4a6ec38 · 4a6ec38
1 parent 9250970
commit 4a6ec38
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 59 deletions.
diff --git a/app.js b/app.js
@@ -4,8 +4,8 @@ const IntroText = document.querySelector(".IntroText")
 const MenuBtn = document.querySelector("#MenuBtn")
 const Nav = document.querySelector("nav")
 const CardsHolder = document.querySelector(".CardsHolder")
+const ProductsCategory = document.querySelector("#ProductsCategory")
 /// animations
-
 // anime js 1. Display Image
 // anime({
 //     targets: '.DisplayImage',
@@ -79,14 +79,11 @@ function GetProducts(){
     fetch("./products.json")
     .then(response => response.json())
     .then(data =>{
-        console.log(data);
         data.map(data=>{
-            console.log(data.name);
             // create card for each data 
             CreateProductCard(data.image, data.name, data.company, data.make, data.cost)
         })
     });
-
 }
 
 
@@ -106,4 +103,25 @@ function CreateProductCard(Pimage, PName, PCompany, PMake, PCost){
     CardsHolder.append(newCard);
 }
 
-// Displaying Products depending on the category the user wants
+// 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)
+//                 // })
+//             }   
+//         })
+
+//     });
+
+// })
diff --git a/index.html b/index.html
@@ -60,11 +60,11 @@ <h1>Our Products</h1>
             <label for="ProductsCategory">Select Category</label>
             <select name="ProductsCategory" id="ProductsCategory">
                 <option value="All" selected>All</option>
-                <option value="Phones">Phones</option>
-                <option value="Headphones">Headphones</option>
-                <option value="Cameras">Cameras</option>
-                <option value="Computers">Computers</option>
-                <option value="Printers">Printers</option>
+                <option value="Phone">Phones</option>
+                <option value="Headphone">Headphones</option>
+                <option value="Camera">Cameras</option>
+                <option value="Computer">Computers</option>
+                <option value="Printer">Printers</option>
             </select>
         </div>