2026-10-13 13:41:26 +02:00
parent bc06824ab6
commit 707e3bebe9
3 changed files with 75 additions and 0 deletions
@@ -0,0 +1,41 @@
+## Optionale Übungsaufgabe 1: Responsive Navigation mit Hamburger-Menü
+
+### 1. HTML-Struktur & Icon-Vorbereitung
+
+Erweitere die bestehende Navigationsstruktur im Projet `webseite-frontend` um das notwendige Markup für einen Menü-Toggle.
+
+1.  **Hamburger-Icon-Markup einfügen:** Füge innerhalb Deines `<nav>`-Elements das HTML für den Menü-Toggle ein.
+    - Du kannst hierfür die animierten Icons von [jonsuh.com/hamburgers/](https://jonsuh.com/hamburgers/) verwenden.
+2.  **Zustandsklasse definieren:** Überlege Dir eine **Kontrollklasse** (z.B. `nav-open` oder `is-active`), die Du später per JavaScript auf das `<body>`-Tag oder das `<nav>`-Element setzt, um den **geöffneten Zustand** zu signalisieren.
+
+### 2. CSS-Styling & Media Query (Mobile First)
+
+Stelle sicher, dass die Navigation standardmäßig für die mobile Ansicht funktioniert, und passe sie dann für größere Bildschirme an.
+
+1.  **Mobile Standard (bis $575\text{px}$):**
+
+    - Die **Hauptmenüpunkte** müssen standardmäßig **versteckt** sein (`display: none;` oder per `transform` aus dem Sichtfeld geschoben).
+    - Das **Hamburger-Icon** muss in dieser Ansicht **sichtbar** sein.
+    - Definiere die **Darstellung des geöffneten Menüs** (mithilfe Deiner Zustandsklasse, z.B. `.nav-open .menu-list`). Gestalte es als nutzerfreundliches Fullscreen-Overlay oder Sidebar für mobile Geräte.
+
+2.  **Desktop-Übergang (ab $576\text{px}$):**
+
+    - Füge die notwendige **Media Query** hinzu:
+      ```css
+      @media (min-width: 576px) {
+        /* ... hier die Desktop-Regeln ... */
+      }
+      ```
+    - Innerhalb dieser Media Query:
+      - Mache die **Hauptmenüpunkte dauerhaft sichtbar** und ordne sie im Desktop-Layout an.
+      - Blende das **Hamburger-Icon aus** (`display: none;`).
+
+---
+
+### 3. JavaScript-Interaktivität (Menü-Toggle)
+
+Implementiere die Logik, die das Umschalten des Menüzustands steuert, wenn das Icon geklickt wird.
+
+1.  **Event-Listener:** Füge dem **Hamburger-Icon** einen `click`-Event-Listener hinzu.
+
+2.  **Klasse togglen:** Im Click-Handler **togglet** Du die **Zustandsklasse** (`nav-open` oder `is-active`) auf dem Element (z.B. dem `<body>` oder `<nav>`), das Du im CSS zur Steuerung verwendest. Ein Klick öffnet das Menü, der erneute Klick schließt es. Vergesse dabei nicht dem Menü Icon die passende Klasse zum hinzufügen des Effekts zu vergeben.
@@ -0,0 +1,34 @@
+# Optionale Übungen
+
+## 1. Optimierung vom ProduktManager
+
+- 1. Positionen sollen an die API gesendet werden und gespeichert werden.
+- 2. Refactoring vom Modul
+  - Optimierung der Übergabeparameter: Element oder Selector (CSS Selektion als String) kann übergeben werden. Tipp: `module instanceof HTMLElement`
+   - Die Wiederholungen der Fetch Anfragen in eine `api.request` Methode zusammenfassen 
+
+
+## 2. Integration Modul Splide in den Header
+
+- Intergriere ein weiteres Modul [`@splidejs/splide`](https://splidejs.com/guides/getting-started/) in den Webseiten Header. Nutze zum Testen Dummyimages mit verschiedenen Farben (https://dummyimage.com/1920x450/f90/fff.jpg)
+
+## 3. Tooltip als Modul verwenden
+
+Intergriere das Plugin [`floating-ui`](https://floating-ui.com/)
+in die [Webseite](../../unterricht/tag21/03_website-gulp-js/index.html) .
+
+
+
+## 4. Formularvalidierung als Modul
+
+Erstelle ein Modul für die Validierung von einem Formular (`FormValidator`) mit folgenden Feldern
+
+- Vor- und Nachname
+- E-Mail
+- Adresse bestehend aus:
+  - Strasse, Hausnummer
+  - PLZ, Ort
+  - Land
+- Nachricht
+
+Die Validierung soll direkt während (`input`) oder nach der Eingabe (`blur`) der Felder stattfinden. Die Verwendung von Validierungsmodulen wie `validator` dürfen dabei verwenden werden.