adding e-commerce folder

ganji-nitin · Aug 13, 2024 · e739a6f · e739a6f
commit e739a6f
Show file tree

Hide file tree

Showing 38 changed files with 884 additions and 0 deletions.
diff --git a/Assests/189-1024x683.jpg b/Assests/189-1024x683.jpg
diff --git a/Assests/289006.jpg b/Assests/289006.jpg
diff --git a/Assests/360_F_21708280_RFKz4O7ImQluB9FgX2mUYFUNDmlLokX6.jpg b/Assests/360_F_21708280_RFKz4O7ImQluB9FgX2mUYFUNDmlLokX6.jpg
diff --git a/Assests/360_F_644520910_0qAcxInM49OxJaDZ4lhmh3TmHEIj4sOr.jpg b/Assests/360_F_644520910_0qAcxInM49OxJaDZ4lhmh3TmHEIj4sOr.jpg
diff --git a/Assests/360_F_714662823_hUk7Oo5tZ3YAfWSgI0c3Bbgcfv74rglT.jpg b/Assests/360_F_714662823_hUk7Oo5tZ3YAfWSgI0c3Bbgcfv74rglT.jpg
diff --git a/Assests/360_F_741090978_Oa4o8aEEKX9NPPZAhRHQCprzD29VwVen.jpg b/Assests/360_F_741090978_Oa4o8aEEKX9NPPZAhRHQCprzD29VwVen.jpg
diff --git a/Assests/360_F_857629748_7qquGKNkIwwK4Rb1tUHey0JBaUnmZHfs.jpg b/Assests/360_F_857629748_7qquGKNkIwwK4Rb1tUHey0JBaUnmZHfs.jpg
diff --git a/Assests/BidO2k.gif b/Assests/BidO2k.gif
diff --git a/Assests/ada208e7b249e0b33ed6168064c13dc8e09a0a0f.jpg b/Assests/ada208e7b249e0b33ed6168064c13dc8e09a0a0f.jpg
diff --git a/Assests/background-images-for-login-form-8.jpg b/Assests/background-images-for-login-form-8.jpg
diff --git a/Assests/computer-connection-data-digital.jpg b/Assests/computer-connection-data-digital.jpg
diff --git a/Assests/ecommercelogin.avif b/Assests/ecommercelogin.avif
diff --git a/Assests/extensive-ecommerce-banner.jpg b/Assests/extensive-ecommerce-banner.jpg
diff --git a/Assests/get-asphalt-9-legends-on-pc-heres-what-you-need-to-do.jpg b/Assests/get-asphalt-9-legends-on-pc-heres-what-you-need-to-do.jpg
diff --git a/Assests/internet-digital-security-technology-concept-260nw-1932256898.webp b/Assests/internet-digital-security-technology-concept-260nw-1932256898.webp
diff --git a/Assests/istockphoto-1174989484-170667a.webp b/Assests/istockphoto-1174989484-170667a.webp
diff --git a/Assests/login_background.jpg b/Assests/login_background.jpg
diff --git a/Assests/logo.png b/Assests/logo.png
diff --git a/...ock-security-concept-on-circuit-technology-background-picture-image_1170805.jpg b/...ock-security-concept-on-circuit-technology-background-picture-image_1170805.jpg
diff --git a/Assests/register_background.webp b/Assests/register_background.webp
diff --git a/Assests/welcomepage.png b/Assests/welcomepage.png
diff --git a/Assests/windows-10-abstract-5k-h7.jpg b/Assests/windows-10-abstract-5k-h7.jpg
diff --git a/Assests/wp2939920.webp b/Assests/wp2939920.webp
diff --git a/cart.html b/cart.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>cart</title>
+</head>
+<body>
+    <section id="cart_items">
+        <h1>Cart is Empty</h1>
+        <p>Total Price: Rs. <span>0</span></p>
+    </section>
+    <!-- <script src="./home1.js"></script> -->
+</body>
+</html>
diff --git a/home.css b/home.css
@@ -0,0 +1,81 @@
+*{
+    margin: 0;
+    box-sizing: border-box;
+}
+
+nav{
+    height: 100px;
+    width: 100vw;
+    display: flex;
+    background-color: black;
+}
+#welcome_logo{
+    flex-basis: 85%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+    border-right: 2px solid white;
+}
+#logo{
+    height: 80px;
+    width: 80px;
+}
+#cart{
+    font-size: 28px;
+    color: white;
+}
+#welcome_user{
+    flex-basis: 15%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 5px;
+}
+#welcome1{
+    font-size: 20px;
+    color: white;
+}
+#welcome2{
+    font-size: 18px;
+    margin-left: 10px;
+    color: white;
+}
+#products{
+    width: 100vw;
+    display: grid;
+    grid-template-columns: 25% 25% 25% 25%;
+    grid-template-rows: 550px 550px 650px 730px 600px;
+}
+#products img{
+    height: 200px;
+    width: 200px;
+}
+.border{
+    border: 1px solid black;
+    width: 100vw/4;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    padding: 20px;
+    text-align: justify;
+    gap: 10px;
+    border-radius: 20px;
+}
+.border h4{
+    text-transform: capitalize;
+}
+.items{
+    flex-direction: column;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+#add{
+    height: 25px;
+    color: white;
+    background-color: black;
+    border-radius: 20px;
+}
diff --git a/home.html b/home.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home Page</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="Home.css">
+</head>
+<body>
+    <nav>
+        <section id="welcome_logo">
+            <img src="./Assests/logo.png" alt="" id="logo">
+            <i class="fa-solid fa-cart-shopping" id="cart"></i>
+        </section>
+        <section id="welcome_user">
+            <p id="welcome1">WELCOME</p>
+            <div>
+                <i class="fa-regular fa-user" id="user" style="color: white;"></i>
+                <span id="welcome2">NITIN</span>
+            </div>
+        </section>
+    </nav>
+
+    <main id="products">
+        <section class="border"><aside id="product1" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product2" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product3" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product4" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product5" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product6" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product7" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product8" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product9" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product10" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product11" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product12" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product13" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product14" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product15" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product16" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product17" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product18" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product19" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+        <section class="border"><aside id="product20" class="items"></aside><aside><input type="submit" value="Add to cart" id="add"></aside></section>
+    </main>
+
+    <script src="home.js"></script>
+</body>
+</html>
diff --git a/home.js b/home.js
@@ -0,0 +1,217 @@
+// let fetchData = async ()=>{
+//     let data = await fetch("https://fakestoreapi.com/products")
+//     console.log(data)
+//     let output = await data.json()
+//     console.log(output)
+//     console.log(output[0])
+// }
+// fetchData()
+
+
+fetch ("https://fakestoreapi.com/products")
+.then((res)=>{
+    res.json()
+    .then((Output)=>{
+        let finalOutput1 = Output[0]
+        let finalOutput2 = Output[1]
+        let finalOutput3 = Output[2]
+        let finalOutput4 = Output[3]
+        let finalOutput5 = Output[4]
+        let finalOutput6 = Output[5]
+        let finalOutput7 = Output[6]
+        let finalOutput8 = Output[7]
+        let finalOutput9 = Output[8]
+        let finalOutput10 = Output[9]
+        let finalOutput11 = Output[10]
+        let finalOutput12 = Output[11]
+        let finalOutput13 = Output[12]
+        let finalOutput14 = Output[13]
+        let finalOutput15 = Output[14]
+        let finalOutput16 = Output[15]
+        let finalOutput17 = Output[16]
+        let finalOutput18 = Output[17]
+        let finalOutput19 = Output[18]
+        let finalOutput20 = Output[19]
+        // console.log(Output)
+        let product1 = document.getElementById("product1")
+        product1.innerHTML=`
+        <h1>Product-ID: ${finalOutput1.id}</h1>
+            <h4>Category: ${finalOutput1.category}</h4>
+            <h4>Product Name: ${finalOutput1.title}</h4>
+            <img src="${finalOutput1.image}">
+            <h2> Rs. ${finalOutput1.price}</h2>
+            <p>Description: ${finalOutput1.description}</p>
+        `
+        let product2 = document.getElementById("product2")
+        product2.innerHTML=`
+        <h1>Product-ID: ${finalOutput2.id}</h1>
+            <h4>Category: ${finalOutput2.category}</h4>
+            <h4>Product Name: ${finalOutput2.title}</h4>
+            <img src="${finalOutput2.image}">
+            <h2> Rs. ${finalOutput2.price}</h2>
+            <p>Description: ${finalOutput2.description}</p>
+        `
+        let product3 = document.getElementById("product3")
+        product3.innerHTML=`
+        <h1>Product-ID: ${finalOutput3.id}</h1>
+            <h4>Category: ${finalOutput3.category}</h4>
+            <h4>Product Name: ${finalOutput3.title}</h4>
+            <img src="${finalOutput3.image}">
+            <h2> Rs. ${finalOutput3.price}</h2>
+            <p>Description: ${finalOutput3.description}</p>
+        `
+        let product4 = document.getElementById("product4")
+        product4.innerHTML=`
+        <h1>Product-ID: ${finalOutput4.id}</h1>
+            <h4>Category: ${finalOutput4.category}</h4>
+            <h4>Product Name: ${finalOutput4.title}</h4>
+            <img src="${finalOutput4.image}">
+            <h2> Rs. ${finalOutput4.price}</h2>
+            <p>Description: ${finalOutput4.description}</p>
+        `
+        let product5 = document.getElementById("product5")
+        product5.innerHTML=`
+        <h1>Product-ID: ${finalOutput5.id}</h1>
+            <h4>Category: ${finalOutput5.category}</h4>
+            <h4>Product Name: ${finalOutput5.title}</h4>
+            <img src="${finalOutput5.image}">
+            <h2> Rs. ${finalOutput5.price}</h2>
+            <p>Description: ${finalOutput5.description}</p>
+        `
+        let product6 = document.getElementById("product6")
+        product6.innerHTML=`
+        <h1>Product-ID: ${finalOutput6.id}</h1>
+            <h4>Category: ${finalOutput6.category}</h4>
+            <h4>Product Name: ${finalOutput6.title}</h4>
+            <img src="${finalOutput6.image}">
+            <h2> Rs. ${finalOutput6.price}</h2>
+            <p>Description: ${finalOutput6.description}</p>
+        `
+        let product7 = document.getElementById("product7")
+        product7.innerHTML=`
+        <h1>Product-ID: ${finalOutput7.id}</h1>
+            <h4>Category: ${finalOutput7.category}</h4>
+            <h4>Product Name: ${finalOutput7.title}</h4>
+            <img src="${finalOutput7.image}">
+            <h2> Rs. ${finalOutput7.price}</h2>
+            <p>Description: ${finalOutput7.description}</p>
+        `
+        let product8 = document.getElementById("product8")
+        product8.innerHTML=`
+        <h1>Product-ID: ${finalOutput8.id}</h1>
+            <h4>Category: ${finalOutput8.category}</h4>
+            <h4>Product Name: ${finalOutput8.title}</h4>
+            <img src="${finalOutput8.image}">
+            <h2> Rs. ${finalOutput8.price}</h2>
+            <p>Description: ${finalOutput8.description}</p>
+        `
+        let product9 = document.getElementById("product9")
+        product9.innerHTML=`
+        <h1>Product-ID: ${finalOutput9.id}</h1>
+            <h4>Category: ${finalOutput9.category}</h4>
+            <h4>Product Name: ${finalOutput9.title}</h4>
+            <img src="${finalOutput9.image}">
+            <h2> Rs. ${finalOutput9.price}</h2>
+            <p>Description: ${finalOutput9.description}</p>
+        `
+        let product10 = document.getElementById("product10")
+        product10.innerHTML=`
+        <h1>Product-ID: ${finalOutput10.id}</h1>
+            <h4>Category: ${finalOutput10.category}</h4>
+            <h4>Product Name: ${finalOutput10.title}</h4>
+            <img src="${finalOutput10.image}">
+            <h2> Rs. ${finalOutput10.price}</h2>
+            <p>Description: ${finalOutput10.description}</p>
+        `
+        let product11 = document.getElementById("product11")
+        product11.innerHTML=`
+        <h1>Product-ID: ${finalOutput11.id}</h1>
+            <h4>Category: ${finalOutput11.category}</h4>
+            <h4>Product Name: ${finalOutput11.title}</h4>
+            <img src="${finalOutput11.image}">
+            <h2> Rs. ${finalOutput11.price}</h2>
+            <p>Description: ${finalOutput11.description}</p>
+        `
+        let product12 = document.getElementById("product12")
+        product12.innerHTML=`
+        <h1>Product-ID: ${finalOutput12.id}</h1>
+            <h4>Category: ${finalOutput12.category}</h4>
+            <h4>Product Name: ${finalOutput12.title}</h4>
+            <img src="${finalOutput12.image}">
+            <h2> Rs. ${finalOutput12.price}</h2>
+            <p>Description: ${finalOutput12.description}</p>
+        `
+        let product13 = document.getElementById("product13")
+        product13.innerHTML=`
+        <h1>Product-ID: ${finalOutput13.id}</h1>
+            <h4>Category: ${finalOutput13.category}</h4>
+            <h4>Product Name: ${finalOutput13.title}</h4>
+            <img src="${finalOutput13.image}">
+            <h2> Rs. ${finalOutput13.price}</h2>
+            <p>Description: ${finalOutput13.description}</p>
+        `
+        let product14 = document.getElementById("product14")
+        product14.innerHTML=`
+        <h1>Product-ID: ${finalOutput14.id}</h1>
+            <h4>Category: ${finalOutput14.category}</h4>
+            <h4>Product Name: ${finalOutput14.title}</h4>
+            <img src="${finalOutput14.image}">
+            <h2> Rs. ${finalOutput14.price}</h2>
+            <p>Description: ${finalOutput14.description}</p>
+        `
+        let product15 = document.getElementById("product15")
+        product15.innerHTML=`
+        <h1>Product-ID: ${finalOutput15.id}</h1>
+            <h4>Category: ${finalOutput15.category}</h4>
+            <h4>Product Name: ${finalOutput15.title}</h4>
+            <img src="${finalOutput15.image}">
+            <h2> Rs. ${finalOutput15.price}</h2>
+            <p>Description: ${finalOutput15.description}</p>
+        `
+        let product16 = document.getElementById("product16")
+        product16.innerHTML=`
+        <h1>Product-ID: ${finalOutput16.id}</h1>
+            <h4>Category: ${finalOutput16.category}</h4>
+            <h4>Product Name: ${finalOutput16.title}</h4>
+            <img src="${finalOutput16.image}">
+            <h2> Rs. ${finalOutput16.price}</h2>
+            <p>Description: ${finalOutput16.description}</p>
+        `
+        let product17 = document.getElementById("product17")
+        product17.innerHTML=`
+        <h1>Product-ID: ${finalOutput17.id}</h1>
+            <h4>Category: ${finalOutput17.category}</h4>
+            <h4>Product Name: ${finalOutput17.title}</h4>
+            <img src="${finalOutput17.image}">
+            <h2> Rs. ${finalOutput17.price}</h2>
+            <p>Description: ${finalOutput17.description}</p>
+        `
+        let product18 = document.getElementById("product18")
+        product18.innerHTML=`
+        <h1>Product-ID: ${finalOutput18.id}</h1>
+            <h4>Category: ${finalOutput18.category}</h4>
+            <h4>Product Name: ${finalOutput18.title}</h4>
+            <img src="${finalOutput18.image}">
+            <h2> Rs. ${finalOutput18.price}</h2>
+            <p>Description: ${finalOutput18.description}</p>
+        `
+        let product19 = document.getElementById("product19")
+        product19.innerHTML=`
+        <h1>Product-ID: ${finalOutput19.id}</h1>
+            <h4>Category: ${finalOutput19.category}</h4>
+            <h4>Product Name: ${finalOutput19.title}</h4>
+            <img src="${finalOutput19.image}">
+            <h2> Rs. ${finalOutput19.price}</h2>
+            <p>Description: ${finalOutput19.description}</p>
+        `
+        let product20 = document.getElementById("product20")
+        product20.innerHTML=`
+        <h1>Product-ID: ${finalOutput20.id}</h1>
+            <h4>Category: ${finalOutput20.category}</h4>
+            <h4>Product Name: ${finalOutput20.title}</h4>
+            <img src="${finalOutput20.image}">
+            <h2> Rs. ${finalOutput20.price}</h2>
+            <p>Description: ${finalOutput20.description}</p>
+        `
+    })
+})