diff --git a/slides/2026-01-24-termin-3-interaktivitaet-javascript.md b/slides/2026-01-24-termin-3-interaktivitaet-javascript.md index 1f19d84..021bfff 100644 --- a/slides/2026-01-24-termin-3-interaktivitaet-javascript.md +++ b/slides/2026-01-24-termin-3-interaktivitaet-javascript.md @@ -767,57 +767,31 @@ State in Klasse gespeichert --- -# Beispiel: Formular-Validierung - -```javascript -const form = document.querySelector("#kontaktForm"); -const emailInput = document.querySelector("#email"); -const errorMessage = document.querySelector("#error"); - -form.addEventListener("submit", function(event) { - const email = emailInput.value; - - if (!email.includes("@")) { - event.preventDefault(); - errorMessage.textContent = "Bitte gültige E-Mail eingeben!"; - errorMessage.style.display = "block"; - } -}); - -// Live-Feedback -emailInput.addEventListener("input", function() { - if (emailInput.value.includes("@")) { - errorMessage.style.display = "none"; - } -}); -``` - - - ---- - # Hands-On: Interaktive Features (45 Min) **Baut in eure Seite ein:** -1. **Dark Mode Toggle** +1. **Dark Mode Toggle** – Button toggelt Klasse auf `body` +2. **Accordion/FAQ** – Klick zeigt/versteckt Antwort + +**Tipp:** `classList.toggle()` + CSS `display: none/block` + +**Hilfe:** https://codescripsi.es/ + + --- @@ -835,30 +809,21 @@ Server-Validation trotzdem nötig! --- -# Projekt: Interaktive Portfolio-Seite +# Übung: Interaktive Portfolio-Seite -**Ihr habt jetzt alle Bausteine:** - -- **HTML:** Struktur -- **CSS:** Design -- **JavaScript:** Interaktivität - -**Kombiniert sie!** +**Kombiniert eure Bausteine:** +HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität) --- -# Projekt-Anforderungen +# Übung: Anforderungen **Must-Have:** - [ ] Semantisches HTML -- [ ] Responsive CSS (Mobile + Desktop) -- [ ] Mindestens 2 interaktive Features mit JS +- [ ] Responsive CSS +- [ ] 2 interaktive JS-Features -**Nice-to-Have:** -- [ ] Dark Mode -- [ ] Animationen/Transitions -- [ ] Formular mit Validierung -- [ ] Dynamisch generierte Inhalte +**Nice-to-Have:** Dark Mode, Animationen, Formular-Validierung **Zeit:** 60 Minuten @@ -968,35 +933,28 @@ Frameworks für größere Apps, Komponenten-basiert --- + + # Ressourcen zum Weiterlernen -**Dokumentation:** -- MDN Web Docs: https://developer.mozilla.org/de/ +- **MDN Web Docs:** https://developer.mozilla.org/de/ +- **freeCodeCamp:** https://freecodecamp.org +- **The Odin Project:** https://theodinproject.com -**Interaktiv lernen:** -- HTML: https://nextlevelshit.github.io/html-over-js/ -- CSS: https://codescripsi.es/ -- JS Visualisierung: https://nextlevelshit.github.io/web-engineering-mandala/ - -**Kurse:** -- freeCodeCamp: https://freecodecamp.org -- The Odin Project: https://theodinproject.com +**Interaktiv:** +- https://codescripsi.es/ --- + + # Tools für die Praxis -**Editoren:** -- VS Code (empfohlen) -- WebStorm (JetBrains) -- Neovim (für Terminal-Fans) +**Editoren:** VS Code (empfohlen), WebStorm, Neovim -**Online-Editoren:** -- CodePen: https://codepen.io -- StackBlitz: https://stackblitz.com +**Online:** CodePen, StackBlitz -**Versionskontrolle:** -- Git + GitHub/GitLab +**Versionskontrolle:** Git + GitHub/GitLab --- @@ -1008,30 +966,36 @@ Frameworks für größere Apps, Komponenten-basiert # Was ihr gelernt habt -**Termin 1:** +**Termin 1:** Geschichte, Von-Neumann, HTML +**Termin 2:** Netzwerke, DNS, HTTP, CSS +**Termin 3:** JavaScript, DOM, Events + + --- # Ihr könnt jetzt... -✅ Den historischen Kontext von IT verstehen -✅ Erklären wie das Internet funktioniert -✅ HTML-Seiten strukturieren -✅ CSS für Layout und Design nutzen -✅ JavaScript für Interaktivität einsetzen -✅ **Mit EntwicklerInnen auf Augenhöhe sprechen!** +- Den historischen Kontext von IT verstehen +- Erklären wie das Internet funktioniert +- HTML-Seiten strukturieren +- CSS für Layout und Design nutzen +- JavaScript für Interaktivität einsetzen +- **Mit EntwicklerInnen auf Augenhöhe sprechen!** --- diff --git a/slides/assets/hollerith-machine-2.jpg b/slides/assets/hollerith-machine-2.jpg new file mode 100644 index 0000000..5adaedf Binary files /dev/null and b/slides/assets/hollerith-machine-2.jpg differ diff --git a/slides/assets/hollerith-machine-3.jpg b/slides/assets/hollerith-machine-3.jpg new file mode 100644 index 0000000..a85a344 Binary files /dev/null and b/slides/assets/hollerith-machine-3.jpg differ diff --git a/slides/assets/hollerith-machine.jpg b/slides/assets/hollerith-machine.jpg new file mode 100644 index 0000000..9823913 Binary files /dev/null and b/slides/assets/hollerith-machine.jpg differ