# Übungsblatt 10

## 1. Javascript-Übung: DOM und Events

**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die ein Bild zum Adventsgruß anzeigt.

#### Arbeitsschritte

1. Erstellen Sie zunächst eine HTML-Seite mit der Überschrift (erste Ebene): "Alle Jahre wieder...".
2. Darunter ist ein Button-Element mit der Aufschrift "Erste 🕯️ anzünden".
3. Sobald der Button geklickt wurde:
	1. wird die alte Überschrift durch diese ersetzt: "Einen fröhlichen ersten Advent!"
	2. erscheint diese [Bild](Adventskranz.png) unterhalb der Überschrift (*Tipp*: [w3schools.com: Image](https://www.w3schools.com/jsref/prop_img_src.asp))
	3. der Button verschwindet
All dies soll in einem Javascript-Programm gesteuert werden, dass Sie in Ihre HTML-Seite einbinden.

## 2. Javascript-Übung: Validierung und Events

**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, in der Nutzer:innen den Namen ihres Lieblingshelden der [Paw‑Patrol](https://de.wikipedia.org/wiki/PAW_Patrol) eingeben können und daraufhin einen passenden Spruch angezeigt bekommen.

#### Arbeitsschritte

1. Verwenden Sie dazu das vorgebene HTML-Formular [pawpatrol.html](pawpatrol.html).
2. Erstellen Sie eine zugehörige JavaScript‑Datei, in der Sie ein Objekt mit den erlaubten Figuren und deren typischen Sprüchen hinterlegen:

```
"Chase": "Chase ist auf Spur!"
"Marshall": "Ich bin startklar!"
"Skye": "Diese Pfote hebt ab!"
"Rocky": "Wegwerfen? Kommt nicht in die Tüte!"
"Rubble": "Rubble ist zur Stelle!"
"Zuma": "Los geht’s ins Wasser!"
"Everest": "Eis und Schnee – ich bin bereit!"
"Tracker": "Ich höre alles!"
```

3. Bei Absenden des Formulars (`submit`) prüfen Sie mit Ihrem JavaScript, ob der eingegebene Name mit einem der Namen aus dem Objekt übereinstimmt. 
	- Falls *ja*, geben Sie eine Bestätigungsmeldung in Abschnitt mit `id="meldung"` sowie den passenden Spruch der Figur in dem Abschnitt mit `id="spruch"` aus.
	- Falls *nein*, erscheint eine Fehlermeldung im Abschnitt mit `id="meldung"`, die darauf hinweist, dass nur Paw‑Patrol‑Namen erlaubt sind.
4. Testen Sie Ihr Javascript mit Hilfe des vorgegebenen HTML-Formulars.

## 3. CSS-Übung: Selektoren

**Aufgabenstellung**: Definieren Sie ein CSS-Stylesheet, das ein vorgegebenes HTML-Dokument einfärbt.

#### Arbeitsschritte

1. Verwenden Sie dazu das vorgebene HTML-Formular [bunt.html](bunt.html).
2. Erstellen Sie ein Stylesheet und verlinken es im HTML.
3. Setzen Sie die Hintergrundfarbe des Dokuments auf `slateblue`.
4. Die Überschrift der ersten Ebene soll `lightcoral` sein.
5. Alle Überschriften der zweiten Ebene sollen `whitesmoke` sein.
6. Setzen Sie die restlichen Farben, wie der Text es fordert.

## 4. CSS-Übung: Farben und Events

**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die nach Auswahl einer Farbe die Hintergrundfarbe verändert.

#### Arbeitsschritte:

1. Erstellen Sie eine HTML-Seite auf der ein Eingabefeld des Typs `color` zu sehen ist. Denken Sie auch an eine geeignete Beschriftung.
2. Schreiben Sie ein Javascript-Programm, dass bei Auswahl einer Farbe
	1. den Hintergrund der HTML-Seite anpasst
	2. die gewählte Farbe in einer `alert`-Nachricht ausgibt

#### Tipps
- Setzen der Hintergrundfarbe [w3schools.com: Backgroundcolor](https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp)
- Auslesen der Farbauswahl [w3schools.com: Input Color](https://www.w3schools.com/jsref/prop_color_value.asp)