Skip to content

Commit da25252

Browse files
HectorCode8HectorCode8
committed
add changes
1 parent 4774124 commit da25252

File tree

4 files changed

+621
-0
lines changed

4 files changed

+621
-0
lines changed

‎.vscode/settings.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"workbench.colorCustomizations": {
3+
"activityBar.activeBackground": "#1f6fd0",
4+
"activityBar.activeBorder": "#ee90bb",
5+
"activityBar.background": "#1f6fd0",
6+
"activityBar.foreground": "#e7e7e7",
7+
"activityBar.inactiveForeground": "#e7e7e799",
8+
"activityBarBadge.background": "#ee90bb",
9+
"activityBarBadge.foreground": "#15202b",
10+
"sash.hoverBorder": "#1f6fd0",
11+
"statusBar.background": "#1857a4",
12+
"statusBar.foreground": "#e7e7e7",
13+
"statusBarItem.hoverBackground": "#1f6fd0",
14+
"statusBarItem.remoteBackground": "#1857a4",
15+
"statusBarItem.remoteForeground": "#e7e7e7",
16+
"titleBar.activeBackground": "#1857a4",
17+
"titleBar.activeForeground": "#e7e7e7",
18+
"titleBar.inactiveBackground": "#1857a499",
19+
"titleBar.inactiveForeground": "#e7e7e799"
20+
},
21+
"peacock.color": "#1857a4"
22+
}

‎index.html‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
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
10+
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="stylesheet" href="./styles.css" />
14+
<title>YardSale: Tienda online</title>
15+
</head>
16+
<body>
17+
<nav>
18+
<img src="./icons/icon_menu.svg" alt="menu" class="menu" />
19+
20+
<div class="navbar-left">
21+
<img src="./logos/logo_yard_sale.svg" alt="logo" class="logo" />
22+
23+
<ul>
24+
<li>
25+
<a href="/">All</a>
26+
</li>
27+
<li>
28+
<a href="/">Clothes</a>
29+
</li>
30+
<li>
31+
<a href="/">Electronics</a>
32+
</li>
33+
<li>
34+
<a href="/">Furnitures</a>
35+
</li>
36+
<li>
37+
<a href="/">Toys</a>
38+
</li>
39+
<li>
40+
<a href="/">Others</a>
41+
</li>
42+
</ul>
43+
</div>
44+
<div class="navbar-right">
45+
<ul>
46+
<li class="navbar-email">[email protected]</li>
47+
<li class="navbar-shopping-cart">
48+
<img src="./icons/icon_shopping_cart.svg" alt="shopping cart" />
49+
<div>2</div>
50+
</li>
51+
</ul>
52+
</div>
53+
<div class="desktop-menu inactive">
54+
<ul>
55+
<li>
56+
<a href="/" class="title">My orders</a>
57+
</li>
58+
59+
<li>
60+
<a href="/">My account</a>
61+
</li>
62+
63+
<li>
64+
<a href="/">Sign out</a>
65+
</li>
66+
</ul>
67+
</div>
68+
69+
<div class="mobile-menu inactive">
70+
<ul>
71+
<li>
72+
<a href="/">CATEGORIES</a>
73+
</li>
74+
<li>
75+
<a href="/">All</a>
76+
</li>
77+
<li>
78+
<a href="/">Clothes</a>
79+
</li>
80+
<li>
81+
<a href="/">Electronics</a>
82+
</li>
83+
<li>
84+
<a href="/">Furnitures</a>
85+
</li>
86+
<li>
87+
<a href="/">Toys</a>
88+
</li>
89+
<li>
90+
<a href="/">Other</a>
91+
</li>
92+
</ul>
93+
94+
<ul>
95+
<li>
96+
<a href="/">My orders</a>
97+
</li>
98+
<li>
99+
<a href="/">My account</a>
100+
</li>
101+
</ul>
102+
103+
<ul>
104+
<li>
105+
<a href="/" class="email">[email protected]</a>
106+
</li>
107+
<li>
108+
<a href="/" class="sign-out">Sign out</a>
109+
</li>
110+
</ul>
111+
</div>
112+
</nav>
113+
114+
<aside class="product-detail inactive">
115+
<div class="title-container">
116+
<img src="./icons/flechita.svg" alt="arrow">
117+
<p class="title">My order</p>
118+
</div>
119+
120+
<div class="my-order-content">
121+
<div class="shopping-cart">
122+
<figure>
123+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
124+
</figure>
125+
<p>Bike</p>
126+
<p>$30,00</p>
127+
<img src="./icons/icon_close.png" alt="close">
128+
</div>
129+
130+
<div class="shopping-cart">
131+
<figure>
132+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
133+
</figure>
134+
<p>Bike</p>
135+
<p>$30,00</p>
136+
<img src="./icons/icon_close.png" alt="close">
137+
</div>
138+
139+
<div class="shopping-cart">
140+
<figure>
141+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
142+
</figure>
143+
<p>Bike</p>
144+
<p>$30,00</p>
145+
<img src="./icons/icon_close.png" alt="close">
146+
</div>
147+
148+
<div class="order">
149+
<p>
150+
<span>Total</span>
151+
</p>
152+
<p>$560.00</p>
153+
</div>
154+
155+
<button class="primary-button">
156+
Checkout
157+
</button>
158+
</div>
159+
</div>
160+
</aside>
161+
162+
<section class="main-container">
163+
<div class="cards-container">
164+
</div>
165+
</section>
166+
<script src="./main.js"></script>
167+
</body>
168+
</html>

