Halaman pencarian produk e-niaga

Meskipun kami sangat bersedia membantu mereka yang mengalami kesulitan, bukan berarti kami ada di sini untuk melakukan semuanya untuk Anda! Kami tidak dapat melakukan semua pekerjaan, Anda dibayar untuk ini, atau itu bagian dari nilai Anda dan sama sekali tidak adil bagi kami untuk melakukan semuanya untuk Anda.

Jadi kami membutuhkan Anda untuk melakukan pekerjaan itu, dan kami akan membantu Anda ketika Anda mengalami kebuntuan. Itu tidak berarti kami akan memberi Anda solusi langkah demi langkah yang bisa Anda berikan!
Mulailah dengan menjelaskan di mana Anda berada saat ini, dan apa langkah selanjutnya dalam proses tersebut. Kemudian beritahu kami apa yang telah Anda coba agar langkah berikutnya berhasil, dan apa yang terjadi ketika Anda berhasil.

Jika Anda mengalami masalah saat memulai, ini mungkin bisa membantu: Cara Menulis Kode untuk Memecahkan Masalah, Panduan Pemula[^]

Ini adalah kode yang benar untuk mengimplementasikan fungsi JavaScript untuk menampilkan halaman dengan benar. Itu melewati semua kasus uji.

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