Teoría
Teoría

El método classList.add: agregar una clase

Ya encontramos los elementos. ¿Qué sigue? Ahora queremos cambiar su aspecto. Por suerte, quien preparó el HTML y el CSS también dejó estilos para los distintos estados de los productos. En style.css encontramos varias reglas:

la clase product--available parece corresponder a un producto disponible;
product--unavailable, a uno agotado;
y product--special seguramente se encarga de las ofertas especiales.

Pero ¿para qué adivinar? Agreguemos las clases y veamos qué pasa.

Los elementos DOM son objetos y tienen propiedades y métodos. Una de sus propiedades es el objeto classList. Contiene métodos para trabajar con las clases del elemento, entre ellos add(), que permite agregar una clase.

La sintaxis es sencilla: escribimos el elemento DOM, accedemos a su propiedad classList con un punto y llamamos al método add() con una cadena que contiene el nombre de la clase. No se pone un punto antes del nombre de la clase. Así se ve:

// Para buscar un elemento por su clase, usamos un punto
var product = document.querySelector('.product');

// ¡Pero para agregar la clase no ponemos el punto!
product.classList.add('product--sale');

El resultado de classList.add() es el mismo que si agregáramos la clase directamente en el HTML:

<!-- Estado inicial del HTML -->
<li class="product">
  …
</li>

<!-- Estado después de llamar a classList.add -->
<li class="product product--sale">
  …
</li>

Agreguemos a los elementos encontrados la clase de producto agotado y la de oferta especial, según corresponda.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Catálogo | Technomart</title> <link rel="stylesheet" href="technomart/setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="products"> <li class="product"> <h2 class="product__title">Alicates universales «Superagarre»</h2> <img class="product__image" src="technomart/good-1.jpg" width="200" height="150" alt="Alicates universales «Superagarre»"> <p class="product__price">800 ₽</p> </li> <li class="product"> <h2 class="product__title">Destornillador «Barrenita»</h2> <img class="product__image" src="technomart/good-2.jpg" width="200" height="150" alt="Destornillador «Barrenita»"> <p class="product__price">550 ₽</p> </li> <li class="product"> <h2 class="product__title">Pinzas «Copérnico»</h2> <img class="product__image" src="technomart/good-3.jpg" width="200" height="150" alt="Pinzas «Copérnico»"> <p class="product__price">1,350 ₽</p> </li> <li class="product"> <h2 class="product__title">Rotomartillo «¡Hola, vecino!»</h2> <img class="product__image" src="technomart/good-4.jpg" width="200" height="150" alt="Rotomartillo «¡Hola, vecino!»"> <p class="product__price">7,500 ₽</p> </li> <li class="product"> <h2 class="product__title">Martillo «Mjölnir»</h2> <img class="product__image" src="technomart/good-5.jpg" width="200" height="150" alt="Martillo «Mjölnir»"> <p class="product__price">2,000 ₽</p> </li> </ul> <script src="script.js"></script> </body> </html>

CSS

.product { position: relative; display: flex; flex-direction: column; align-items: center; width: 220px; margin-bottom: 20px; text-align: center; border: 1px solid #cccccc; } .product--available::before { content: ""; position: absolute; top: 5px; left: 5px; width: 15px; height: 15px; padding: 5px; background-image: url("technomart/check.svg"); background-repeat: no-repeat; background-position: center; background-size: 18px; border: 1px solid #4eb543; border-radius: 50%; } .product--unavailable { filter: grayscale(1) opacity(0.7); } .product--unavailable::before { content: "Agotado"; position: absolute; top: 0; left: 0; padding: 5px; font-size: 14px; } .product--special { flex-basis: 100%; order: -1; border-color: #ee3643; } .product--special::after { content: "Producto del día"; position: absolute; top: 0; right: 0; height: 30px; padding-right: 10px; padding-left: 10px; line-height: 30px; color: #ffffff; background-color: #ee3643; }

JavaScript

var specialProduct = document.querySelector('.product:nth-child(2)'); console.log(specialProduct); var unavailableProduct = document.querySelector('.product:last-child'); console.log(unavailableProduct);

ObjetivosRealizado

Reemplaza la instrucción que muestra specialProduct en la consola por otra que agregue la clase product--special a ese elemento DOM.
Reemplaza la instrucción que muestra unavailableProduct en la consola por otra que agregue la clase product--unavailable a ese elemento DOM.