‎main.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
const menuEmail = document.querySelector(".navbar-email");
2+
const desktopMenu = document.querySelector(".desktop-menu");
3+
const burgerMenu = document.querySelector(".menu");
4+
const mobilMenu = document.querySelector(".mobile-menu");
5+
const menuCarritoIcon = document.querySelector(".navbar-shopping-cart");
6+
const aside = document.querySelector(".product-detail");
7+
const cardsContainer = document.querySelector(".cards-container");
8+
9+
menuEmail.addEventListener("click", toggleDesktopMenu);
10+
burgerMenu.addEventListener("click", toggleMobileMenu);
11+
menuCarritoIcon.addEventListener("click", toggleCarritoAside);
12+
13+
function toggleDesktopMenu() {
14+
const isAsideClose = aside.classList.contains("inactive");
15+
if (!isAsideClose) {
16+
aside.classList.add("inactive");
17+
}
18+
desktopMenu.classList.toggle("inactive");
19+
}
20+
21+
function toggleMobileMenu() {
22+
const isAsideClose = aside.classList.contains("inactive");
23+
if (!isAsideClose) {
24+
aside.classList.add("inactive");
25+
}
26+
mobilMenu.classList.toggle("inactive");
27+
}
28+
29+
function toggleCarritoAside() {
30+
const isMobileMenuClose = mobilMenu.classList.contains("inactive");
31+
if (!isMobileMenuClose) {
32+
mobilMenu.classList.add("inactive");
33+
}
34+
aside.classList.toggle("inactive");
35+
}
36+
37+
const productList = [];
38+
productList.push({
39+
name: "Producto 1",
40+
price: 100,
41+
image:
42+
"https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
43+
});
44+
productList.push({
45+
name: "Producto 2",
46+
price: 120,
47+
image:
48+
"https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
49+
});
50+
productList.push({
51+
name: "Producto 3",
52+
price: 130,
53+
image:
54+
"https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
55+
});
56+
productList.push({
57+
name: "Producto 4",
58+
price: 140,
59+
image:
60+
"https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
61+
});
62+
productList.push({
63+
name: "Producto 5",
64+
price: 150,
65+
image:
66+
"https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
67+
});
68+
productList.push({
69+
name: "Producto 6",
70+
price: 160,
71+
image:
72+
"https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
73+
});
74+
productList.push({
75+
name: "Producto 7",
76+
price: 170,
77+
image:
78+
"https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
79+
});
80+
productList.push({
81+
name: "Producto 8",
82+
price: 180,
83+
image:
84+
"https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
85+
});
86+
87+
function renderProductList(arr) {
88+
for (product of arr) {
89+
const productCard = document.createElement("div");
90+
productCard.classList.add("product-card");
91+
92+
const productImg = document.createElement("img");
93+
productImg.setAttribute("src", product.image);
94+
95+
const productInfo = document.createElement("div");
96+
productInfo.classList.add("product-info");
97+
98+
const productInfoDiv = document.createElement("div");
99+
100+
const productPrice = document.createElement("p");
101+
productPrice.innerText = "$" + product.price;
102+
103+
const productName = document.createElement("p");
104+
productName.innerText = product.name;
105+
106+
const productInfoFigure = document.createElement("figure");
107+
const productImgCart = document.createElement("img");
108+
109+
productImgCart.setAttribute("src", "./icons/bt_add_to_cart.svg");
110+
productInfoFigure.appendChild(productImgCart);
111+
productInfoDiv.appendChild(productPrice);
112+
productInfoDiv.appendChild(productName);
113+
productInfo.appendChild(productInfoDiv);
114+
productInfo.appendChild(productInfoFigure);
115+
productCard.appendChild(productImg);
116+
productCard.appendChild(productInfo);
117+
118+
cardsContainer.appendChild(productCard);
119+
}
120+
}
121+
122+
renderProductList(productList);

0 commit comments

Comments
 (0)