I den här laborationen skall du skriva javascriptkoden för att hantera en fruktkorg. Följande är en bild som illustrerar fruktkorgen när några frukter ha lagts till:
0 - Förbered filerna
Ladda ner arbetsmaterialet för denna laboration. Packa upp zip-filen och öppna mappen lab3ex1 i VS Code. Öppna sedan filen index.html med Live Server.
1 - Bekanta dig med uppgiften
Kolla runt i filerna för att bekanta dig med dem, speciellt index.html där du kan se de olika html-elementen som du kommer att behöva interagera med. Du kommer dock bara att behöva skriva din kod i script.js. Där finns också redan en funktion som du kan använda för att skapa en html-sträng för ett bild-element för en given frukt.
2 - Skriv koden
Ta ett djupt andetag och börja koda. Om du har svårt att veta var du skall börja, försöka att bryta ner uppgiften i mindre delar och ta en sak i taget. Detta är en översikt över vad du behöver göra:
- Skapa en händelsehanterare för klick på knappen.
- Läsa ut vilken frukt och vilket antal som är valt.
- Använda en loop för att lägga till rätt antal frukter i fruktkorgen
- För varje frukt, skapa html-koden för ett bild-element med hjälp av den medföljande funktionen och lägg till den i
innerHTMLpå rätt element.
Extra utmaningar
För de extra utmaningarna nedan kan du behöva redigera index.html och style.css. Lägg själv till de element som behövs.
- Lägg till en knapp för att tömma hela fruktkorgen på en gång.
- Lägg till en räknare som visar hur många frukter som finns i korgen.
- Räkna varje frukttyp och visa det någonstans på sidan, t.ex. “2 äpplen, 1 banan”.
- Hitta på ett pris för varje frukt och visa det totala priset för frukterna i korgen.