BananaMaster

31 - Product Card Generator, for loop practice (JS lessons)

If you forgot something, click to go to the lesson

📘 Task: Product Cards

Build a "Product Cards" application.

After clicking the button:

• Use a for loop to generate 6 product cards
• Display the cards on the page

📐 Each card must contain:

• Product number (h2)
• Price (p)
• A button with the text Buy

📐 HTML structure of each card:

• Card container div class="card"
• Product name h2 class="card-name"
• Product price p class="card-price"
• Button button with the text Buy

<div class="card"> 

    <h2 class="card-name">Product 1</h2> 

    <p class="card-price">100$</p> 

    <button>Buy</button> 

</div>

📐 How it works:

• Run a for loop from 1 to 6
• On each iteration create a new card
• Insert the product number using the loop variable
• Add the finished card to the HTML

🧪 Example:

📌 Important:
Product numbering must be generated through the for loop. Do not change anything in the HTML.