Stap 6, oranje flash

Het oranje licht gaat nu automatisch aan en uit. De functie van kunnen klikken op oranje is nu overbodig. Deze functie gaan we nu wijzigen. Aan het eind van deze stap gaat het oranje licht knipperen en gaan de andere lichten uit.

Als we op het oranje licht klikken dan zal die aan gaan, maar we hebben het algoritme al zo verandert dat het oranje licht vanzelf aan gaat als we het licht op rood willen zetten.

Wat we gaan doen is dat we het stoplicht 'uit' gaan zetten als we op het oranje licht klikken.

Welke stappen gaan we doen?

1. We gaan een style maken die het oranje licht laat knipperen.
2. We maken een nieuwe functie en die noemen we switchOff(). Deze functie voegt de nieuwe stijl toe aan het oranje licht en zet het groene en rode licht uit.
   

Flash stijl

In de style sectie plaatsen we twee nieuwe stijlen:

.lamp-flash {
  animation: flash 1s infinite;
}

@keyframes flash {
    0%, 100% { background-color: darkgray; } /* Light off (dark gray color) */
    50% { background-color: orange; } /* Light on (orange color) */
}

Als we nu de stijl lamp-flash toevoegen aan het oranje licht dan zal hij gaan knipperen.

Functie

In de nieuwe functie switchOff() zetten we het oranje licht op knipperen.

function switchOff() {
  document.getElementById("orange").classList.add('lamp-flash');
}

Functie aanroepen

Als je op het oranje licht klikt dan moet je in plaats van switchLight('red') nu switchOff() aanroepen.

Pas dit aan.

Testen

Als je nu op het oranje licht drukt dan gaat het oranje licht knipperen.

Nice, maar er zijn nog wel een paar stappen die niet goed werken.

Dat gaan we nu oplossen.

Oranje dan andere lichten uit.

Pas de switchOff() aan en zet de andere lichten uit. Kijk in de bestaande code hoe je de lichten uitschakelt en plaats deze code in de switchOff functie. Vergeet niet de glow ook uit te zetten!

En dan moet je de flash ook nog weer uit zetten.

Dat doe je met deze code:

document.getElementById("orange").classList.remove('lamp-flash');

Op het moment dat het stop licht uit staat (dus oranje knippert) dan kan je deze weer aan zetten door op het rode of groene licht te klikken.

Bedenk nu zelf waar je de code moet zetten om het stoplichte weer aan te zetten.

Tekst aanpassen

Als het oranje licht knippert moet de tekst onderaan het stoplicht veranderen naar '-'

Testen

Test of alles werkt aan de hand van volgende tabel.

Status	Klikt op	Resultaat	Tekst	Werkt?
Alles uit (begin)	rood	rood aan, rest uit.	-
rood aan	groen	groen aan, rest uit	STOP
groen aan	rood	oranje aan 1 sec, dan rood aan, rest uit.	GO
rood of groen aan	oranje	alles uit en oranje gaat knipperen	-
oranje knippert	rood	rood aan, rest uit	STOP
oranje knippert	groen	groen aan, rest uit	GO

-