Merge pull request #58 from mfatima05/ecommerce

Ecommerce Website Using HTML, CSS and JS
Chayandas07 · Oct 23, 2023 · 7e050f7 · 7e050f7
2 parents a514f29 + 9c69633
commit 7e050f7
Show file tree

Hide file tree

Showing 25 changed files with 971 additions and 0 deletions.
diff --git a/Ecommerce/app.js b/Ecommerce/app.js
@@ -0,0 +1,137 @@
+const wrapper = document.querySelector(".sliderWrapper");
+const menuItems = document.querySelectorAll(".menuItem");
+
+const products = [
+  {
+    id: 1,
+    title: "Nike",
+    price: 119,
+    colors: [
+      {
+        code: "black",
+        img: "./img/nike.png",
+      },
+      {
+        code: "darkblue",
+        img: "./img/nike2.png",
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: "Adidas",
+    price: 149,
+    colors: [
+      {
+        code: "lightgray",
+        img: "./img/adidas.png",
+      },
+      {
+        code: "green",
+        img: "./img/adidas2.png",
+      },
+    ],
+  },
+  {
+    id: 3,
+    title: "Puma",
+    price: 109,
+    colors: [
+      {
+        code: "lightgray",
+        img: "./img/puma.png",
+      },
+      {
+        code: "green",
+        img: "./img/puma2.png",
+      },
+    ],
+  },
+  {
+    id: 4,
+    title: "Reebok",
+    price: 129,
+    colors: [
+      {
+        code: "black",
+        img: "./img/reebok.png",
+      },
+      {
+       code: "lightgray",
+       img: "./img/reebok2.png",
+      },
+    ],
+  },
+  {
+    id: 5,
+    title: "Sketchers",
+    price: 99,
+    colors: [
+      {
+        code: "gray",
+        img: "./img/sketchers.png",
+      },
+      {
+        code: "black",
+        img: "./img/sketchers2.png",
+      },
+    ],
+  },
+];
+
+let choosenProduct = products[0];
+
+const currentProductImg = document.querySelector(".productImg");
+const currentProductTitle = document.querySelector(".productTitle");
+const currentProductPrice = document.querySelector(".productPrice");
+const currentProductColors = document.querySelectorAll(".color");
+const currentProductSizes = document.querySelectorAll(".size");
+
+menuItems.forEach((item, index) => {
+  item.addEventListener("click", () => {
+    //change the current slide
+    wrapper.style.transform = `translateX(${-100 * index}vw)`;
+
+    //change the choosen product
+    choosenProduct = products[index];
+
+    //change texts of currentProduct
+    currentProductTitle.textContent = choosenProduct.title;
+    currentProductPrice.textContent = "$" + choosenProduct.price;
+    currentProductImg.src = choosenProduct.colors[0].img;
+
+    //assing new colors
+    currentProductColors.forEach((color, index) => {
+      color.style.backgroundColor = choosenProduct.colors[index].code;
+    });
+  });
+});
+
+currentProductColors.forEach((color, index) => {
+  color.addEventListener("click", () => {
+    currentProductImg.src = choosenProduct.colors[index].img;
+  });
+});
+
+currentProductSizes.forEach((size, index) => {
+  size.addEventListener("click", () => {
+    currentProductSizes.forEach((size) => {
+      size.style.backgroundColor = "white";
+      size.style.color = "black";
+    });
+    size.style.backgroundColor = "black";
+    size.style.color = "white";
+  });
+});
+
+const productButton = document.querySelector(".productButton");
+const payment = document.querySelector(".payment");
+const close = document.querySelector(".close");
+
+productButton.addEventListener("click", () => {
+  payment.style.display = "flex";
+});
+
+close.addEventListener("click", () => {
+  payment.style.display = "none";
+});
diff --git a/Ecommerce/img/adidas.png b/Ecommerce/img/adidas.png
diff --git a/Ecommerce/img/adidas2.png b/Ecommerce/img/adidas2.png
diff --git a/Ecommerce/img/contact.png b/Ecommerce/img/contact.png
diff --git a/Ecommerce/img/facebook.png b/Ecommerce/img/facebook.png
diff --git a/Ecommerce/img/gift.png b/Ecommerce/img/gift.png
diff --git a/Ecommerce/img/instagram.png b/Ecommerce/img/instagram.png
diff --git a/Ecommerce/img/master.png b/Ecommerce/img/master.png
diff --git a/Ecommerce/img/nike.png b/Ecommerce/img/nike.png
diff --git a/Ecommerce/img/nike2.png b/Ecommerce/img/nike2.png
diff --git a/Ecommerce/img/puma.png b/Ecommerce/img/puma.png
diff --git a/Ecommerce/img/puma2.png b/Ecommerce/img/puma2.png
diff --git a/Ecommerce/img/reebok.png b/Ecommerce/img/reebok.png
diff --git a/Ecommerce/img/reebok2.png b/Ecommerce/img/reebok2.png
diff --git a/Ecommerce/img/return.png b/Ecommerce/img/return.png
diff --git a/Ecommerce/img/search.png b/Ecommerce/img/search.png
diff --git a/Ecommerce/img/shipping.png b/Ecommerce/img/shipping.png
diff --git a/Ecommerce/img/sketchers.png b/Ecommerce/img/sketchers.png
diff --git a/Ecommerce/img/sketchers2.png b/Ecommerce/img/sketchers2.png
diff --git a/Ecommerce/img/sneakers.png b/Ecommerce/img/sneakers.png
diff --git a/Ecommerce/img/twitter.png b/Ecommerce/img/twitter.png
diff --git a/Ecommerce/img/visa.png b/Ecommerce/img/visa.png
diff --git a/Ecommerce/img/whatsapp.png b/Ecommerce/img/whatsapp.png
diff --git a/Ecommerce/index.html b/Ecommerce/index.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@500&family=Nunito&family=Palanquin+Dark:wght@500&family=Roboto+Slab:wght@700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>Nike Store</title>
+</head>
+
+<body>
+    <nav id="nav">
+        <div class="navTop">
+            <div class="navItem">
+                <h2>ShoeHaven</h2>
+                <!-- <img src="./img/sneakers.png" alt=""> -->
+            </div>
+            <div class="navItem">
+                <div class="search">
+                    <input type="text" placeholder="Search..." class="searchInput">
+                    <img src="./img/search.png" width="20" height="20" alt="" class="searchIcon">
+                </div>
+            </div>
+            <div class="navItem">
+                <span class="limitedOffer">Limited Offer!</span>
+            </div>
+        </div>
+        <div class="navBottom">
+            <h3 class="menuItem">NIKE</h3>
+            <h3 class="menuItem">ADIDAS</h3>
+            <h3 class="menuItem">PUMA</h3>
+            <h3 class="menuItem">REEBOK</h3>
+            <h3 class="menuItem">SKETCHERS</h3>
+        </div>
+    </nav>
+    <div class="slider">
+        <div class="sliderWrapper">
+            <div class="sliderItem">
+                <img src="./img/nike.png" alt="" class="sliderImg" id="firsts">
+                <div class="sliderBg"></div>
+                <h1 class="sliderTitle">NIKE</br> NEW</br> SEASON</h1>
+                <h2 class="sliderPrice">$129</h2>
+                <a href="#product">
+                    <button class="buyButton">BUY NOW!</button>
+                </a>
+            </div>
+            <div class="sliderItem">
+                <img src="./img/adidas.png" alt="" class="sliderImg" id="jordan">
+                <div class="sliderBg"></div>
+                <h1 class="sliderTitle">ADIDAS</br> NEW</br>  SEASON</h1>
+                <h2 class="sliderPrice">$170</h2>
+                <a href="#product">
+                    <button class="buyButton">BUY NOW!</button>
+                </a>
+            </div>
+            <div class="sliderItem">
+                <img src="./img/puma.png" alt="" class="sliderImg" id="thirds">
+                <div class="sliderBg"></div>
+                <h1 class="sliderTitle">PUMA</br> NEW</br> SEASON</h1>
+                <h2 class="sliderPrice">$1999</h2>
+                <a href="#product">
+                    <button class="buyButton">BUY NOW!</button>
+                </a>
+            </div>
+            <div class="sliderItem">
+                <img src="./img/reebok.png" alt="" class="sliderImg" id="crater">
+                <div class="sliderBg"></div>
+                <h1 class="sliderTitle">REEBOK</br> NEW</br> SEASON</h1>
+                <h2 class="sliderPrice">$300</h2>
+                <a href="#product">
+                    <button class="buyButton">BUY NOW!</button>
+                </a>
+            </div>
+            <div class="sliderItem">
+                <img src="./img/sketchers.png" alt="" class="sliderImg">
+                <div class="sliderBg"></div>
+                <h1 class="sliderTitle">SKETCHERS</br> NEW</br> SEASON</h1>
+                <h2 class="sliderPrice">$99</h2>
+                <a href="#product">
+                    <button class="buyButton">BUY NOW!</button>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div class="features">
+        <div class="feature">
+            <img src="./img/shipping.png" alt="" class="featureIcon">
+            <span class="featureTitle">FREE SHIPPING</span>
+            <span class="featureDesc">Free worldwide shipping on all orders.</span>
+        </div>
+        <div class="feature">
+            <img class="featureIcon" src="./img/return.png" alt="">
+            <span class="featureTitle">30 DAYS RETURN</span>
+            <span class="featureDesc">No question, return and easy refund in 14 days.</span>
+        </div>
+        <div class="feature">
+            <img class="featureIcon" src="./img/gift.png" alt="">
+            <span class="featureTitle">GIFT CARDS</span>
+            <span class="featureDesc">Buy gift cards and use coupon codes easily.</span>
+        </div>
+        <div class="feature">
+            <img class="featureIcon" src="./img/contact.png" alt="">
+            <span class="featureTitle">CONTACT US!</span>
+            <span class="featureDesc">Keep in touch via email and support system.</span>
+        </div>
+    </div>
+
+    <div class="product" id="product">
+        <img src="./img/nike.png" alt="" class="productImg">
+        <div class="productDetails">
+            <h1 class="productTitle">NIKE</h1>
+            <h2 class="productPrice">Rs 1999</h2>
+            <p class="productDesc">Lorem ipsum dolor sit amet consectetur impal adipisicing elit. Alias assumenda
+                dolorum
+                doloremque sapiente aliquid aperiam.</p>
+            <div class="colors">
+                <div class="color"></div>
+                <div class="color"></div>
+            </div>
+            <div class="sizes">
+                <div class="size">42</div>
+                <div class="size">43</div>
+                <div class="size">44</div>o
+            </div>
+            <button class="productButton">BUY NOW!</button>
+        </div>
+        <div class="payment">
+            <h1 class="payTitle">Personal Information</h1>
+            <label>Name</label>
+            <input type="text" placeholder="Enter your name" class="payInput">
+            <label>Phone Number</label>
+            <input type="text" placeholder="Enter phone number" class="payInput">
+            <label>Address</label>
+            <input type="text" placeholder="Enter Address" class="payInput">
+            <h1 class="payTitle">Card Information</h1>
+            <div class="cardIcons">
+                <img src="./img/visa.png" width="40" alt="" class="cardIcon">
+                <img src="./img/master.png" alt="" width="40" class="cardIcon">
+            </div>
+            <input type="password" class="payInput" placeholder="Card Number">
+            <div class="cardInfo">
+                <input type="text" placeholder="mm" class="payInput sm">
+                <input type="text" placeholder="yyyy" class="payInput sm">
+                <input type="text" placeholder="cvv" class="payInput sm">
+            </div>
+            <button class="payButton">Billing!</button>
+            <span class="close">X</span>
+        </div>
+    </div>
+    <div class="gallery">
+        <div class="galleryItem">
+            <h1 class="galleryTitle">Be Yourself!</h1>
+            <img src="https://images.pexels.com/photos/13159244/pexels-photo-13159244.jpeg"
+                alt="" class="galleryImg">
+        </div>
+        <div class="galleryItem">
+            <img src="https://images.pexels.com/photos/2982100/pexels-photo-2982100.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+                alt="" class="galleryImg">
+            <h1 class="galleryTitle">This is the First Day of Your New Life</h1>
+        </div>
+        <div class="galleryItem">
+            <h1 class="galleryTitle">Just Do it!</h1>
+            <img src="https://images.pexels.com/photos/1018911/pexels-photo-1018911.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+                alt="" class="galleryImg">
+        </div>
+    </div>
+    <div class="newSeason">
+        <div class="nsItem">
+            <img src="https://images.pexels.com/photos/34514/spot-runs-start-la.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+                alt="" class="nsImg">
+        </div>
+        <div class="nsItem">
+            <h3 class="nsTitleSm">WINTER NEW ARRIVALS</h3>
+            <h1 class="nsTitle">New Season</h1>
+            <h1 class="nsTitle">New Collection</h1>
+            <a href="#nav">
+                <button class="nsButton">CHOOSE YOUR STYLE</button>
+            </a>
+        </div>
+        <div class="nsItem">
+            <img src="https://images.pexels.com/photos/7856965/pexels-photo-7856965.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
+                alt="" class="nsImg">
+        </div>
+    </div>
+    <footer>
+        <div class="footerLeft">
+            <div class="footerMenu">
+                <h1 class="fMenuTitle">About Us</h1>
+                <ul class="fList">
+                    <li class="fListItem">Company</li>
+                    <li class="fListItem">Contact</li>
+                    <li class="fListItem">Careers</li>
+                    <li class="fListItem">Affiliates</li>
+                    <li class="fListItem">Stores</li>
+                </ul>
+            </div>
+            <div class="footerMenu">
+                <h1 class="fMenuTitle">Useful Links</h1>
+                <ul class="fList">
+                    <li class="fListItem">Support</li>
+                    <li class="fListItem">Refund</li>
+                    <li class="fListItem">FAQ</li>
+                    <li class="fListItem">Feedback</li>
+                    <li class="fListItem">Stories</li>
+                </ul>
+            </div>
+            <div class="footerMenu">
+                <h1 class="fMenuTitle">Products</h1>
+                <ul class="fList">
+                    <li class="fListItem">Nike</li>
+                    <li class="fListItem">Adidas</li>
+                    <li class="fListItem">Puma</li>
+                    <li class="fListItem">Reebok</li>
+                    <li class="fListItem">Sketchers</li>
+                </ul>
+            </div>
+        </div>
+        <div class="footerRight">
+            <div class="footerRightMenu">
+                <h1 class="fMenuTitle">Subscribe to our newsletter</h1>
+                <div class="fMail">
+                    <input type="text" placeholder="your@email.com" class="fInput">
+                    <button class="fButton">Join!</button>
+                </div>
+            </div>
+            <div class="footerRightMenu">
+                <h1 class="fMenuTitle">Follow Us</h1>
+                <div class="fIcons">
+                    <a href="https://www.facebook.com/"><img src="./img/facebook.png" alt="" class="fIcon"></a>
+                    <a href="https://twitter.com/home"><img src="./img/twitter.png" alt="" class="fIcon"></a>
+                    <a href="https://www.instagram.com/"><img src="./img/instagram.png" alt="" class="fIcon"></a>
+                    <a href="https://www.whatsapp.com/"><img src="./img/whatsapp.png" alt="" class="fIcon"></a>
+                </div>
+            </div>
+            <div class="footerRightMenu">
+                <span class="copyright">@ShoeHaven. All rights reserved. 2023.</span>
+            </div>
+        </div>
+    </footer>
+    <script src="./app.js"></script>
+</body>
+
+</html>