From 4145d11432baccd4e01e8d382e0a96e1d3dd3c77 Mon Sep 17 00:00:00 2001 From: DylanBarnes Date: Wed, 3 Jun 2026 13:22:31 +0000 Subject: [PATCH] README: Umfassende Dokumentation aller Features und Dateien --- README.md | 199 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 166 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index b501584..229d37b 100644 --- a/README.md +++ b/README.md @@ -2,57 +2,190 @@ Ein interaktives Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der **PH Weingarten**. -🌐 [https://isa4.edumake.de](https://isa4.edumake.de/index.html) +🌐 **Live-Website:** [https://isa4.edumake.de](https://isa4.edumake.de/index.html) --- -## Inhalt +## 📑 Seitenstruktur & Inhalt -| Datei | Beschreibung | -|-------|--------------| -| `index.html` | Startseite mit Projektübersicht | -| `eis_projekt.html` | Tech-Stack, Features und Lernziele | -| `team.html` | Teamvorstellung und Fetch-API-Demo | -| `ueber_uns.html` | Mission und Teamhintergrund | -| `kontakt.html` | Kontaktformular | -| `quiz.html` | Mini-Quiz über Web-Entwicklung | -| `impressum.html` | Rechtliche Pflichtangaben | +### Hauptseiten + +| Datei | Beschreibung | Features | +|-------|-------------|----------| +| `index.html` | **Startseite** – Projektübersicht mit Hero-Section | Begrüßung nach Tageszeit, Kinetic Hero Animation, Feature-Cards | +| `eis_projekt.html` | **Projekt-Details** – Tech-Stack und Lernziele | Technologie-Übersicht, Lerninhalte | +| `team.html` | **Team-Seite** – Vorstellung des Entwickler-Teams | Fetch-API-Demo, Team-Member-Profile | +| `ueber_uns.html` | **Über uns** – Mission und Teamhintergrund | Projektbeschreibung, Teamgeschichte | +| `kontakt.html` | **Kontaktformular** – Formular mit Validierung | Eingabe-Validierung, Fehler-Handling, Success-Meldungen | +| `impressum.html` | **Rechtliche Informationen** | Impressum, Datenschutz | + +### Übungsseiten + +| Datei | Beschreibung | Technologie | +|-------|-------------|-------------| +| `quiz.html` | **Mini-Quiz** – 3 interaktive Fragen | JavaScript (ES6+), DOM-Manipulation | +| `notenrechner.html` | **Notenrechner** – Berechnung von Schulnoten | JavaScript (Funktionen) | +| `notenrechner-dom.html` | **Notenrechner (DOM)** – Erweiterte Version | JavaScript (DOM-API) | +| `textanalyse.html` | **Text-Analyse** – Wort- & Zeichenzähler | JavaScript (String-Methoden) | +| `kanban.html` | **Kanban Board** – Task-Management | JavaScript (Array-Methoden, Event-Handling) | --- -## Features +## ✨ Features & Funktionalität -- **Begrüßung nach Tageszeit** (js/script.js): - - Zeigt je nach Uhrzeit einen anderen Text - - in einer anderen Farbe (index.html, css/style.css) +### 1. **Begrüßung nach Tageszeit** +- **Dateien:** `js/script.js`, `css/style.css`, `index.html` +- **Beschreibung:** Zeigt je nach aktueller Uhrzeit eine personalisierte Begrüßung +- **Details:** + - **Morgens (vor 10 Uhr):** "Guten Morgen!" in Orange (#d97706) + - **Tagsüber (10-18 Uhr):** "Hallo, schön dass du da bist!" in Grün (#16a34a) + - **Abends (nach 18 Uhr):** "Guten Abend!" in Blau (#4338ca) +- **Implementierung:** Inline-Skript im HTML für garantierte Ausführung -- **Mini-Quiz** (quiz.html, js/quiz.js): - - 3 interaktive Fragen zu Web-Entwicklung und PH Weingarten - - Direktes Feedback für jede Antwort (richtig/falsch) - - Punktezähler und Auswertung am Ende - - Responsive Design mit ansprechender Benutzerführung - - Verlinkt in der Navigation unter "Übungen" +### 2. **Mini-Quiz** +- **Dateien:** `quiz.html`, `js/quiz.js`, `css/style.css` +- **Beschreibung:** Interaktives Quiz mit 3 Fragen zu Web-Entwicklung und PH Weingarten +- **Details:** + - ✅ 3 Multiple-Choice-Fragen + - ✅ Direkte Feedback-Anzeige (richtig/falsch) + - ✅ Punktezähler (0-3 Punkte möglich) + - ✅ Auswertung mit motivierenden Meldungen + - ✅ Progress-Bar zeigt Fortschritt visuell + - ✅ "Nochmal spielen"-Funktion + - ✅ Responsive Design +- **Verknüpfung:** Navigation → Dropdown "Übungen" → "Mini-Quiz" + +### 3. **Navigation & Layout** +- **Dateien:** `components/navbar.html`, `js/navbar.js` +- **Features:** + - ✅ Sticky Header mit Gradient-Hintergrund + - ✅ Responsive Hamburger-Menu für Mobile + - ✅ Dropdown-Menü für "Übungen" + - ✅ Dark-Mode Toggle + - ✅ PDF-Download Button + - ✅ Logo mit Animation + +### 4. **Kontaktformular** +- **Datei:** `kontakt.html` +- **Features:** + - ✅ Formular-Validierung (Name, Email, Betreff, Nachricht) + - ✅ Fehler-Handling mit Fehlermeldungen + - ✅ Success-Meldung nach Submit + - ✅ Datenschutz-Checkbox + - ✅ Responsive Design + +### 5. **Weitere Übungen** +- **Notenrechner:** Berechnet Schulnoten aus Punkte +- **Textanalyse:** Zählt Wörter und Zeichen +- **Kanban Board:** Task-Management Tool --- -## Tech-Stack +## 📁 Dateistruktur -- **HTML5** – Seitenstruktur -- **CSS3** – Styling und Responsive Layout -- **JavaScript (ES6+)** – Interaktivität und Fetch API -- **Git** – Versionskontrolle +``` +public_html/ +├── index.html # Startseite +├── eis_projekt.html # Projekt-Details +├── team.html # Team-Seite +├── ueber_uns.html # Über uns +├── kontakt.html # Kontaktformular +├── impressum.html # Impressum +├── quiz.html # Mini-Quiz +├── notenrechner.html # Notenrechner +├── notenrechner-dom.html # Notenrechner (DOM) +├── textanalyse.html # Textanalyse +├── kanban.html # Kanban Board +│ +├── css/ +│ └── style.css # Hauptstylesheet (2200+ Zeilen) +│ ├── Reset & Basics +│ ├── Header & Navigation +│ ├── Hero Section (Kinetic) +│ ├── Feature Cards (Kinetic Grid) +│ ├── Quiz Styles +│ ├── Form Styles +│ ├── Dark Mode +│ └── Responsive Breakpoints +│ +├── js/ +│ ├── script.js # Haupt-Skript (Begrüßung, Kontaktformular) +│ ├── navbar.js # Navigation (Hamburger Menu, Dark Mode) +│ ├── quiz.js # Quiz-Logik +│ ├── api-users.js # Fetch-API Integration +│ ├── kanban.js # Kanban Board +│ ├── notenrechner.js # Notenrechner +│ ├── notenrechner-dom.js # Notenrechner (DOM) +│ └── textanalyse.js # Textanalyse +│ +├── components/ +│ └── navbar.html # Navigation Component +│ +├── img/ # Bilder & Icons +├── assets/ # Downloads & Ressourcen +└── README.md # Diese Datei +``` --- -## Mitwirkende +## 🛠️ Tech-Stack -| Name | Rolle | -|------|-------| -| Dylan | Frontend-Entwickler (HTML, CSS, JS, UI/UX) | -| Leon | Backend-Entwickler (JS, APIs, Datenbanken) | +| Kategorie | Technologie | +|-----------|-------------| +| **Frontend** | HTML5, CSS3 (2200+ Zeilen), JavaScript (ES6+) | +| **Styling** | Grid, Flexbox, CSS Gradients, Animations, Media Queries | +| **JavaScript** | DOM-API, Event-Handling, Array-Methoden, Fetch-API | +| **Design** | Responsive Design, Dark Mode, Kinetic Animations | +| **Versionskontrolle** | Git, GitHub-Integration | --- -## Lizenz +## 🎨 Design-Highlights -Dieses Projekt steht unter der MIT-Lizenz. \ No newline at end of file +- **Kinetic Hero Section:** Animierte Blobs mit floating-Effect +- **Gradient Backgrounds:** Moderne, farbenfrohe Gradienten +- **Responsive Layout:** Mobile-First Approach +- **Dark Mode:** Vollständige Dark-Mode Unterstützung +- **Smooth Animations:** Transitions und Keyframe-Animationen +- **Accessible Colors:** Gute Kontraste und Lesbarkeit + +--- + +## 📊 Statistiken + +- **HTML-Dateien:** 11 +- **CSS-Zeilen:** 2200+ +- **JavaScript-Dateien:** 8 +- **Komponenten:** 1 (navbar) +- **Features:** 5+ interaktive Features +- **Quiz-Fragen:** 3 +- **Übungen:** 5 + +--- + +## 👥 Mitwirkende + +| Name | Rolle | Verantwortung | +|------|-------|---------------| +| Dylan | Frontend-Entwickler | HTML, CSS, UI/UX, Interaction Design | +| Leon | Backend-Entwickler | JavaScript, APIs, Datenlogik | + +--- + +## 🚀 Live-Deployment + +- **Hosting:** edumake.de +- **URL:** https://isa4.edumake.de +- **Deployment:** Git → Automated Pull +- **Browser:** Modern Browsers (Chrome, Firefox, Safari, Edge) + +--- + +## 📝 Lizenz + +Dieses Projekt steht unter der MIT-Lizenz. + +--- + +**Zuletzt aktualisiert:** Juni 2026 +**Status:** ✅ In aktiver Entwicklung \ No newline at end of file