Webbteknik 2

Funktionsbeskrivning

Följande funktionalitet ska implementeras i programmet. Det kan kanske se ut som mycket, men är egentligen ganska lite i varje del. Har du först gått igenom exemplen och övningarna i exempelsamlingen, kommer du ha en hel del nytta av det. Utför de olika delarna i den ordning de anges här och testa ditt program efter varje del.

Beräkning av kostnaden

• Funktionen calculateCost: Avläs användarens val i formuläret och beräkna kostnaden. Kostnaden är (pris för valt rum + summan av pris för valda tillägg) * antal nätter.
  • För rumstyp och tillägg går du igenom knapparna i en loop, för att se vilken/vilka som är valda.
  • Priset finns i konstanterna roomPrice och facilityPrice, som har samma index som knapparna.
• Skriv ut kostnaden i elementet med id "totalCost".
• Testa genom att göra några olika val i formuläret och ladda om sidan.
  • Eftersom det redan ligger ett anrop av calculateCost i init-funktionen, så sker beräkningen varje gång sidan laddas om.

Händelselyssnare för anrop av calculateCost

• Funktionen init: Lägg till händelselyssnare, så att calculateCost anropas varje gång man klickar på en knapp för typ av rum eller en knapp för tillägg, samt då man gör ett nytt val i menyn för antal nätter.
  • Det finns redan kommentarer och tomrader i koden, där du bör lägga in din kod för händelselyssnarna.
• Testa genom att göra några val i formuläret. Varje gång ett nytt val görs, ska kostnaden räknas om.

Aktivering / inaktivering av olika val

• Funktionen checkIfFamilyRoom: Om knappen för familjerum är vald ska menyn för antal personer aktiveras. Knappen för tillägget Sjöutsikt ska inaktiveras och avmarkeras (så att det inte är någon bock i rutan).
  • Använd egenskapen disabled, för att akivera eller inaktivera.
  • Använd egenskapen checked, för att avmarkera.
• Annars (om familjerum ej är valt) ska menyn för antal personer inaktiveras och tillägget sjöutsikt aktiveras. I detta fall ska inte markeringen (bocken) av knappen påverkas.
• Funktionen calculateCost: Lägg in ett anrop av checkIfFamilyRoom i början av funktionen.

Kontroll av postnummer och telefonnummer

• Funktionen checkField: Kopiera funktionens innehåll från exempel 4-2. Koden ska vara exakt densamma som i exemplet.
• Funktionen init: Lägg till en händelselyssnare på elementen för postnummer och telefonnummer, så att checkField anropas, då man lämnar fälten.
• Testa att skriva något i fälten och klicka sedan utanför dem. Kontrollera att felmeddelandena dyker upp, då innehållet är fel och att de sedan försvinner, då innehållet är rätt.

Kontroll av kampanjkod

• Funktionen init: Lägg händelselyssnare på elementet för kampanjkoden, så att checkCampaign anropas både då man klickar i fältet och då man skriver i det.
  • En händelselyssnare för händelsen focus och en för händelsen keyup.
• Lägg också på en händelselyssnare så att endCheckCampaign anropas, då man lämnar fältet.
  • En händelselyssnare för händelsen blur.
• Funktionen checkCampaign: Skriv ett reguljärt uttryck för följande mönster: tre bokstäver, bindestreck, två siffror, bindestreck, en bokstav, en siffra. T.ex. är ABC-12-D3 en korrekt kod. Det ska fungera både med versaler och gemener.
• Lägg in en if-sats där du kontrollerar om innehållet i textfältet stämmer med mönstret i det reguljära uttrycket. I så fall sätter du bakgrundsfärgen till en grön färg ("#6F9") annars sätter du bakgrundsfärgen till en röd färg ("#F99").
  • Funktionen anropas endast genom händelselyssnare som ligger på fältets element, så du kan använda this som referens till elementet.
• Funktionen endCheckCampaign: Ta bort bakgrundsfärgen på fältet, genom att sätta färgen till en tom textsträng (""). Konvertera också innehållet till stora bokstäver med funktionen toUpperCase och skriv tillbaks det i fältet.

Test och kodens stil

• Testa alla delar i programmet och kontrollera att de fungerar och att du inte får något felmeddelande i konsolen.
• Se över kodens stil och att programkoden är korrekt indenterad samt att de lokala variabler du infört har relevanta namn på engelska.