Skip to content

Commit f482473

Browse files
csrodriguezcsrodriguez
committed
C021. Lista de productos, HTML a partir de arrays
1 parent d11ee70 commit f482473

File tree

4 files changed

+210
-1
lines changed

4 files changed

+210
-1
lines changed

‎index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,31 @@
157157
</div>
158158
</div>
159159
</aside>
160+
161+
<section class="main-container">
162+
<div class="cards-container">
163+
164+
<!--
165+
166+
<div class="product-card">
167+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
168+
<div class="product-info">
169+
<div>
170+
<p>$120,00</p>
171+
<p>Bike</p>
172+
</div>
173+
<figure>
174+
<img src="./icons/bt_add_to_cart.svg" alt="">
175+
</figure>
176+
</div>
177+
</div>
178+
179+
-->
180+
181+
182+
183+
</div>
184+
</section>
160185

161186
<script src="./main.js"></script>
162187
</body>

‎main.js‎

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

89
menuEmail.addEventListener("click", toogleDesktopMenu);
910
menuHamIcon.addEventListener("click", toogleMobileMenu);
@@ -41,4 +42,61 @@ function toogleCarritoAside(){
4142
}
4243

4344
aside.classList.toggle("inactive");
44-
}
45+
}
46+
47+
const productList = [];
48+
49+
productList.push({
50+
name: 'Bike',
51+
price: 120,
52+
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
53+
});
54+
productList.push({
55+
name: 'Skate',
56+
price: 60,
57+
image: 'https://images.pexels.com/photos/165236/pexels-photo-165236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
58+
});
59+
productList.push({
60+
name: 'Dron',
61+
price: 300,
62+
image: 'https://images.pexels.com/photos/1809576/pexels-photo-1809576.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
63+
});
64+
65+
66+
function renderProducts(arr) {
67+
for (product of arr) {
68+
const productCard = document.createElement("div");
69+
productCard.classList.add("product-card");
70+
71+
const productImg = document.createElement("img");
72+
productImg.setAttribute("src", product.image);
73+
74+
const productInfo = document.createElement("div");
75+
productInfo.classList.add("product-info");
76+
77+
const productInfoDiv = document.createElement("div");
78+
const productPrice = document.createElement("p");
79+
productPrice.innerText = "$" + product.price;
80+
const productName = document.createElement("p");
81+
productName.innerText = product.name;
82+
83+
productInfoDiv.appendChild(productPrice);
84+
productInfoDiv.appendChild(productName);
85+
86+
const productInfoFigure = document.createElement("figure");
87+
const productImgCard = document.createElement("img");
88+
productImgCard.setAttribute("src", "./icons/bt_add_to_cart.svg");
89+
90+
productInfoFigure.appendChild(productImgCard);
91+
92+
productInfo.appendChild(productInfoDiv);
93+
productInfo.appendChild(productInfoFigure);
94+
95+
productCard.appendChild(productImg);
96+
productCard.appendChild(productInfo);
97+
98+
cardsContainer.appendChild(productCard);
99+
}
100+
}
101+
102+
renderProducts(productList);

