Merk

Alle utfordringer kan fremstå som ødelagte som standard, siden de inneholder tomrom der du må legge inn nødvendig kode. Når du har fylt ut disse tomrommene korrekt, vil den fullførte koden vises på den aktive siden.

I tillegg har hver utfordring to knapper: Hint og Solution. Ved å klikke på Hint får du små hint til den aktuelle utfordringen, mens valg av Solution åpner en ny fane med den fullførte utfordringen.

Hvordan bruke Code Sandbox

Oppgave: Lage et produktkort

Lag produktkortet og gjengi det i DOM-en. Produktkortet skal inneholde:

1. Produktbilde (img-element).
   • src-attributtet må være lik variabelen imageUrl.
   • alt-attributtet må være lik strengen Computer.
   • width-attributtet må være lik 256.
2. Produkttittel (h3-element).
   • Tekstinnholdet må være Computer.
3. Produktpris (span-element).
   • Tekstinnholdet må være Price: $129.99.
4. Produktbeskrivelse (p-element).
   • Tekstinnholdet må være New Model.

1. src-attributtet må inneholde variabelen imageUrl som verdi. Bruk krøllparenteser {}.
2. alt-attributtet må inneholde strengen "Computer" som verdi. Sett den i doble anførselstegn.
3. width-attributtet må inneholde tallet 256 som verdi. Bruk krøllparenteser {}.
4. Kontroller at elementene h3, span og p har riktige verdier.