Stap 3, halo-effect

Aan het eind van deze stap hebben alle drie de lampen een halo-effect.

Halo effect

Om meer een gevoel te krijgen dat er echt een lamp brandt, voegen we bij de lamp die aan is een zogenaamd halo-effect toe.

Dat ziet er als volgt uit:

Zonder halo effect	Met halo effect

Om dit te maken voegen we eerst een class toe aan de styles (tussen <style> en </style>):

.glow {
      box-shadow: 0 0 20px 8px rgba(165,165,165,0.8);
}

Via de code in <script> </script> kunnen we de style toepassen.

Halo-effect aan

Om het halo-effect aan te zetten voegen we de class toe aan het licht met de code:

document.getElementById("red").classList.add('glow');

Halo-effect uit

En om het halo-effect uit te zetten halen we de class weer weg met de code:

document.getElementById("red").classList.remove('glow');

Probeer nu zelf te bepalen waar in de code je het halo-effect aan en uit moet zetten. Doe dat eerst alleen voor het rode licht.

Testen

Als het rode licht aan is, dan zie je het halo-effect en als het rode licht uit is dan is het halo-effect weg.

Je kunt op twee manieren het rode licht uit zetten: door op het oranje- of groene licht te drukken. Test of in beide gevallen het halo-effect uit gaat.

Als dat werkt dan kun je door naar de volgende stap.

Halo effect op oranje en groene licht

Breidt de code nu uit en maak een halo-effect op het groen licht en daarna op het oranje licht.

Testen

Test goed of alles werkt, klik alle lampen aan en uit en controleer of in alle gevallen het halo-effect aan en uitschakelt.

Werkt alles?

Gefeliciteerd, je hebt deel 1 van de opdracht volbracht!

--