Merge pull request #1467 from Ansh101112/nui

plus page added
arghadipmanna101 · Jul 25, 2024 · e97b6b7 · e97b6b7
2 parents 7b36608 + 245076a
commit e97b6b7
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 40 deletions.
diff --git a/plus/index.html b/plus/index.html
@@ -1,23 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#2874F0" id="themeColor" />
-    <title>
-        Flipkart | Online Shopping Site for Mobiles, Electronics, Furniture,
-        Grocery, Lifestyle, Books &amp; More. Best Offers!
-    </title>
+    <title>Flipkart Plus | Membership Benefits</title>
     <link rel="icon" type="image/x-icon" href="../img/flipkart_lite.png" />
     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
     <link rel="stylesheet" href="plus.css" />
 </head>
-
 <body>
     <header id="header-plus" class="text-center text-secondary fs-4">
-        This is Header
+        Flipkart Plus Membership
     </header>
 
     <section>
@@ -128,38 +123,7 @@ <h3 class="text-center">Welcome to Flipkart Plus Zone</h3>
         </div>
 
         <div class="container">
-            <div class="product-list">
-                <div class="product">
-                    <img src="../img/phone-6.webp" alt="Product Image" />
-                    <div class="name">Moto G</div>
-                    <div class="price">₹9999</div>
-                </div>
-                <div class="product">
-                    <img src="../img/phone-2.webp" alt="Product Image" />
-                    <div class="name">Poco M6</div>
-                    <div class="price">₹11,999</div>
-                </div>
-                <div class="product">
-                    <img src="../img/phone-3.webp" alt="Product Image" />
-                    <div class="name">Poco C65</div>
-                    <div class="price">₹21,999</div>
-                </div>
-                <div class="product">
-                    <img src="../img/phone-5.webp" alt="Product Image" />
-                    <div class="name">Moto A14</div>
-                    <div class="price">₹19,999</div>
-                </div>
-                <div class="product">
-                    <img src="../img/phon-4.webp" alt="Product Image" />
-                    <div class="name">Poco C65</div>
-                    <div class="price">₹21,999</div>
-                </div>
-                <div class="product">
-                    <img src="../img/phone-6.webp" alt="Product Image" />
-                    <div class="name">Moto G</div>
-                    <div class="price">₹9999</div>
-                </div>
-            </div>
+            <div class="product-list" id="productList"></div>
         </div>
     </section>
 
@@ -168,5 +132,4 @@ <h3 class="text-center">Welcome to Flipkart Plus Zone</h3>
     <script src="../js/bootstrap.bundle.min.js"></script>
     <script src="plus.js"></script>
 </body>
-
 </html>
diff --git a/plus/plus.js b/plus/plus.js
@@ -51,6 +51,25 @@ let btmText = `
 
 document.getElementById("btmTxtP").innerHTML = btmText;
 
+document.addEventListener("DOMContentLoaded", () => {
+  fetch("products.json")
+      .then(response => response.json())
+      .then(products => {
+          const productList = document.getElementById("productList");
+          products.forEach(product => {
+              const productDiv = document.createElement("div");
+              productDiv.className = "product";
+              productDiv.innerHTML = `
+                  <img src="${product.image}" alt="Product Image" />
+                  <div class="name">${product.name}</div>
+                  <div class="price">${product.price}</div>
+              `;
+              productList.appendChild(productDiv);
+          });
+      })
+      .catch(error => console.error("Error loading products:", error));
+});
+
 // fetch header footer
 
 document.addEventListener("DOMContentLoaded", () => {

diff --git a/plus/products.json b/plus/products.json
@@ -0,0 +1,80 @@
+[
+    {
+        "name": "Moto G",
+        "price": "₹9999",
+        "image": "../img/phone-6.webp",
+        "category": "Mobile"
+    },
+    {
+        "name": "Poco M6",
+        "price": "₹11,999",
+        "image": "../img/phone-2.webp",
+        "category": "Mobile"
+    },
+    {
+        "name": "Poco C65",
+        "price": "₹21,999",
+        "image": "../img/phone-3.webp",
+        "category": "Mobile"
+    },
+    {
+        "name": "Moto A14",
+        "price": "₹19,999",
+        "image": "../img/phone-5.webp",
+        "category": "Mobile"
+    },
+    {
+        "name": "Samsung Galaxy",
+        "price": "₹15,999",
+        "image": "https://fdn2.gsmarena.com/vv/pics/samsung/samsung-galaxy-s22-ultra-5g-2.jpg",
+        "category": "Mobile"
+    },
+    {
+        "name": "iPhone 12",
+        "price": "₹59,999",
+        "image": "https://fdn2.gsmarena.com/vv/pics/apple/apple-iphone-12-r1.jpg",
+        "category": "Mobile"
+    },
+    {
+        "name": "Dell Inspiron 15",
+        "price": "₹45,999",
+        "image": "https://i.dell.com/is/image/DellContent/content/dam/ss2/product-images/dell-client-products/notebooks/inspiron-notebooks/15-3530-intel/media-gallery/silver-plastic/notebook-inspiron-15-3530-nt-plastic-usbc-silver-gallery-4.psd?fmt=pjpg&pscan=auto&scl=1&wid=4582&hei=2810&qlt=100,1&resMode=sharp2&size=4582,2810&chrss=full&imwidth=5000",
+        "category": "Laptop"
+    },
+    {
+        "name": "HP Pavilion x360",
+        "price": "₹55,999",
+        "image": "https://m.media-amazon.com/images/I/71Njhmxnc5L.jpg",
+        "category": "Laptop"
+    },
+    {
+        "name": "Apple MacBook Air",
+        "price": "₹92,999",
+        "image": "https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/mba13-midnight-select-202402?wid=904&hei=840&fmt=jpeg&qlt=90&.v=1708367688034",
+        "category": "Laptop"
+    },
+    {
+        "name": "Logitech MX Master 3",
+        "price": "₹8,499",
+        "image": "https://m.media-amazon.com/images/I/613a-3jtieL.jpg",
+        "category": "Accessory"
+    },
+    {
+        "name": "Sony WH-1000XM4",
+        "price": "₹29,990",
+        "image": "https://www.sony.co.in/image/5d02da5df552836db894cead8a68f5f3?fmt=pjpeg&wid=330&bgcolor=FFFFFF&bgc=FFFFFF",
+        "category": "Accessory"
+    },
+    {
+        "name": "Philips Air Fryer",
+        "price": "₹12,999",
+        "image": "https://m.media-amazon.com/images/I/61uCr9G6hIL._AC_UF894,1000_QL80_.jpg",
+        "category": "Home Appliance"
+    },
+    {
+        "name": "Samsung 32' Smart TV",
+        "price": "₹22,999",
+        "image": "https://images.samsung.com/is/image/samsung/p6pim/in/ua32t4340akxxl/gallery/in-hd-tv-ua32t4340akxxl-front-black-537470101?$650_519_PNG$",
+        "category": "Home Appliance"
+    }
+]