+
+
\ No newline at end of file
diff --git a/web/10/demos/events/02_events.html b/web/10/demos/events/02_events.html
new file mode 100644
index 0000000..2b0aa22
--- /dev/null
+++ b/web/10/demos/events/02_events.html
@@ -0,0 +1,16 @@
+
+
+
+
+ Events
+
+
+
+
Noch nichts passiert...
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/10/demos/events/02_events.js b/web/10/demos/events/02_events.js
new file mode 100644
index 0000000..39e0639
--- /dev/null
+++ b/web/10/demos/events/02_events.js
@@ -0,0 +1,20 @@
+// Button-Click-Event
+const button = document.getElementById("klickButton");
+const ausgabe = document.getElementById("ausgabe");
+
+button.addEventListener("click", () => {
+ ausgabe.textContent = "Button wurde geklickt!";
+});
+
+// Input-Event
+const eingabe = document.getElementById("eingabe");
+const eingabeAusgabe = document.getElementById("eingabeAusgabe");
+
+eingabe.addEventListener("input", () => {
+ eingabeAusgabe.textContent = "Du hast eingegeben: " + eingabe.value;
+});
+
+// Mouseover-Event
+button.addEventListener("mouseover", () => {
+ ausgabe.textContent = "Maus über dem Button!";
+});
\ No newline at end of file
diff --git a/web/10/demos/validierung/03_validierung.html b/web/10/demos/validierung/03_validierung.html
new file mode 100644
index 0000000..1f7c8cd
--- /dev/null
+++ b/web/10/demos/validierung/03_validierung.html
@@ -0,0 +1,31 @@
+
+
+
+
+ Formularvalidierung mit Live-Feedback
+
+
+
Registrierung
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/10/demos/validierung/03_validierung.js b/web/10/demos/validierung/03_validierung.js
new file mode 100644
index 0000000..18abb55
--- /dev/null
+++ b/web/10/demos/validierung/03_validierung.js
@@ -0,0 +1,78 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const form = document.getElementById("contactForm");
+
+ const username = document.getElementById("username");
+ const email = document.getElementById("email");
+ const age = document.getElementById("age");
+
+ const usernameError = document.getElementById("usernameError");
+ const emailError = document.getElementById("emailError");
+ const ageError = document.getElementById("ageError");
+
+ // --- Live-Feedback ---
+ username.addEventListener("input", () => {
+ const value = username.value.trim().toLowerCase();
+ if (!value) {
+ usernameError.textContent = "Benutzername darf nicht leer sein.";
+ } else if (value === "admin") {
+ usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
+ } else {
+ usernameError.textContent = "";
+ }
+ });
+
+ email.addEventListener("input", () => {
+ if (!email.validity.valid) {
+ emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
+ } else {
+ emailError.textContent = "";
+ }
+ });
+
+ age.addEventListener("input", () => {
+ if (!age.validity.valid) {
+ if (age.validity.valueMissing) {
+ ageError.textContent = "Bitte das Alter angeben.";
+ } else if (age.validity.rangeUnderflow) {
+ ageError.textContent = "Du musst mindestens 18 Jahre alt sein.";
+ } else if (age.validity.rangeOverflow) {
+ ageError.textContent = "Das Alter darf 99 nicht überschreiten.";
+ } else {
+ ageError.textContent = "Ungültige Eingabe.";
+ }
+ } else {
+ ageError.textContent = "";
+ }
+ });
+
+ // --- Prüfung beim Absenden ---
+ form.addEventListener("submit", (event) => {
+ let valid = true;
+
+ // Benutzername prüfen
+ const value = username.value.trim().toLowerCase();
+ if (!value) {
+ usernameError.textContent = "Benutzername darf nicht leer sein.";
+ valid = false;
+ } else if (value === "admin") {
+ usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
+ valid = false;
+ }
+
+ // E-Mail prüfen
+ if (!email.validity.valid) {
+ emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
+ valid = false;
+ }
+
+ // Alter prüfen
+ if (!age.validity.valid) {
+ ageError.textContent = "Bitte ein gültiges Alter zwischen 18 und 99 eingeben.";
+ valid = false;
+ }
+
+ if (!valid) {
+ event.preventDefault(); // verhindert das Absenden
+ }
+ });
+});
\ No newline at end of file
diff --git a/web/10/labor/10_aufgaben.md b/web/10/labor/10_aufgaben.md
new file mode 100644
index 0000000..165524e
--- /dev/null
+++ b/web/10/labor/10_aufgaben.md
@@ -0,0 +1,70 @@
+# Ü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)
+
+
diff --git a/web/10/labor/Adventskranz.png b/web/10/labor/Adventskranz.png
new file mode 100644
index 0000000..f9655a2
Binary files /dev/null and b/web/10/labor/Adventskranz.png differ
diff --git a/web/10/labor/bunt.html b/web/10/labor/bunt.html
new file mode 100644
index 0000000..b3ee14f
--- /dev/null
+++ b/web/10/labor/bunt.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+ Buntes HTML
+
+
+
Jetzt wird es bunt
+
Alles in Blau-Tönen
+ Dieser Text ist darkblue.
+
+ Dieser Text ist lightskyblue.
+
Alles in Violett-Tönen
+
Dieser Absatz ist pink.
+
Dieser Absatz ist magenta.
+
Alles in Grün-Tönen
+
+ Hier ist alles greenyellow.
+
+
+ Auch der Bereich zwischen dem Text.
+
+
+
\ No newline at end of file
diff --git a/web/10/labor/pawpatrol.html b/web/10/labor/pawpatrol.html
new file mode 100644
index 0000000..d399a2c
--- /dev/null
+++ b/web/10/labor/pawpatrol.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ Paw Patrol - Helfer auf vier Pfoten
+
+
+
+