README aktualisiert (20.05.2026), teambild.jpeg, galerie.html finalisiert

README.md

@@ -21,17 +21,24 @@ https://isa##.edumake.de
 ├── index.html              # Startseite
 ├── ueber_uns.html          # Über uns & Dozenten
 ├── eis_projekt.html        # Projektdetails
+├── team.html               # Team-Seite
+├── galerie.html            # Bildergalerie (Lightbox)
+├── notenrechner.html       # Notenrechner (DOM-basiert)
+├── textanalyse.html        # Textanalyse-Tool
+├── api.html                # fetch & API Demo (JSONPlaceholder)
+├── kanban.html             # Kanban-Board (Drag & Drop)
 ├── kontakt.html            # Kontaktformular
 ├── impressum.html          # Rechtliche Infos
 ├── css/
-│   └── style.css           # Zentrale Stylesheet
+│   └── style.css           # Zentrale Stylesheet (~3600 Zeilen)
 ├── js/
-│   └── script.js           # JavaScript für Interaktivität
+│   ├── script.js           # Dark Mode, Hamburger-Nav, Formular, Lightbox
+│   ├── api-demo.js         # fetch() API Demo
+│   └── kanban.js           # Kanban-Board Logik
 ├── img/
-│   ├── logo.svg            # PH-Logo
+│   ├── logo.png            # Projekt-Logo
-│   └── favicon.svg         # Browser-Icon
+│   ├── gruppenbild.jpg     # Team-Gruppenbild
-├── assets/
+│   └── teambild.jpeg       # Teambild
-│   └── projektinfo.pdf     # Downloadbereich
 └── README.md               # Diese Datei
 ```
 
@@ -39,19 +46,26 @@ https://isa##.edumake.de
 
 ### Frontend
 - **HTML5** – Semantisches Markup
-- **CSS3** – Responsive Design mit Grid & Flexbox
+- **CSS3** – Responsive Design mit Grid & Flexbox (~3600 Zeilen)
 - **JavaScript (ES6+)** – Interaktive Elemente
+  - Dark Mode mit localStorage-Persistenz
+  - Hamburger-Navigation (Mobile)
   - Lightbox-Galerie
-  - Formularvalidierung
+  - Formularvalidierung (feldspezifisch)
-  - Navigation-Highlighting
+  - fetch() API Demo
+  - Kanban-Board (Drag & Drop)
 
 ### Features
 - ✅ Responsive Design (Mobile, Tablet, Desktop)
-- ✅ Einheitliche Navigation
+- ✅ Dark Mode (Toggle + localStorage)
-- ✅ Kontaktformular mit Validierung
+- ✅ Hamburger-Menü (Mobile)
+- ✅ Einheitliche Navigation (11 Seiten)
+- ✅ Kontaktformular mit feldspezifischer JS-Validierung
 - ✅ Bildergalerie mit Lightbox
-- ✅ Download-Bereich
+- ✅ Notenrechner (DOM-basiert, Tabs, Fortschrittsbalken)
-- ✅ Impressum & rechtliche Hinweise
+- ✅ Textanalyse-Tool (Wörter, Zeichen, Sätze, Metriken)
+- ✅ fetch & API Demo (JSONPlaceholder, DOM-Rendering, Fehlerbehandlung, Filter)
+- ✅ Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export)
 - ✅ SEO-freundliches Markup
 
 ## 🖥️ SSH-Zugang
@@ -105,46 +119,68 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
 
 ## 🔧 JavaScript-Funktionen
 
-### 1. Navigation-Highlighting
+### script.js (Basis)
-- Automatisches Markieren des aktiven Links basierend auf URL
+- **Dark Mode** – Toggle + sofortige Wiederherstellung via localStorage (IIFE)
+- **Hamburger-Navigation** – Mobile Menü mit aria-Attributen
+- **Navigation-Highlighting** – Aktiver Link basierend auf URL
+- **Lightbox-Galerie** – Klick auf Bilder öffnet vergrößerte Ansicht (ESC/Overlay zum Schließen)
+- **Kontaktformular** – Feldspezifische Validierung, Erfolgsmeldung im DOM
 
-### 2. Lightbox-Galerie
+### api-demo.js
-- Klick auf Bilder öffnet eine vergrößerte Ansicht
+- `fetch('https://jsonplaceholder.typicode.com/users')` – automatischer Aufruf
-- ESC-Taste zum Schließen
+- `.then(r => r.json())` – JSON-Parsing mit HTTP-Status-Prüfung
-- Overlay-Klick zum Schließen
+- `console.log()` + `console.table()` – strukturierte Ausgabe
+- `createElement` + `DocumentFragment` – performantes DOM-Rendering
+- `.catch(err)` – Fehlermeldung + „Erneut versuchen"-Button
+- Client-seitiger Live-Filter (Name, Stadt, Firma, E-Mail)
 
-### 3. Kontaktformular
+### kanban.js
-- Email-Validierung
+- Spalten anlegen (`prompt` → `createElement` + `appendChild`)
-- Erfolgs-/Fehlermeldungen
+- Karten anlegen / löschen / editieren (`contenteditable`)
-- Automatisches Zurücksetzen nach Absenden
+- Drag & Drop (`dragstart`, `dragover`, `drop`, `dragenter`, `dragleave`)
+- Präzise Reihenfolge via `getBoundingClientRect` + Drop-Placeholder
+- Farbige Labels per Rechtsklick-Kontextmenü
+- Vollständige Persistenz in `localStorage` als JSON
+- Export als JSON-Datei (`Blob` + `URL.createObjectURL`)
 
 ## 📚 Inhaltsseiten
 
 ### index.html
 - Hero-Abschnitt mit Projekt-Übersicht
 - Info-Karten mit Links zu anderen Seiten
-- Updates-Liste
 
 ### ueber_uns.html
 - Veranstaltungsinformationen
 - Dozenten-Profile
-- Projektstruktur (U1-U4+)
 
 ### eis_projekt.html
-- Technologie-Stack
+- Technologie-Stack & Projektstruktur
-- Projektstruktur
+
-- Design-Prinzipien
+### team.html
-- Deployment-Infos
+- Teammitglieder-Profile mit Beschreibung & Skill-Tags
+
+### galerie.html
+- Bildergalerie mit Lightbox (Teambild, Gruppenbild)
+
+### notenrechner.html
+- DOM-basierter Notenrechner mit Tabs & Fortschrittsbalken
+
+### textanalyse.html
+- Textanalyse: Wörter, Zeichen, Sätze, Lesbarkeit, häufigste Wörter
+
+### api.html
+- Live-Datenabruf von jsonplaceholder.typicode.com/users
+- DOM-Rendering, Filter, Fehlerbehandlung
+
+### kanban.html
+- Trello-ähnliches Kanban-Board
+- Drag & Drop, Labels, localStorage-Persistenz, JSON-Export
 
 ### kontakt.html
-- Kontaktinformationen
+- Kontaktformular mit feldspezifischer JavaScript-Validierung
-- Kontaktformular
-- FAQ-Sektion
 
 ### impressum.html
-- Rechtliche Hinweise
+- Rechtliche Hinweise & Datenschutzerklärung
-- Datenschutzerklärung
-- Haftungsausschluss
 
 ## 🚀 Entwicklungsschritte (Lernpfad)
 
@@ -152,18 +188,19 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
 |------|-------|---------|
 | **U1** | Grundlagen | SSH, Linux, erste HTML-Seite |
 | **U2** | Styling & Interaktion | CSS, JavaScript, Events |
-| **U3** | Website-Architektur | Navigation, mehrere Seiten (aktuell) |
+| **U3** | Website-Architektur | Navigation, mehrere Seiten |
-| **U4** | Backend-Integration | Python, Flask, APIs |
+| **U4** | DOM & APIs | Notenrechner, Textanalyse, fetch & API Demo |
-| **U5+** | Erweitert | Datenbanken, Authentifizierung |
+| **Bonus** | Erweitert | Kanban-Board (Drag & Drop, localStorage) |
 
-## 🎯 Nächste Schritte
+## 🗓️ Änderungsprotokoll
 
-- [ ] Logo durch echte PH-Weingarten-Logo ersetzen
+| Datum | Änderung |
-- [ ] Bilder hochladen und in Galerie einbinden
+|-------|----------|
-- [ ] Backend mit Flask entwickeln (U4)
+| 20.05.2026 | Dark Mode: Beschreibungstexte Team/Notenrechner/Textanalyse in dunkelblau |
-- [ ] Formular-Backend-Integration
+| 20.05.2026 | Galerie: teambild.jpeg eingefügt |
-- [ ] Datenbank-Verbindung
+| 20.05.2026 | Mega-Bonus: Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export) |
-- [ ] User-Authentifizierung
+| 20.05.2026 | Bonus: fetch & API Demo (JSONPlaceholder, DOM-Rendering, Filter) |
+| vor 20.05.2026 | Dark Mode, Hamburger-Navigation, Kontaktformular-Validierung, Notenrechner, Textanalyse |
 
 ## 📧 Support
 
@@ -178,4 +215,4 @@ Dieses Projekt ist ein Lernprojekt der PH Weingarten und dient zu Ausbildungszwe
 
 ---
 
-**Zuletzt aktualisiert:** 22. April 2026
+**Zuletzt aktualisiert:** 20. Mai 2026

galerie.html

@@ -52,7 +52,6 @@
       <h2>🖼️ Unser Team</h2>
       <p>Hier findet ihr Bilder aus unserem Team und vom Projekt:</p>
       <div class="galerie">
-        <img src="img/gruppenbild.jpg" alt="Team David & Karo" title="Klick zum Vergrößern">
         <img src="img/teambild.jpeg" alt="Teambild – David & Karo" title="Klick zum Vergrößern">
       </div>
     </section>