Webbteknik 2

I den här laborationen ska du simulera en “Order Tracker”, liknande de man ser när man beställt mat eller paket online.

Du har en lista med status-steg (t.ex. “Order lagd”, “Tillagas”, “Paketeras”, “Levererad”). När simuleringen startar ska gränssnittet beta av listan steg för steg med en fördröjning, för att visa att processen går framåt.

Följande bild visar hur användargränssnittet ser ut när det är igång:

0 - Förbered filerna

Ladda ner arbetsmaterialet. Packa upp och öppna i VS Code. Starta Live Server. Du kommer se en stilren lista med statusar, men den är statisk.

1 - Bekanta dig med strukturen

Öppna index.html. Notera att statusarna ligger i en lista (<ul> med <li>). Varje <li> representerar ett steg i processen.

2 - Skriv koden

Din uppgift är att skriva logiken i script.js. Det du behöver göra är:

Steg A: Starta processen

Leta upp knappen för att lägga en beställning och koppla en klick-lyssnare. När man klickar på den ska processen börja på det första steget i listan (det första li-elementet).

• Lägg css-klassen, current på det första elementet för att markera att det jobbas på.

Steg B: Simulera arbete (Timer)

Nu ska vi simulera att varje steg tar lite tid.

• Använd setTimeout för att flytta fram processen efter en viss tid.
  • Du kan antingen slumpa fram en tid mellan 3-5 sekunder för varje steg,
  • eller använda en fast tid för varje status (lägg då in respektive tid i ett data-time attribut i html-koden).

I när timern går ut behöver du göra följande:

1. Hitta det element som just nu är .current.
2. Hitta elementets nästa syskon. Här skall du använda DOM-traversering (t.ex. nextElementSibling) för att hitta nästa li, inte en indexering i en array.
3. Om det finns ett nästa syskon:
   • Ta bort klassen current på nuvarande element och lägg istället till completed.
   • Lägg klassen current på nästa syskon.
   • Starta en ny timer för nästa steg (använd samma logik som tidigare för att bestämma tiden).
4. Om det inte finns ett nästa syskon (vilket betyder att vi är klara med alla steg):
   • Lägg till completed på nuvarande element.

3 - Detaljer och UX

Försök att få det att kännas “på riktigt”.

• Inaktivera startknappen (disabled = true) när processen körs så man inte kan starta flera samtidigt.
• Ändra också texten på knappen till “Beställningen bearbetas…” för att indikera att processen är igång.
• När processen är klar, ändra tillbaka texten till “Lägg ny beställning” och aktivera knappen igen.
• Återställ listan (ta bort alla .completed/.current) om man kör en gång till (dvs man klickat på knappen).
• Lägg in ett audio-element som spelar upp ljudet “alert.mp3” när processen är klar (när sista statusen är “completed”).

Tips

• Eftersom du behöver köra samma kod kopplat till olika timers, kan det vara en bra idé att lägga koden i en namngiven funktion som du kan använda tillsammans med setTimeout.