Skip to content

Commit 3c338bc

Browse files
Maseera-FatimaMaseera-Fatima
committed
created ecommerce
1 parent a514f29 commit 3c338bc

File tree

3 files changed

+971
-0
lines changed

3 files changed

+971
-0
lines changed

‎Ecommerce/app.js‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
const wrapper = document.querySelector(".sliderWrapper");
2+
const menuItems = document.querySelectorAll(".menuItem");
3+
4+
const products = [
5+
{
6+
id: 1,
7+
title: "Nike",
8+
price: 119,
9+
colors: [
10+
{
11+
code: "black",
12+
img: "./img/nike.png",
13+
},
14+
{
15+
code: "darkblue",
16+
img: "./img/nike2.png",
17+
},
18+
],
19+
},
20+
{
21+
id: 2,
22+
title: "Adidas",
23+
price: 149,
24+
colors: [
25+
{
26+
code: "lightgray",
27+
img: "./img/adidas.png",
28+
},
29+
{
30+
code: "green",
31+
img: "./img/adidas2.png",
32+
},
33+
],
34+
},
35+
{
36+
id: 3,
37+
title: "Puma",
38+
price: 109,
39+
colors: [
40+
{
41+
code: "lightgray",
42+
img: "./img/puma.png",
43+
},
44+
{
45+
code: "green",
46+
img: "./img/puma2.png",
47+
},
48+
],
49+
},
50+
{
51+
id: 4,
52+
title: "Reebok",
53+
price: 129,
54+
colors: [
55+
{
56+
code: "black",
57+
img: "./img/reebok.png",
58+
},
59+
{
60+
code: "lightgray",
61+
img: "./img/reebok2.png",
62+
},
63+
],
64+
},
65+
{
66+
id: 5,
67+
title: "Sketchers",
68+
price: 99,
69+
colors: [
70+
{
71+
code: "gray",
72+
img: "./img/sketchers.png",
73+
},
74+
{
75+
code: "black",
76+
img: "./img/sketchers2.png",
77+
},
78+
],
79+
},
80+
];
81+
82+
let choosenProduct = products[0];
83+
84+
const currentProductImg = document.querySelector(".productImg");
85+
const currentProductTitle = document.querySelector(".productTitle");
86+
const currentProductPrice = document.querySelector(".productPrice");
87+
const currentProductColors = document.querySelectorAll(".color");
88+
const currentProductSizes = document.querySelectorAll(".size");
89+
90+
menuItems.forEach((item, index) => {
91+
item.addEventListener("click", () => {
92+
//change the current slide
93+
wrapper.style.transform = `translateX(${-100 * index}vw)`;
94+
95+
//change the choosen product
96+
choosenProduct = products[index];
97+
98+
//change texts of currentProduct
99+
currentProductTitle.textContent = choosenProduct.title;
100+
currentProductPrice.textContent = "$" + choosenProduct.price;
101+
currentProductImg.src = choosenProduct.colors[0].img;
102+
103+
//assing new colors
104+
currentProductColors.forEach((color, index) => {
105+
color.style.backgroundColor = choosenProduct.colors[index].code;
106+
});
107+
});
108+
});
109+
110+
currentProductColors.forEach((color, index) => {
111+
color.addEventListener("click", () => {
112+
currentProductImg.src = choosenProduct.colors[index].img;
113+
});
114+
});
115+
116+
currentProductSizes.forEach((size, index) => {
117+
size.addEventListener("click", () => {
118+
currentProductSizes.forEach((size) => {
119+
size.style.backgroundColor = "white";
120+
size.style.color = "black";
121+
});
122+
size.style.backgroundColor = "black";
123+
size.style.color = "white";
124+
});
125+
});
126+
127+
const productButton = document.querySelector(".productButton");
128+
const payment = document.querySelector(".payment");
129+
const close = document.querySelector(".close");
130+
131+
productButton.addEventListener("click", () => {
132+
payment.style.display = "flex";
133+
});
134+
135+
close.addEventListener("click", () => {
136+
payment.style.display = "none";
137+
});

