Herausforderung: Rendering-Element

Hinweis

Alle Herausforderungen können standardmäßig fehlerhaft erscheinen, da sie Leerzeichen enthalten, in die Sie den erforderlichen Code eingeben müssen. Sobald Sie diese Leerzeichen korrekt ausgefüllt haben, 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 bietet kleine Hinweise zur aktuellen Herausforderung, während die Auswahl der Schaltfläche Lösung einen neuen Tab mit der abgeschlossenen Herausforderung öffnet.

Wie man mit Code Sandbox arbeitet

Aufgabe: Erstellen einer Produktkarte

Erstellen Sie die Produktkarte und rendern Sie sie im DOM. Die Produktkarte benötigt:

1. Das Produktbild (img-Element).
   • Das src-Attribut muss gleich der Variablen imageUrl sein.
   • Das alt-Attribut muss gleich dem String Computer sein.
   • Das width-Attribut muss gleich 256 sein.
2. Den Produkttitel (h3-Element).
   • Der Textinhalt muss Computer sein.
3. Den Produktpreis (span-Element).
   • Der Textinhalt muss Preis: $129.99 sein.
4. Die Produktbeschreibung (p-Element).
   • Der Textinhalt muss Neues Modell 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. Umschließen Sie es in doppelte Anführungszeichen.
3. Das width-Attribut muss die Zahl 256 als Wert enthalten. Verwenden Sie geschweifte Klammern {}.
4. Stellen Sie sicher, dass die h3-, span- und p-Elemente die richtigen Werte haben.