ई-कॉमर्स उत्पाद खोज पृष्ठ

हालाँकि हम फंसे हुए लोगों की मदद करने के लिए तत्पर हैं, लेकिन इसका मतलब यह नहीं है कि हम आपके लिए यह सब करने के लिए यहाँ हैं! हम सारा काम नहीं कर सकते, या तो आपको इसके लिए भुगतान मिल रहा है, या यह आपके ग्रेड का हिस्सा है और हमारे लिए यह सब करना बिल्कुल भी उचित नहीं होगा।

इसलिए हमें काम करने के लिए आपकी ज़रूरत है, और जब आप फंस जाएंगे तो हम आपकी मदद करेंगे। इसका मतलब यह नहीं है कि हम आपको चरण-दर-चरण समाधान देंगे जो आप अपने हाथ में ले सकते हैं!
यह बताकर शुरुआत करें कि आप इस समय कहां हैं और इस प्रक्रिया में अगला कदम क्या है। फिर हमें बताएं कि आपने उस अगले चरण को कार्यान्वित करने के लिए क्या प्रयास किया है, और जब आपने किया तो क्या हुआ।

यदि आपको आरंभ करने में कोई समस्या हो रही है, तो इससे मदद मिल सकती है: किसी समस्या को हल करने के लिए कोड कैसे लिखें, एक शुरुआती मार्गदर्शिका[^]

पेज को ठीक से प्रदर्शित करने के लिए जावास्क्रिप्ट फ़ंक्शंस को लागू करने के लिए यह सही कोड है। यह सभी परीक्षण मामलों को पास कर लेता है।

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