‎notas.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
- [C018 Fusión del menu en desktop](#c018-fusión-del-menu-en-desktop)
1010
- [C019 Fusión del menú mobile](#c019-fusión-del-menú-mobile)
1111
- [C020 Carrito de compras](#c020-carrito-de-compras)
12+
- [C021 Lista de productos, HTML a parti de arrays](#c021-lista-de-productos-html-a-parti-de-arrays)
1213

1314
## C009 Como conectar con JS con HTML
1415

@@ -328,5 +329,75 @@ function toogleCarritoAside(){
328329
aside.classList.toggle("inactive");
329330
}
330331
```
332+
## C021 Lista de productos, HTML a parti de arrays
333+
334+
Como primera medida integramos el componentes de lista de productos del archivo clase6.html, como en las clases anteriores.
335+
336+
En este caso tenemos hardcodeado cada uno de los productos en el html. Lo que vamos a hacer es borrarlo todos (dejamos uno como comentario para ver como se forma su estructura) y generalos a traves del codigo de javascript a partir de un array con los datos de los productos a mostrar. En este caso vamos a tener tambien hardcodeado el array con algunos productos, pero mas adelante estos datos deberian ser tomados a través de consultas en el backend en bases de datos.
337+
La lista donde vamos a contener los productos, que deberia obtenerse a partir de peticiones realizadas al backend, la vamos a estar hardcodeando de la siguiente manera:
338+
```javascript
339+
const productList = [];
340+
341+
productList.push({
342+
name: 'Bike',
343+
price: 120,
344+
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
345+
});
346+
productList.push({
347+
name: 'Skate',
348+
price: 60,
349+
image: 'https://images.pexels.com/photos/165236/pexels-photo-165236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
350+
});
351+
productList.push({
352+
name: 'Dron',
353+
price: 300,
354+
image: 'https://images.pexels.com/photos/1809576/pexels-photo-1809576.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
355+
});
356+
```
357+
Para recorrer el array tenemos dos formas mas de recorrerlo a los ya conocido con el atributo length, y es por medio del `for (item of object)` o `for (item in object)`. Con el **of** el **item** va a ser cada uno de los objetos en si, pero con **in** el **item** va a ser el indice de cada uno de los objetos.
358+
Por cada recorrido del `for`vamos a ir creando cada uno de los elementos, y una vez creado todos, lo vamos a ir anexando al padre correspondiente (mediante `append` o `appendChild`) y por ultimo anexandolo al HTML.
359+
Y a todo este `for` lo encapsulamos en una función principalmente para un ordenamiento de codigo. Ademas me permite poder llamar a esta con algun evento en particular.
360+
```javascript
361+
function renderProducts(arr) {
362+
for (product of arr) {
363+
const productCard = document.createElement("div");
364+
productCard.classList.add("product-card");
365+
366+
const productImg = document.createElement("img");
367+
productImg.setAttribute("src", product.image);
368+
369+
const productInfo = document.createElement("div");
370+
productInfo.classList.add("product-info");
371+
372+
const productInfoDiv = document.createElement("div");
373+
const productPrice = document.createElement("p");
374+
productPrice.innerText = "$" + product.price;
375+
const productName = document.createElement("p");
376+
productName.innerText = product.name;
377+
378+
productInfoDiv.appendChild(productPrice);
379+
productInfoDiv.appendChild(productName);
380+
381+
const productInfoFigure = document.createElement("figure");
382+
const productImgCard = document.createElement("img");
383+
productImgCard.setAttribute("src", "./icons/bt_add_to_cart.svg");
384+
385+
productInfoFigure.appendChild(productImgCard);
386+
387+
productInfo.appendChild(productInfoDiv);
388+
productInfo.appendChild(productInfoFigure);
389+
390+
productCard.appendChild(productImg);
391+
productCard.appendChild(productInfo);
392+
393+
cardsContainer.appendChild(productCard);
394+
}
395+
}
396+
397+
renderProducts(productList);
398+
```
399+
En la proxima clase vamos a estar agregando eventos a este codigo, ya que ahora resolvimos generar el HTML a traves de JS.
400+
401+
331402
332403

‎styles.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,50 @@ nav {
232232
height: 50px;
233233
}
234234

235+
/* Product list */
236+
237+
.cards-container {
238+
display: grid;
239+
grid-template-columns: repeat(auto-fill, 240px);
240+
gap: 26px;
241+
place-content: center;
242+
margin-top: 20px;
243+
}
244+
.product-card {
245+
width: 240px;
246+
}
247+
.product-card img {
248+
width: 240px;
249+
height: 240px;
250+
border-radius: 20px;
251+
object-fit: cover;
252+
}
253+
.product-info {
254+
display: flex;
255+
justify-content: space-between;
256+
align-items: center;
257+
margin-top: 12px;
258+
}
259+
.product-info figure {
260+
margin: 0;
261+
}
262+
.product-info figure img {
263+
width: 35px;
264+
height: 35px;
265+
}
266+
.product-info div p:nth-child(1) {
267+
font-weight: bold;
268+
font-size: var(--md);
269+
margin-top: 0;
270+
margin-bottom: 4px;
271+
}
272+
.product-info div p:nth-child(2) {
273+
font-size: var(--sm);
274+
margin-top: 0;
275+
margin-bottom: 0;
276+
color: var(--very-light-pink);
277+
}
278+
235279
/* media */
236280
@media (max-width: 640px) {
237281
.menu {
@@ -250,6 +294,17 @@ nav {
250294
.product-detail {
251295
width: 100%;
252296
}
297+
298+
.cards-container {
299+
grid-template-columns: repeat(auto-fill, 140px);
300+
}
301+
.product-card {
302+
width: 140px;
303+
}
304+
.product-card img {
305+
width: 140px;
306+
height: 140px;
307+
}
253308
}
254309

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

0 commit comments

Comments
 (0)