BananaMaster

31 Générateur de cartes produits, pratique de for (Leçons JS)

Si tu as oublié quelque chose — clique pour retourner à la leçon.

📘 Tâche : Cartes produits

Créez une application "Cartes produits".

Après avoir cliqué sur le bouton, il faut :

• À l'aide de la boucle for, créer 6 cartes produits
• Afficher les cartes sur la page

📐 Chaque carte doit contenir :

• Le numéro du produit (h2)
• Le prix (p)
• Un bouton (button) avec le texte Buy

📐 Structure HTML de chaque carte :

• Le conteneur de la carte div class="card"
• Le nom du produit h2 class="card-name"
• Le prix du produit p class="card-price"
• Le bouton button avec le texte Buy

<div class="card"> 

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

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

    <button>Buy</button> 

</div>

📐 Logique de fonctionnement :

• Lancer une boucle for de 1 à 6
• À chaque itération, créer une nouvelle carte
• Insérer le numéro du produit via la boucle
• Ajouter la carte terminée dans le HTML

🧪 Exemple :

📌 Important :
La numérotation des produits doit être générée via la boucle for. Ne modifiez rien dans le HTML.