# Übungsblatt 11

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

**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die ein Bild zum Start der Pfingstferien anzeigt.

#### Arbeitsschritte

1. Erstellen Sie zunächst eine HTML-Seite mit der Überschrift (erste Ebene): "Endlich Pfingsferien!".
2. Darunter ist ein Button-Element mit der Aufschrift "Ferien starten 🌞".
3. Sobald der Button geklickt wurde:
	1. wird die alte Überschrift durch diese ersetzt: "Schöne und erholsame Pfingstferien!"
	2. erscheint diese [Bild](Pfingstrose.jpg) 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.