Hinweis

Alle Herausforderungen können standardmäßig fehlerhaft erscheinen, da sie Leerstellen enthalten, in die der erforderliche Code eingefügt werden muss. Sobald diese Leerstellen korrekt ausgefüllt sind, wird der vollständige Code auf der Live-Seite angezeigt.

Zusätzlich verfügt jede Herausforderung über zwei Schaltflächen: Hinweis und Lösung. Ein Klick auf Hinweis liefert kleine Hinweise zur aktuellen Aufgabe, während die Auswahl der Schaltfläche Lösung die vollständige Lösung in einem neuen Tab öffnet.

Arbeiten mit Code Sandbox

Aufgabe: Erstellen einer Produktkarte

Die Produktkarte erstellen und im DOM rendern. Die Produktkarte benötigt:

1. Das Produktbild (img-Element).
   • Das src-Attribut muss dem Wert der Variablen imageUrl entsprechen.
   • Das alt-Attribut muss dem String Computer entsprechen.
   • Das width-Attribut muss den Wert 256 haben.
2. Den Produkttitel (h3-Element).
   • Der Textinhalt muss Computer sein.
3. Den Produktpreis (span-Element).
   • Der Textinhalt muss Price: $129.99 sein.
4. Die Produktbeschreibung (p-Element).
   • Der Textinhalt muss New Model sein.

1. Das src-Attribut muss die Variable imageUrl als Wert enthalten. Verwenden Sie geschweifte Klammern {}.
2. Das alt-Attribut muss den String "Computer" als Wert enthalten. In doppelte Anführungszeichen setzen.
3. Das width-Attribut muss die Zahl 256 als Wert enthalten. Verwenden Sie geschweifte Klammern {}.
4. Sicherstellen, dass die h3-, span- und p-Elemente die korrekten Werte enthalten.