# EIS Projekt – Entwicklung interaktiver Softwareanwendungen

## 📋 Projektübersicht

Dies ist eine mehrseitige Website für die Lehrveranstaltung **„Entwicklung interaktiver Softwareanwendungen"** an der PH Weingarten.

**Dozenten:** Stefan Franke und Prof. Dr. Wolfgang Müller

## 🚀 Live-Zugang

Die Website ist unter folgender Adresse erreichbar:
```
https://isa##.edumake.de
```
(## wird durch Ihre Benutzernummer ersetzt)

## 📁 Projektstruktur

```
~/public_html/
├── 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)
├── quiz.html               # Mini-Quiz (50 Fragen, 3 random, DOM-basiert)
├── kontakt.html            # Kontaktformular
├── impressum.html          # Rechtliche Infos
├── css/
│   └── style.css           # Zentrale Stylesheet (~3600 Zeilen)
├── js/
│   ├── script.js           # Dark Mode, Hamburger-Nav, Formular, Lightbox
│   ├── api-demo.js         # fetch() API Demo
│   ├── kanban.js           # Kanban-Board Logik
│   └── quiz.js             # Mini-Quiz Logik (U14)
├── img/
│   ├── logo.png            # Projekt-Logo
│   ├── gruppenbild.jpg     # Team-Gruppenbild
│   └── teambild.jpeg       # Teambild
└── README.md               # Diese Datei
```

## 🛠️ Technologie-Stack

### Frontend
- **HTML5** – Semantisches Markup
- **CSS3** – Responsive Design mit Grid & Flexbox (~3600 Zeilen)
- **JavaScript (ES6+)** – Interaktive Elemente
  - Dark Mode mit localStorage-Persistenz
  - Hamburger-Navigation (Mobile)
  - Lightbox-Galerie
  - Formularvalidierung (feldspezifisch)
  - fetch() API Demo
  - Kanban-Board (Drag & Drop)
  - Mini-Quiz (DOM-basiert, 50 Fragen, zufällig)

### Features
- ✅ Responsive Design (Mobile, Tablet, Desktop)
- ✅ Dark Mode (Toggle + localStorage; Auto-Dark ab 16:00 Uhr)
- ✅ Begrüssung nach Tageszeit im Header (Morgen/Mittag/Abend + Uhrzeit, live)
- ✅ Hamburger-Menü (Mobile)
- ✅ Einheitliche Navigation (12 Seiten)
- ✅ Kontaktformular mit feldspezifischer JS-Validierung
- ✅ Bildergalerie mit Lightbox
- ✅ Notenrechner (DOM-basiert, Tabs, Fortschrittsbalken)
- ✅ Textanalyse-Tool (Wörter, Zeichen, Sätze, Metriken)
- ✅ fetch & API Demo (JSONPlaceholder, DOM-Rendering, Fehlerbehandlung, Filter)
- ✅ Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export)
- ✅ Mini-Quiz (50 Fragen, 3 zufällig, Feedback, Auswertung, Highscore)
- ✅ SEO-freundliches Markup

## 🖥️ SSH-Zugang

Verbindung zum Server:
```bash
ssh -p 2222 isa##@edumake.de
```

⚠️ **Wichtig:** Eduroam sperrt Port 2222 – verwenden Sie WLAN mbm oder Ihren mobilen Hotspot.

Navigationszum Projektverzeichnis:
```bash
cd ~/public_html
```

## 📝 Dateienverwaltung

### Dateien bearbeiten
Verwenden Sie einen Editor (nano, vi) oder SFTP:
```bash
nano index.html
```

### Änderungen hochladen (via SFTP)
```bash
sftp -P 2222 isa##@edumake.de
```

## 🎨 CSS-Struktur

Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:

1. **Global Styles & Reset** – Box-model, Basis-Styling
2. **Typography** – Überschriften, Text, Links
3. **Header & Navigation** – Sticky Header, aktive Links
4. **Main Content** – Layout, Sections, Container
5. **Forms** – Input-Styling, Validierung
6. **Galerie & Lightbox** – Bilder und Modal-Fenster
7. **Responsive Design** – Media Queries

## 📱 Responsive Breakpoints

```css
/* Tablet */
@media (max-width: 768px)

/* Mobile */
@media (max-width: 480px)
```

