Week 4: Generate Product Cards with JavaScript

Today you’ll build…

A dynamic product list using JavaScript. Instead of writing each product card by hand in HTML, your JavaScript code will generate them automatically from a list of products.

This is your first step toward making the cart interactive.

To do that, you’ll learn…

• How to link a JavaScript file to your HTML
• How to create different types of variables
• How to create an object
• How to create a function
• How to write a product array using objects
• How to access elements on the page with document.getElementById
• How to use .forEach() to loop through your products
• How to use innerHTML to insert HTML using JavaScript

By the end of today…

Each student will:

• Define a list of products in JavaScript
• Use JavaScript to create and display product cards on the page
• Replace hardcoded product cards from Week 1 with ones generated by code

Example:

// To simplify, could start with 1 product
const products = [
  {
    name: "Minecraft - Xbox One",
    price: 29.99,
    image: "https://target.scene7.com/is/image/Target/GUEST_780d12cc...",
  },
  // Add more products...
];
 
// TODO: does not have to be function but it can a stretch goal
function createProductHTML(product) {
  // need to add id/data to button
  return `
    <img src="${product.image}" alt="${product.name}" class="product-image">
    <h2>${product.name}</h2>
    <p>$${product.price.toFixed(2)}</p>
    <button class="add-to-cart-button">Add to Cart</button>
  `;
}
 
function displayProducts() {
  const productList = document.getElementById("product-list");
  products.forEach((product) => {
    const productCard = document.createElement("div");
    productCard.classList.add("product-card");
    productCard.innerHTML = createProductHTML(product);
    productList.appendChild(productCard);
  });
}
 
displayProducts();

Agenda (1 hour total)

Instructor Notes

Setup

• Students should have:
  • index.html with a <div id="product-list" class="product-grid"></div> replacing their old hardcoded cards
  • script.js file linked properly in their HTML (placed before closing </body> tag)

<script src="script.js"></script>

Instructor Live Coding Goals

• Define a products array with at least 2–3 objects
• Show how to loop through and render cards inside #product-list
• Separate card layout logic into a helper function (createProductHTML)

1:1 Mentor Goals

• Every student removes their hardcoded HTML product cards
• Every student successfully loads product cards via JavaScript
• Debug common issues:
  • HTML element not found due to wrong id
  • innerHTML typos
  • Not calling the display function

Wrap-up and What’s Next

Reinforce:

• JavaScript helps you generate and control content, not just style it
• Your site can now display any number of products from one list

Preview:

“Next week, you’ll make the Add to Cart button work — clicking it will actually add an item to your cart.”