Teoría
Teoría

Una función para crear elementos

Cada vez repetimos más las mismas operaciones: crear elementos con document.createElement(), agregarles clases con elemento.classList.add() y, en algunos casos, darles texto con elemento.textContent. Es hora de llevar ese código a una función para no escribir tantas líneas parecidas.

La función recibirá el nombre de la etiqueta (tagName), el nombre de la clase (className) y, opcionalmente, el contenido de texto (text). Dentro crearemos el elemento, agregaremos su clase y su texto y después lo devolveremos.

No todos los elementos tienen contenido de texto, así que permitiremos llamar a la función con dos argumentos en lugar de tres. JavaScript lo permite. Usaremos una condición para asignar text al contenido del elemento solo si su valor se convierte en true.

¿Cómo comprobamos el parámetro? Si no pasamos un argumento al llamar a la función, el parámetro tendrá el valor undefined, es decir, no definido. undefined se convierte al valor booleano false, así que basta con esta comprobación:

var createCard = function (required, optional) {
  if (optional) {
    // Acciones con optional
  }
}

// La función se ejecutará, pero sin las acciones con optional
createCard('Argumento obligatorio');

// La función se ejecutará con las acciones con optional
createCard('Argumento obligatorio', 'Argumento opcional');

La condición entre paréntesis convierte el valor de text al tipo booleano. Como vimos en el capítulo «Condiciones», las cadenas pueden usarse como condiciones: una cadena vacía se convierte en false y una cadena no vacía en true. Así, esta condición nos permite agregar cadenas no vacías y también los precios numéricos distintos de cero que usaremos más adelante.

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

var cardList = document.querySelector('.products'); console.log(cardList.children); var listItem = document.createElement('li'); listItem.classList.add('product'); cardList.appendChild(listItem); console.log(cardList.children); var title = document.createElement('h2'); title.classList.add('product__title'); title.textContent = 'Palo para selfies profesional'; listItem.appendChild(title); var price = document.createElement('p'); price.classList.add('product__price'); price.textContent = '1000'; listItem.appendChild(price);

ObjetivosRealizado

Al principio del código, declara la función makeElement con los parámetros tagName, className y text.
Dentro de la función, crea un elemento DOM con el nombre de etiqueta tagName y guárdalo en la variable element.
Agrega al elemento la clase className.
Agrega una condición que compruebe el valor de text. Si se cumple, asigna text como contenido de texto de element.
Devuelve element desde la función.