## 🔧 JavaScript-Funktionen

### script.js (Basis)
- **Dark Mode** – Toggle + sofortige Wiederherstellung via localStorage (IIFE); ab 16:00 Uhr automatisch Dark Mode (wenn kein manueller Override gespeichert)
- **Begrüssung nach Tageszeit (U13)** – zeigt „Guten Morgen/Mittag/Abend, es ist HH:MM Uhr" im Header; Uhrzeit aktualisiert sich jede Minute (`setInterval`)
- **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

### api-demo.js
- `fetch('https://jsonplaceholder.typicode.com/users')` – automatischer Aufruf
- `.then(r => r.json())` – JSON-Parsing mit HTTP-Status-Prüfung
- `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)

### quiz.js
- 50 Fragen als Array von Objekten `{ frage, antworten, richtig }`
- `shuffle()` (Fisher-Yates) zieht jede Runde 3 zufällige Fragen
- Komplett dynamischer DOM-Aufbau (`createElement`, kein statisches HTML)
- Direktes Feedback im DOM (kein `alert()`): Button grün/rot eingefärbt
- Buttons nach Antwort deaktiviert (kein doppeltes Punkten)
- Fortschrittsbalken + Live-Punktestand während dem Quiz
- Auswertungsscreen mit Ergebnis-Nachricht je Punktzahl (0/1/2/3)
- Fragen-Rückblick mit richtigen Antworten
- 🥇 Highscore (perfekte Runden) in `localStorage`
- „Neues Quiz starten" – zieht neue 3 zufällige Fragen
- Karten anlegen / löschen / editieren (`contenteditable`)
- 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

### ueber_uns.html
- Veranstaltungsinformationen
- Dozenten-Profile

### eis_projekt.html
- Technologie-Stack & Projektstruktur

### team.html
- 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

### quiz.html
- Mini-Quiz mit 3 zufälligen Fragen aus 50 (Allgemeinwissen)
- Direktes Feedback, Punktezähler, Auswertung, Highscore

### kontakt.html
- Kontaktformular mit feldspezifischer JavaScript-Validierung

### impressum.html
- Rechtliche Hinweise & Datenschutzerklärung

## 🚀 Entwicklungsschritte (Lernpfad)

| Unit | Thema | Inhalte |
|------|-------|---------|
| **U1** | Grundlagen | SSH, Linux, erste HTML-Seite |
| **U2** | Styling & Interaktion | CSS, JavaScript, Events |
| **U3** | Website-Architektur | Navigation, mehrere Seiten |
| **U4** | DOM & APIs | Notenrechner, Textanalyse, fetch & API Demo |
| **Bonus** | Erweitert | Kanban-Board (Drag & Drop, localStorage) |
| **U14** | Quiz | Mini-Quiz (50 Fragen, zufällig, DOM-basiert, Highscore) |

## 🗓️ Änderungsprotokoll

| Datum | Änderung |
|-------|----------|
| 03.06.2026 | U14: Mini-Quiz – 50 Fragen, 3 zufällig, DOM-Aufbau, Auswertung, Highscore |
| 03.06.2026 | U13: Begrüssung nach Tageszeit im Header + Auto-Dark-Mode ab 16:00 Uhr |
| 20.05.2026 | Dark Mode: Beschreibungstexte Team/Notenrechner/Textanalyse in dunkelblau |
| 20.05.2026 | Galerie: teambild.jpeg eingefügt |
| 20.05.2026 | Mega-Bonus: Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export) |
| 20.05.2026 | Bonus: fetch & API Demo (JSONPlaceholder, DOM-Rendering, Filter) |
| vor 20.05.2026 | Dark Mode, Hamburger-Navigation, Kontaktformular-Validierung, Notenrechner, Textanalyse |

## 📧 Support

Bei Fragen oder Problemen kontaktieren Sie:

- **Stefan Franke:** stefan.franke@ph-weingarten.de
- **Prof. Dr. Wolfgang Müller:** wolfgang.mueller@ph-weingarten.de

## 📄 Lizenz

Dieses Projekt ist ein Lernprojekt der PH Weingarten und dient zu Ausbildungszwecken.

---

**Zuletzt aktualisiert:** 3. Juni 2026