javascript 적용하기

html 파일 하단(footer 아래)에 script 요소 추가하기
배열 생성해서 그 안에 상품 정보 넣고
for문으로 html string을 만들어서 product-list에 append하기

1. var product 라는 배열 안에 상품 넣기

   <script>
      var products = [
        {
          name: "농구공",
          price: 10000,
          seller: "Jordan",
          imageUrl: "images/products/basketball1.jpeg",
        },
        {
          name: "축구공",
          price: 50000,
          seller: "Jordan",
          imageUrl: "images/products/soccerball1.jpg",
        },
        {
          name: "키보드",
          price: 15000,
          seller: "Grap",
          imageUrl: "images/products/keyboard1.jpg",
        },
      ];
     
      productsHtml = "";
      for (var i = 0; i < products.length; i++) {
        let product = products[i];
        productsHtml =
          productsHtml +
          '<div class="product-card">' +
          "<div>" +
          '<img class="product-img" src="' +
          product.imageUrl +
          '" />' +
          "</div>" +
          '<div class="product-contents">' +
          '<span class="product-name">' +
          product.name +
          "</span>" +
          '<span class="product-price">' +
          product.price +
          "</span>" +
          '<div class="product-seller">' +
          '<img class="avatar" src="images/icons/avatar.png" />' +
          "<span>" +
          product.seller +
          "</span>" +
          "</div>" +
          "</div>" +
          "</div>";
      }
      document.querySelector("#product-list").innerHTML = productsHtml;
    </script>