BananaMaster

31 Generator für Produktkarten, for-Praxis (JS-Lektionen)

Falls du etwas vergessen hast — klicke, um zur Lektion zurückzukehren.

📘 Aufgabe: Produktkarten

Erstelle eine Anwendung "Produktkarten".

Nach dem Klick auf den Button muss:

• Mit der for-Schleife 6 Produktkarten erstellen
• Die Karten auf der Seite anzeigen

📐 Jede Karte muss enthalten:

• Die Produktnummer (h2)
• Den Preis (p)
• Einen Button (button) mit dem Text Buy

📐 HTML-Struktur jeder Karte:

• Der Kartenbehälter div class="card"
• Der Produktname h2 class="card-name"
• Der Produktpreis p class="card-price"
• Der Button button mit dem Text Buy

<div class="card"> 

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

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

    <button>Buy</button> 

</div>

📐 Logik der Funktionsweise:

• Starte eine for-Schleife von 1 bis 6
• Erstelle bei jeder Iteration eine neue Karte
• Setze die Produktnummer über die Schleife ein
• Füge die fertige Karte im HTML hinzu

🧪 Beispiel:

📌 Wichtig:
Die Nummerierung der Produkte muss über die for-Schleife erzeugt werden. Am HTML muss nichts geändert werden.