Övning 9: Ballongen

Öppna mappen po9 i Visual Studio Code (eller den editor du föredrar). Studera HTML- och CSS-koden och skriv sedan den JavaScript-kod som krävs för att uppfylla nedanstående.

  1. När man klickar på ballongen skall dess storlek öka med 5px.
  2. När man klickar på rutan ballongen befinner sig i skall rutans storlek öka med 5px.
  3. Om ballongens storlek endast är 5px ifrån rutans storlek skall CSS-klassen warning användas för rutan.
  4. Om ballongens storlek är större än eller lika med rutans storlek skall CSS-klassen boom för rutan användas samt ballongen bytas ut mot en döskalle. Döskallen storlek skall då förminskas jämfört med ballongen.
  5. CSS-klasser med animeringar finns färdiga att använda.
  6. Ett klick på ballongen skall ej räknas som ett klick på rutan (då blir det omöjligt att spränga ballongen).

Praktisk övning 9