‎Ecommerce/index.html‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<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">
10+
<link rel="stylesheet" href="style.css">
11+
<title>Nike Store</title>
12+
</head>
13+
14+
<body>
15+
<nav id="nav">
16+
<div class="navTop">
17+
<div class="navItem">
18+
<h2>ShoeHaven</h2>
19+
<!-- <img src="./img/sneakers.png" alt=""> -->
20+
</div>
21+
<div class="navItem">
22+
<div class="search">
23+
<input type="text" placeholder="Search..." class="searchInput">
24+
<img src="./img/search.png" width="20" height="20" alt="" class="searchIcon">
25+
</div>
26+
</div>
27+
<div class="navItem">
28+
<span class="limitedOffer">Limited Offer!</span>
29+
</div>
30+
</div>
31+
<div class="navBottom">
32+
<h3 class="menuItem">NIKE</h3>
33+
<h3 class="menuItem">ADIDAS</h3>
34+
<h3 class="menuItem">PUMA</h3>
35+
<h3 class="menuItem">REEBOK</h3>
36+
<h3 class="menuItem">SKETCHERS</h3>
37+
</div>
38+
</nav>
39+
<div class="slider">
40+
<div class="sliderWrapper">
41+
<div class="sliderItem">
42+
<img src="./img/nike.png" alt="" class="sliderImg" id="firsts">
43+
<div class="sliderBg"></div>
44+
<h1 class="sliderTitle">NIKE</br> NEW</br> SEASON</h1>
45+
<h2 class="sliderPrice">$129</h2>
46+
<a href="#product">
47+
<button class="buyButton">BUY NOW!</button>
48+
</a>
49+
</div>
50+
<div class="sliderItem">
51+
<img src="./img/adidas.png" alt="" class="sliderImg" id="jordan">
52+
<div class="sliderBg"></div>
53+
<h1 class="sliderTitle">ADIDAS</br> NEW</br> SEASON</h1>
54+
<h2 class="sliderPrice">$170</h2>
55+
<a href="#product">
56+
<button class="buyButton">BUY NOW!</button>
57+
</a>
58+
</div>
59+
<div class="sliderItem">
60+
<img src="./img/puma.png" alt="" class="sliderImg" id="thirds">
61+
<div class="sliderBg"></div>
62+
<h1 class="sliderTitle">PUMA</br> NEW</br> SEASON</h1>
63+
<h2 class="sliderPrice">$1999</h2>
64+
<a href="#product">
65+
<button class="buyButton">BUY NOW!</button>
66+
</a>
67+
</div>
68+
<div class="sliderItem">
69+
<img src="./img/reebok.png" alt="" class="sliderImg" id="crater">
70+
<div class="sliderBg"></div>
71+
<h1 class="sliderTitle">REEBOK</br> NEW</br> SEASON</h1>
72+
<h2 class="sliderPrice">$300</h2>
73+
<a href="#product">
74+
<button class="buyButton">BUY NOW!</button>
75+
</a>
76+
</div>
77+
<div class="sliderItem">
78+
<img src="./img/sketchers.png" alt="" class="sliderImg">
79+
<div class="sliderBg"></div>
80+
<h1 class="sliderTitle">SKETCHERS</br> NEW</br> SEASON</h1>
81+
<h2 class="sliderPrice">$99</h2>
82+
<a href="#product">
83+
<button class="buyButton">BUY NOW!</button>
84+
</a>
85+
</div>
86+
</div>
87+
</div>
88+
89+
<div class="features">
90+
<div class="feature">
91+
<img src="./img/shipping.png" alt="" class="featureIcon">
92+
<span class="featureTitle">FREE SHIPPING</span>
93+
<span class="featureDesc">Free worldwide shipping on all orders.</span>
94+
</div>
95+
<div class="feature">
96+
<img class="featureIcon" src="./img/return.png" alt="">
97+
<span class="featureTitle">30 DAYS RETURN</span>
98+
<span class="featureDesc">No question, return and easy refund in 14 days.</span>
99+
</div>
100+
<div class="feature">
101+
<img class="featureIcon" src="./img/gift.png" alt="">
102+
<span class="featureTitle">GIFT CARDS</span>
103+
<span class="featureDesc">Buy gift cards and use coupon codes easily.</span>
104+
</div>
105+
<div class="feature">
106+
<img class="featureIcon" src="./img/contact.png" alt="">
107+
<span class="featureTitle">CONTACT US!</span>
108+
<span class="featureDesc">Keep in touch via email and support system.</span>
109+
</div>
110+
</div>
111+
112+
<div class="product" id="product">
113+
<img src="./img/nike.png" alt="" class="productImg">
114+
<div class="productDetails">
115+
<h1 class="productTitle">NIKE</h1>
116+
<h2 class="productPrice">Rs 1999</h2>
117+
<p class="productDesc">Lorem ipsum dolor sit amet consectetur impal adipisicing elit. Alias assumenda
118+
dolorum
119+
doloremque sapiente aliquid aperiam.</p>
120+
<div class="colors">
121+
<div class="color"></div>
122+
<div class="color"></div>
123+
</div>
124+
<div class="sizes">
125+
<div class="size">42</div>
126+
<div class="size">43</div>
127+
<div class="size">44</div>o
128+
</div>
129+
<button class="productButton">BUY NOW!</button>
130+
</div>
131+
<div class="payment">
132+
<h1 class="payTitle">Personal Information</h1>
133+
<label>Name</label>
134+
<input type="text" placeholder="Enter your name" class="payInput">
135+
<label>Phone Number</label>
136+
<input type="text" placeholder="Enter phone number" class="payInput">
137+
<label>Address</label>
138+
<input type="text" placeholder="Enter Address" class="payInput">
139+
<h1 class="payTitle">Card Information</h1>
140+
<div class="cardIcons">
141+
<img src="./img/visa.png" width="40" alt="" class="cardIcon">
142+
<img src="./img/master.png" alt="" width="40" class="cardIcon">
143+
</div>
144+
<input type="password" class="payInput" placeholder="Card Number">
145+
<div class="cardInfo">
146+
<input type="text" placeholder="mm" class="payInput sm">
147+
<input type="text" placeholder="yyyy" class="payInput sm">
148+
<input type="text" placeholder="cvv" class="payInput sm">
149+
</div>
150+
<button class="payButton">Billing!</button>
151+
<span class="close">X</span>
152+
</div>
153+
</div>
154+
<div class="gallery">
155+
<div class="galleryItem">
156+
<h1 class="galleryTitle">Be Yourself!</h1>
157+
<img src="https://images.pexels.com/photos/13159244/pexels-photo-13159244.jpeg"
158+
alt="" class="galleryImg">
159+
</div>
160+
<div class="galleryItem">
161+
<img src="https://images.pexels.com/photos/2982100/pexels-photo-2982100.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
162+
alt="" class="galleryImg">
163+
<h1 class="galleryTitle">This is the First Day of Your New Life</h1>
164+
</div>
165+
<div class="galleryItem">
166+
<h1 class="galleryTitle">Just Do it!</h1>
167+
<img src="https://images.pexels.com/photos/1018911/pexels-photo-1018911.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
168+
alt="" class="galleryImg">
169+
</div>
170+
</div>
171+
<div class="newSeason">
172+
<div class="nsItem">
173+
<img src="https://images.pexels.com/photos/34514/spot-runs-start-la.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
174+
alt="" class="nsImg">
175+
</div>
176+
<div class="nsItem">
177+
<h3 class="nsTitleSm">WINTER NEW ARRIVALS</h3>
178+
<h1 class="nsTitle">New Season</h1>
179+
<h1 class="nsTitle">New Collection</h1>
180+
<a href="#nav">
181+
<button class="nsButton">CHOOSE YOUR STYLE</button>
182+
</a>
183+
</div>
184+
<div class="nsItem">
185+
<img src="https://images.pexels.com/photos/7856965/pexels-photo-7856965.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
186+
alt="" class="nsImg">
187+
</div>
188+
</div>
189+
<footer>
190+
<div class="footerLeft">
191+
<div class="footerMenu">
192+
<h1 class="fMenuTitle">About Us</h1>
193+
<ul class="fList">
194+
<li class="fListItem">Company</li>
195+
<li class="fListItem">Contact</li>
196+
<li class="fListItem">Careers</li>
197+
<li class="fListItem">Affiliates</li>
198+
<li class="fListItem">Stores</li>
199+
</ul>
200+
</div>
201+
<div class="footerMenu">
202+
<h1 class="fMenuTitle">Useful Links</h1>
203+
<ul class="fList">
204+
<li class="fListItem">Support</li>
205+
<li class="fListItem">Refund</li>
206+
<li class="fListItem">FAQ</li>
207+
<li class="fListItem">Feedback</li>
208+
<li class="fListItem">Stories</li>
209+
</ul>
210+
</div>
211+
<div class="footerMenu">
212+
<h1 class="fMenuTitle">Products</h1>
213+
<ul class="fList">
214+
<li class="fListItem">Nike</li>
215+
<li class="fListItem">Adidas</li>
216+
<li class="fListItem">Puma</li>
217+
<li class="fListItem">Reebok</li>
218+
<li class="fListItem">Sketchers</li>
219+
</ul>
220+
</div>
221+
</div>
222+
<div class="footerRight">
223+
<div class="footerRightMenu">
224+
<h1 class="fMenuTitle">Subscribe to our newsletter</h1>
225+
<div class="fMail">
226+
<input type="text" placeholder="your@email.com" class="fInput">
227+
<button class="fButton">Join!</button>
228+
</div>
229+
</div>
230+
<div class="footerRightMenu">
231+
<h1 class="fMenuTitle">Follow Us</h1>
232+
<div class="fIcons">
233+
<a href="https://www.facebook.com/"><img src="./img/facebook.png" alt="" class="fIcon"></a>
234+
<a href="https://twitter.com/home"><img src="./img/twitter.png" alt="" class="fIcon"></a>
235+
<a href="https://www.instagram.com/"><img src="./img/instagram.png" alt="" class="fIcon"></a>
236+
<a href="https://www.whatsapp.com/"><img src="./img/whatsapp.png" alt="" class="fIcon"></a>
237+
</div>
238+
</div>
239+
<div class="footerRightMenu">
240+
<span class="copyright">@ShoeHaven. All rights reserved. 2023.</span>
241+
</div>
242+
</div>
243+
</footer>
244+
<script src="./app.js"></script>
245+
</body>
246+
247+
</html>

0 commit comments

Comments
 (0)