Übungen

Aufgabe 1 - Ampel

Programmiere eine Ampel in Elm in der folgenden Art:

Die Implementierung kann in folgenden Schritten erfolgen:

1. Beginne mit einer Fußgängerampel mit den Phasen Rot und Grün. Definiere dazu einen eigenen Typ Ampelphase. Die Anzeige erfolgt textbasiert in der Art "Die Ampel zeigt Rot" oder "Die Ampel zeigt Grün".
2. Erweitere die Ampel um die Phasen Rot-Gelb und Gelb. Die Anzeige bleibt textbasiert. Du hast damit die wichtigste Funktionalität einer Ampel implementiert. Es geht dann nur noch um eine schönere Darstellung.
3. Stelle jede Lampe der Ampel als div-Element dar. Das div-Element soll über CSS gestylt werden. Dazu kannst du die Funktion style von Elm z.B. in der folgenden Art verwenden: style "background-color" "red", style "width" "100px", style "border-radius" "50%" und style "border" "1px solid black".
4. Noch aufgeräumter wird dein Code, wenn du die Stile über CSS-Klassen definierst. Du kannst dann die Funktion class von Elm verwenden, benötigst dafür aber eine CSS-Datei oder Angaben im Header der HTML-Datei.