Trang tìm kiếm sản phẩm thương mại điện tử

Mặc dù chúng tôi rất sẵn lòng giúp đỡ những người đang gặp khó khăn nhưng điều đó không có nghĩa là chúng tôi ở đây để làm tất cả cho bạn! Chúng tôi không thể làm tất cả công việc, bạn sẽ được trả tiền cho việc này hoặc đó là một phần điểm số của bạn và sẽ không công bằng chút nào nếu chúng tôi làm tất cả cho bạn.

Vì vậy chúng tôi cần bạn thực hiện công việc và chúng tôi sẽ giúp đỡ bạn khi bạn gặp khó khăn. Điều đó không có nghĩa là chúng tôi sẽ cung cấp cho bạn giải pháp từng bước mà bạn có thể thực hiện!
Bắt đầu bằng cách giải thích hiện tại bạn đang ở đâu và bước tiếp theo trong quy trình là gì. Sau đó, hãy cho chúng tôi biết bạn đã cố gắng thực hiện bước tiếp theo như thế nào và điều gì đã xảy ra khi bạn thực hiện.

Nếu bạn gặp vấn đề khi bắt đầu thì điều này có thể hữu ích: Cách viết mã để giải quyết vấn đề, Hướng dẫn cho người mới bắt đầu[^]

Đây là mã chính xác để triển khai các hàm JavaScript nhằm hiển thị trang đúng cách. Nó vượt qua tất cả các trường hợp thử nghiệm.

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