【解決方法】EC商品検索ページ

私たちは行き詰まっている人々を喜んで助けますが、それは私たちがあなたのためにすべてを行うためにここにいるという意味ではありません。 私たちがすべての仕事を行うことはできません。あなたはこれに対してお金をもらっているか、成績の一部であり、私たちがあなたのためにすべてを行うのはまったく公平ではありません。

したがって、私たちはあなたに仕事をしてもらう必要があります。あなたが行き詰まったときは、私たちがお手伝いします。 それは、あなたが提出できる段階的な解決策を提供するという意味ではありません。
まず、自分が現在どこにいるのか、そしてプロセスの次のステップは何なのかを説明します。 次に、次のステップを実行するために何を試みたか、また実行したときに何が起こったかを教えてください。

開始する際に問題が発生する場合は、次のことが役立つかもしれません。 問題を解決するコードの書き方、初心者ガイド[^]

これは、ページを適切に表示するための JavaScript 関数を実装するための正しいコードです。 すべてのテストケースに合格します。

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