Page de recherche de produits de commerce électronique

Même si nous sommes plus que disposés à aider ceux qui sont bloqués, cela ne signifie pas que nous sommes là pour tout faire à votre place ! Nous ne pouvons pas faire tout le travail, soit vous êtes payé pour cela, soit cela fait partie de vos notes et il ne serait pas du tout juste pour nous de tout faire à votre place.

Nous avons donc besoin de vous pour faire le travail et nous vous aiderons lorsque vous serez bloqué. Cela ne veut pas dire que nous vous donnerons une solution étape par étape que vous pourrez nous proposer !
Commencez par expliquer où vous en êtes actuellement et quelle est la prochaine étape du processus. Ensuite, dites-nous ce que vous avez essayé pour que cette prochaine étape fonctionne et ce qui s’est passé lorsque vous l’avez fait.

Si vous rencontrez des difficultés pour démarrer, ceci peut vous aider : Comment écrire du code pour résoudre un problème, guide du débutant[^]

Il s’agit du code correct pour implémenter les fonctions JavaScript afin d’afficher correctement la page. Il réussit tous les cas de test.

// 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);
  });
}