Issues in below code

@dharshini-ta-fsr @kashif-ta-fsr
var productData = {
“id”: “1”,
“name”: “Men Navy Blue Solid Sweatshirt”,
“preview”: “https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/08a7b230-ee8f-46c0-a945-4e835a3c01c01541402833619-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-1.jpg”,
“photos”: [
https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/08a7b230-ee8f-46c0-a945-4e835a3c01c01541402833619-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-1.jpg”,
https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/efc3d5b9-1bb3-4427-af53-7acae7af98951541402833591-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-2.jpg”,
https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/c7e58861-3431-4189-9903-9880f5eebd181541402833566-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-3.jpg”,
https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/66490b64-32de-44b4-a6e4-fe36f1c040051541402833548-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-4.jpg”,
https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/957be784-7c5d-4e90-ab9f-0928015b22891541402833645-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-5.jpg
],
“description”: “Navy solid sweatshirt with patchwork, has a round neck, long sleeves, straight hem”,
“size”: [
1,
1,
0,
1,
0
],
“isAccessory”: false,
“brand”: “United Colors of Benetton”,
“price”: 2599
}

$(()=>{
createList();
});

const createList = () => {

productData.forEach((productInform)=>{
const cardTemplate = getProductDetails(productInform);
const product_page = $(cardTemplate); // Creating DOM Object
const product = $(‘.product’) // searching for .container element;
product.append(product_page);
})
};

const getProductDetails = (productInform)=>{
const {preview,name,brand,price,photos,description} = productInform||{}
return`

${name}

${name}

${brand}

Price: Rs ${price}

Description

${description}

Product Preview

${name} <img id="img1" src="${photos[1]}" alt="${name} /> <img id="img2" src="${photos[2]}" alt="${name} /> <img id="img3" src="${photos[3]}" alt="${name} /> <img id="img4" src="${photos[4]}" alt="${name} /> </div> </div> </div> </div> `; }

@dhanuchougule41

Here I am attaching error corrected code!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Page</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .product_page {
      display: flex;
    }
    .left-column img {
      width: 100%;
    }
    .right-column {
      margin-left: 20px;
    }
    .product-description h1,
    .product-description h4,
    .product-description h3 {
      margin: 0;
    }
    .product-preview img {
      width: 100px;
      margin-right: 10px;
      cursor: pointer;
    }
    .product-preview img.active {
      border: 2px solid blue;
    }
  </style>
</head>

<body>
  <div class="product"></div>

  <script>
    const productData = {
      "id": "1",
      "name": "Men Navy Blue Solid Sweatshirt",
      "preview": "https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/08a7b230-ee8f-46c0-a945-4e835a3c01c01541402833619-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-1.jpg",
      "photos": [
        "https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/08a7b230-ee8f-46c0-a945-4e835a3c01c01541402833619-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-1.jpg",
        "https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/efc3d5b9-1bb3-4427-af53-7acae7af98951541402833591-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-2.jpg",
        "https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/c7e58861-3431-4189-9903-9880f5eebd181541402833566-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-3.jpg",
        "https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/66490b64-32de-44b4-a6e4-fe36f1c040051541402833548-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-4.jpg",
        "https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/7579188/2018/11/5/957be784-7c5d-4e90-ab9f-0928015b22891541402833645-United-Colors-of-Benetton-Men-Sweatshirts-1271541402833444-5.jpg"
      ],
      "description": "Navy solid sweatshirt with patchwork, has a round neck, long sleeves, straight hem",
      "size": [
        1,
        1,
        0,
        1,
        0
      ],
      "isAccessory": false,
      "brand": "United Colors of Benetton",
      "price": 2599
    };

    $(() => {
      createList();
    });

    const createList = () => {
      const product_page = getProductDetails(productData);
      const product = $('.product');
      product.append(product_page);
    };

    const getProductDetails = (productInform) => {
      const { preview, name, brand, price, photos, description } = productInform || {};
      return `
        <div class="product_page">
          <div class="left-column">
            <img id="productImg" src="${preview}" alt="${name}" />
          </div>
          <div class="right-column">
            <div class="product-description">
              <h1 id="name">${name}</h1>
              <h4 id="brand">${brand}</h4>
              <h3>Price: Rs ${price}</h3>
              <div class="description">
                <h3>Description</h3>
                <p id="description">${description}</p>
              </div>
              <div class="product-preview">
                <h3>Product Preview</h3>
                <div class="previewImg">
                  <img id="img0" class="active" src="${photos[0]}" alt="${name}" />
                  <img id="img1" src="${photos[1]}" alt="${name}" />
                  <img id="img2" src="${photos[2]}" alt="${name}" />
                  <img id="img3" src="${photos[3]}" alt="${name}" />
                  <img id="img4" src="${photos[4]}" alt="${name}" />
                </div>
              </div>
            </div>
          </div>
        </div>
      `;
    };
  </script>
</body>

</html>


I have corrected error only. you need to make changes and update code for submitting assignment. Try to do alignment and implement assignment criteria , while implementing that if you face any issues means kindly inform, will help you to solve it.

Have a Happy Learning.