Página de búsqueda de productos de comercio electrónico

Si bien estamos más que dispuestos a ayudar a aquellos que están estancados, ¡eso no significa que estemos aquí para hacerlo todo por usted! No podemos hacer todo el trabajo, o te pagan por esto o es parte de tus calificaciones y no sería nada justo que lo hiciéramos todo por ti.

Por eso necesitamos que usted haga el trabajo y lo ayudaremos cuando se quede atascado. ¡Eso no significa que le daremos una solución paso a paso que pueda entregar!
Empiece por explicar dónde se encuentra en este momento y cuál es el siguiente paso del proceso. Luego cuéntenos qué ha intentado para que el siguiente paso funcione y qué sucedió cuando lo hizo.

Si tiene problemas para comenzar, esto puede ayudar: Cómo escribir código para resolver un problema, una guía para principiantes[^]

Este es el código correcto para implementar las funciones de JavaScript para mostrar la página correctamente. Pasa todos los casos de prueba.

// Creates a product card
function createProductCard(product) {
  // Create a div element
  const card = document.createElement('div');
  // add class product to card div element
  card.className = 'product';
  // add an attribute of name data-id and value product id
  card.setAttribute('data-id', product.id);

  // create h3 element
  const title = document.createElement('h3');
  // set its inner text as product name
  title.innerText = product.name;
  // set its class name as product__name
  title.className = 'product__name';

  // Create an image element
  const image = document.createElement('img');
  // Set its src attribute
  image.src = product.image;
  // Set its class name as 'product__image'
  image.className = 'product__image';

  // Create a p element for description
  const description = document.createElement('p');
  // Set its inner text
  description.innerText = product.description;
  // Set its className as 'product__description'
  description.className = 'product__description';

  // create a span element for price
  const price = document.createElement('span');
  // set its text as product's price
  // Using toLocaleString for comma separated representation
  price.innerText = product.price.toLocaleString();
  // Set class name as 'product__price';
  price.className = 'product__price';

  // Create a div for tags & set its className as 'product__tags'
  const tags = document.createElement('div');
  tags.className = 'product__tags';

  // Iterate over product colors array & render each color
  product.colors.forEach((color) => {
    // Create a span element for specific color
    const elem = document.createElement('span');
    // Set its className as 'product__tag';
    elem.className = 'product__tag';
    // Set an attribute data-tag-color with value color
    elem.setAttribute('data-tag-color', color);
    // Set its inner Text as color
    elem.innerText = color;

    // Append that to parent tags element
    tags.appendChild(elem);
  });

  // Render the card in the given order i.e. iterate over them & append them as a child one by one
  [image, title, description, price, tags].forEach(element => card.appendChild(element));

  // return the card
  return card;
}

// Load the list
function renderAllCards(cardList) {
  // First select the root element
  const renderRoot = document.getElementById('root'); // actual ID of the root element

  // First remove existing children so that we don't append to the existing list. DO NOT remove this
  renderRoot.innerHTML = '';

  // Now iterate over the list passed as a param to render all the cards
  cardList.forEach((product) => {
    // Create a card element by calling createProductCard method, passing the list item as a parameter
    const card = createProductCard(product);

    // Append that child
    renderRoot.appendChild(card);
  });
}