Skip to content

Commit 659cf6a

Browse files
joseverdevjoseverdev
committed
Lista de productos HTML a partir de arrays
1 parent 3818109 commit 659cf6a

File tree

3 files changed

+154
-5
lines changed

3 files changed

+154
-5
lines changed

‎index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,27 @@
164164
</div>
165165
</aside>
166166

167+
<section class="main-container">
168+
<div class="cards-container">
169+
170+
<!-- <div class="product-card">
171+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
172+
alt="">
173+
<div class="product-info">
174+
<div>
175+
<p>$120,00</p>
176+
<p>Bike</p>
177+
</div>
178+
<figure>
179+
<img src="./icons/bt_add_to_cart.svg" alt="">
180+
</figure>
181+
</div>
182+
</div> -->
183+
184+
185+
</div>
186+
</section>
187+
167188
<script src="./main.js"></script>
168189
</body>
169190

‎main.js‎

Lines changed: 77 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const menuHamIcon = document.querySelector('.menu');
44
const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
55
const mobileMenu = document.querySelector('.mobile-menu');
66
const aside = document.querySelector('.product-detail');
7+
const cardsContainer = document.querySelector('.cards-container');
78

89

910
menuEmail.addEventListener('click', toggleDesktopMenu);
@@ -13,7 +14,6 @@ menuCarritoIcon.addEventListener('click', toggleCarritoAside);
1314
function toggleDesktopMenu() {
1415
const isAsideClosed = aside.classList.contains('inactive');
1516

16-
1717
if (!isAsideClosed) {
1818
//si el mobile menu esta open, hay que cerrarlo
1919
aside.classList.add('inactive');
@@ -25,7 +25,6 @@ function toggleMobileMenu() {
2525

2626
const isAsideClosed = aside.classList.contains('inactive');
2727

28-
2928
if (!isAsideClosed) {
3029
//si el mobile menu esta open, hay que cerrarlo
3130
aside.classList.add('inactive');
@@ -49,4 +48,79 @@ function toggleCarritoAside() {
4948
}
5049

5150
aside.classList.toggle('inactive');
52-
}
51+
}
52+
53+
const productList = [];
54+
55+
productList.push({
56+
name: 'Bike',
57+
price: 120,
58+
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
59+
});
60+
productList.push({
61+
name: 'Pantalla',
62+
price: 220,
63+
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
64+
});
65+
productList.push({
66+
name: 'Compu',
67+
price: 620,
68+
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
69+
});
70+
71+
/*
72+
<div class="product-card">
73+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
74+
alt="">
75+
<div class="product-info">
76+
<div>
77+
<p>$120,00</p>
78+
<p>Bike</p>
79+
</div>
80+
<figure>
81+
<img src="./icons/bt_add_to_cart.svg" alt="">
82+
</figure>
83+
</div>
84+
</div>
85+
*/
86+
87+
function renderProducts(arr) {
88+
for (product of arr) {
89+
const productCard = document.createElement('div');
90+
productCard.classList.add('product-card');
91+
92+
//product = {name,price,image} -> product.image
93+
const productImg = document.createElement('img');
94+
productImg.setAttribute('src',product.image)
95+
96+
const productInfo = document.createElement('div');
97+
productInfo.classList.add('product-info');
98+
99+
const productInfoDiv = document.createElement('div');
100+
101+
const productPrice = document.createElement('p');
102+
productPrice.innerText = '$' + product.price
103+
104+
const productName = document.createElement('p');
105+
productName.innerText = product.name
106+
107+
productInfoDiv.appendChild(productPrice);
108+
productInfoDiv.appendChild(productName);
109+
110+
const productInfoFigure = document.createElement('figure');
111+
const productImgCart = document.createElement('img');
112+
productImgCart.setAttribute('src','./icons/bt_add_to_cart.svg')
113+
114+
productInfoFigure.appendChild(productImgCart);
115+
116+
productInfo.appendChild(productInfoDiv);
117+
productInfo.appendChild(productInfoFigure);
118+
119+
productCard.appendChild(productImg);
120+
productCard.appendChild(productInfo);
121+
122+
cardsContainer.appendChild(productCard);
123+
}
124+
}
125+
126+
renderProducts(productList);

‎styles.css‎

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,51 @@ nav {
242242
font-weight: bold;
243243
height: 50px;
244244
}
245-
245+
246+
/* Product List */
247+
.cards-container {
248+
display: grid;
249+
grid-template-columns: repeat(auto-fill, 240px);
250+
gap: 26px;
251+
place-content: center;
252+
margin-top: 20px;
253+
}
254+
.product-card {
255+
width: 240px;
256+
}
257+
.product-card img {
258+
width: 240px;
259+
height: 240px;
260+
border-radius: 20px;
261+
object-fit: cover;
262+
}
263+
.product-info {
264+
display: flex;
265+
justify-content: space-between;
266+
align-items: center;
267+
margin-top: 12px;
268+
}
269+
.product-info figure {
270+
margin: 0;
271+
}
272+
.product-info figure img {
273+
width: 35px;
274+
height: 35px;
275+
}
276+
.product-info div p:nth-child(1) {
277+
font-weight: bold;
278+
font-size: var(--md);
279+
margin-top: 0;
280+
margin-bottom: 4px;
281+
}
282+
.product-info div p:nth-child(2) {
283+
font-size: var(--sm);
284+
margin-top: 0;
285+
margin-bottom: 0;
286+
color: var(--very-light-pink);
287+
}
288+
289+
246290
/* desde 0 hasta 640px */
247291
@media (max-width: 640px) {
248292
.menu {
@@ -261,7 +305,17 @@ nav {
261305
}
262306
.product-detail {
263307
width: 100%;
264-
}
308+
}
309+
.cards-container {
310+
grid-template-columns: repeat(auto-fill, 140px);
311+
}
312+
.product-card {
313+
width: 140px;
314+
}
315+
.product-card img {
316+
width: 140px;
317+
height: 140px;
318+
}
265319
}
266320

267321
@media (min-width: 641px) {

0 commit comments

Comments
 (0)