Aufgabe 20 - Klickzähler und Ampel

Aufgabe 20 - Klickzähler und Ampel

Worum geht es?

Ihre Programme bekommen eine Oberfläche: Sie reagieren auf Klicks und verändern die Seite aus JavaScript heraus (siehe Kapitel DOM und Events).

In dieser Übung üben Sie:

• Finden: Elemente mit querySelector ansprechen.
• Reagieren: Klick-Events mit addEventListener behandeln.
• Verändern: Texte und Styles aus JavaScript setzen.

Benötigte Unterlagen

• VS Code, Browser; ein Projekt mit index.html, style.css, script.js.

Arbeitsaufträge

Teil A - Klickzähler

1. Die Seite zeigt eine große Zahl (Start: 0) und drei Buttons: +1, -1, Reset.
2. Implementieren Sie die drei Buttons. Der Zähler darf nie unter 0 fallen.
3. Ab 10 wird die Zahl grün, ab 20 zusätzlich fett. Setzen Sie dazu CSS-Klassen aus JavaScript (classList).

Teil B - Fußgängerampel

1. Bauen Sie eine Ampel aus drei runden divs (rot, gelb, grün). Die Gestaltung liegt in style.css, aktiv und inaktiv werden über CSS-Klassen geschaltet.
2. Ein Button Weiter schaltet in die nächste Phase: Rot, Rot-Gelb, Grün, Gelb, wieder Rot.
3. Merken Sie sich die aktuelle Phase in einer Variable und implementieren Sie die Schaltlogik in einer eigenen Funktion naechstePhase().
4. Zusatz: Ein zweiter Button Automatik schaltet alle 2 Sekunden weiter (setInterval auf MDN nachschlagen); ein erneuter Klick stoppt.

Teil C - Sauber trennen

Kontrollieren Sie zum Schluss: In index.html steht kein JavaScript und kein style-Attribut; die Logik (Phasen-Schaltung) ist von der Darstellung (Klassen setzen) getrennt. Notieren Sie als Kommentar, welche Funktion was verantwortet.

Abgabe

Projektordner. Beide Anwendungen müssen ohne Konsolenfehler laufen.