Succesful addition of products using Json

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

Hide file tree

Showing 6 changed files with 439 additions and 29 deletions.
diff --git a/Images/Commputer4.png → Images/Computer4.png b/Images/Commputer4.png → Images/Computer4.png
diff --git a/Images/Samsung Camera2.png → Images/SamCamera2.png b/Images/Samsung Camera2.png → Images/SamCamera2.png
diff --git a/app.js b/app.js
@@ -3,6 +3,7 @@ const D_image = document.querySelector(".DisplayImage")
 const IntroText = document.querySelector(".IntroText")
 const MenuBtn = document.querySelector("#MenuBtn")
 const Nav = document.querySelector("nav")
+const CardsHolder = document.querySelector(".CardsHolder")
 /// animations
 
 // anime js 1. Display Image
@@ -21,7 +22,7 @@ const Nav = document.querySelector("nav")
 ScrollReveal().reveal('.IntroText', { delay: 500});
 ScrollReveal().reveal('.HomeBtns', { delay: 700});
 ScrollReveal().reveal('.DisplayImage', { delay: 800});
-ScrollReveal().reveal('.ProductCard', { delay: 1000});
+ScrollReveal().reveal('.ProductCard', { delay: 2000});
 ScrollReveal().reveal('form', { delay: 1000});
 ScrollReveal().reveal('.SocialLinks', { delay: 1000});
 ScrollReveal().reveal('.Links', { delay: 700});
@@ -68,4 +69,41 @@ window.onclick = function(e){
 }
 // give header background on scrolling
 
-// window.onscroll = document.querySelector("header").classList.add("Scrolled")
+// window.onscroll = document.querySelector("header").classList.add("Scrolled")
+
+
+// json fetching
+
+GetProducts();
+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)
+        })
+    });
+
+}
+
+
+// create a product Card and appends to CardsHolder
+function CreateProductCard(Pimage, PName, PCompany, PMake, PCost){
+   let newCard = document.createElement("div")
+   newCard.classList = "ProductCard"
+   newCard.innerHTML = `
+        <img src="${Pimage}" alt="Loading Image">
+        <h3 class="ProductName">${PName}</h3>
+        <h3 class="ProductCompany">${PCompany}</h3>
+        <h3 class="ProductMake">${PMake}</h3>
+        <h3>Ksh. <span id="ProductCost"></span>${PCost}</h3>
+        <button class="btn" id="CartItem">Add to Cart</button> 
+    `;
+
+    CardsHolder.append(newCard);
+}
+
+// Displaying Products depending on the category the user wants
diff --git a/index.html b/index.html
@@ -70,41 +70,17 @@ <h1>Our Products</h1>
 
 
         <div class="CardsHolder">
-            <div class="ProductCard">
+            <!-- <div class="ProductCard">
                 <img src="./Images/Samsung Camera2.png" alt="Loading Image">
                 <h3 class="ProductName">Lorem ipsum dolor sit amet.</h3>
                 <h3 class="ProductCompany">Lorem, ipsum.</h3>
                 <h3 class="ProductMake">2012 Brand New</h3>
                 <h3>Ksh. <span id="ProductCost"></span>2300</h3>
                 <button class="btn" id="CartItem">Add to Cart</button>  
-            </div>
+            </div> -->
 
-            <div class="ProductCard">
-                <img src="./Images/Samsung Camera1.png" alt="Loading Image">
-                <h3 class="ProductName">Lorem ipsum dolor sit amet.</h3>
-                <h3 class="ProductCompany">Lorem, ipsum.</h3>
-                <h3 class="ProductMake">2012 Brand New</h3>
-                <h3>Ksh. <span id="ProductCost"></span>2300</h3>
-                <button class="btn" id="CartItem">Add to Cart</button>  
-            </div>
 
-            <div class="ProductCard">
-                <img src="./Images/Printer7.png" alt="Loading Image">
-                <h3 class="ProductName">Lorem ipsum dolor sit amet.</h3>
-                <h3 class="ProductCompany">Lorem, ipsum.</h3>
-                <h3 class="ProductMake">2012 Brand New</h3>
-                <h3>Ksh. <span id="ProductCost"></span>2300</h3>
-                <button class="btn" id="CartItem">Add to Cart</button>  
-            </div>
 
-            <div class="ProductCard">
-                <img src="./Images/ComputerA1.png" alt="Loading Image">
-                <h3 class="ProductName">Lorem ipsum dolor sit amet.</h3>
-                <h3 class="ProductCompany">Lorem, ipsum.</h3>
-                <h3 class="ProductMake">2012 Brand New</h3>
-                <h3>Ksh. <span id="ProductCost"></span>2300</h3>
-                <button class="btn" id="CartItem">Add to Cart</button>  
-            </div>
 
         </div>