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

---

📑 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