191 lines
No EOL
6.7 KiB
Markdown
191 lines
No EOL
6.7 KiB
Markdown
# EIS Projekt – Entwicklung interaktiver Softwareanwendungen
|
||
|
||
Ein interaktives Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der **PH Weingarten**.
|
||
|
||
🌐 **Live-Website:** [https://isa4.edumake.de](https://isa4.edumake.de/index.html)
|
||
|
||
---
|
||
|
||
## 📑 Seitenstruktur & Inhalt
|
||
|
||
### 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 & Funktionalität
|
||
|
||
### 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
|
||
|
||
### 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
|
||
|
||
---
|
||
|
||
## 📁 Dateistruktur
|
||
|
||
```
|
||
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
|
||
```
|
||
|
||
---
|
||
|
||
## 🛠️ Tech-Stack
|
||
|
||
| 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 |
|
||
|
||
---
|
||
|
||
## 🎨 Design-Highlights
|
||
|
||
- **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 |