Teoría
Teoría

La propiedad children: elementos hijos

Cupcake quedó contento con tu trabajo y te dio otra tarea: agregar tarjetas de productos a la página de una tienda de palos para selfies.

Antes recibíamos datos sobre los estados de los productos. Ahora la exportación de 1-Cupcake incluirá toda la información: el nombre del producto, su precio, su imagen, si está disponible para pedidos y otros datos. Como tendremos toda la información, podremos agregar los elementos al HTML con scripts sin pedirle ayuda a quien lo preparó.

Pero 1-Cupcake está fallando y todavía no nos entrega los datos. Para aprovechar el tiempo, crearemos una tarjeta desde cero. En el HTML ya hay unas tarjetas que nos sirven de modelo. Las usaremos como referencia para crear la nuestra y después las eliminaremos para agregar todas las tarjetas con JavaScript.

Como siempre, avanzaremos paso a paso: crearemos un elemento, le daremos contenido y agregaremos las clases necesarias.

Para insertar la tarjeta en la página, necesitamos encontrar su elemento padre. En este caso es la lista con la clase products. Contiene las tarjetas de productos y ya tiene tres en el HTML. Podemos encontrarlas con querySelectorAll o con la propiedad children de la lista.

Se accede a la propiedad así: elementoDOM.children. Devuelve una colección con los elementos DOM hijos directos. En nuestra lista debe contener tres elementos, uno por cada li.

Antes de agregar una tarjeta, busquemos la lista products y mostremos en la consola sus elementos hijos con children. Comprobaremos que la longitud de la colección coincide con la cantidad de elementos hijos y después comenzaremos a crear la tarjeta.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Catálogo | Device</title> <link rel="stylesheet" href="device/setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="products"> <li class="product product--available"> <h2 class="product__title">Palo para selfies para principiantes</h2> <img class="product__image" src="device/item-1.jpg" alt="Palo para selfies para principiantes"> <p class="product__price">200</p> </li> <li class="product product--unavailable"> <h2 class="product__title">Palo para selfies profesional</h2> <img class="product__image" src="device/item-2.jpg" alt="Palo para selfies profesional"> <p class="product__price">1500</p> </li> <li class="product product--available"> <h2 class="product__title">Palo para selfies insumergible</h2> <img class="product__image" src="device/item-3.jpg" alt="Palo para selfies insumergible"> <p class="product__price">2500</p> </li> </ul> <script src="script.js"></script> </body> </html>

CSS

.products { display: flex; flex-wrap: wrap; justify-content: space-between; width: 570px; margin: 20px auto; padding: 0; list-style: none; } .product { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; width: 270px; margin-bottom: 30px; } .product__image { order: -1; width: 270px; height: 380px; margin-bottom: 15px; } .product__title { max-width: 180px; margin: 0; font-weight: 700; font-size: 18px; line-height: 24px; } .product__price { max-width: 80px; margin: 0; text-align: right; font-weight: 300; font-size: 16px; font-variant-numeric: lining-nums; line-height: 27px; } .product--special { order: -1; width: 100%; height: 380px; flex-direction: column; justify-content: flex-start; align-content: space-between; } .product--special .product__title { width: 270px; max-width: 100%; margin-bottom: 10px; font-size: 28px; line-height: 36px; } .product--special .product__price { width: 270px; max-width: 100%; text-align: left; text-decoration: line-through; color: #cccccc; } .product--special .product__special-price { margin: 0; } .product--special .product__image { outline: 3px solid #ffc600; } .product--special::before { content: "Producto del día"; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 5px 10px; font-weight: 500; color: #111111; text-transform: uppercase; background-color: #ffc600; } .product--available::after, .product--unavailable::after { position: absolute; top: 343px; left: 50%; padding: 10px 5px 2px 5px; border-bottom: 1px solid #57c74b; transform: translateX(-50%); } .product--available::after { content: "Disponible"; } .product--unavailable { filter: grayscale(1) opacity(0.7); } .product--unavailable::after { content: "Agotado"; } .product--special.product--available::after, .product--special.product--unavailable::after { left: 135px; }

JavaScript

ObjetivosRealizado

Busca el elemento con la clase products mediante querySelector y guárdalo en la variable cardList.
Muestra en la consola los elementos hijos de cardList.