Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu14:aufgaben:a_instructions [2026/06/16 12:25] – gkoch
+++ de:modul:m291:learningunits:lu14:aufgaben:a_instructions [2026/06/16 12:34] (aktuell) – gkoch
@@ Zeile 14: / Zeile 14: @@
   * Bei Fragen: Hand heben und die Lehrperson fragen
-<note important>
+<WRAP center round tip 80%>
 **Hinweis:** Die Daten von MockAPI stimmen unter Umständen nicht 1:1 mit dem Design überein. Das ist in der Praxis normal: Design arbeitet mit Dummy-Daten, die Programmierung mit echten Daten.
-</note>
+</WRAP>
 ----
@@ Zeile 39: / Zeile 42: @@
 === <script>-Bereich ===
+<WRAP center round box 80%>
 ^ Schritt ^ Aufgabe ^
 | **1** | API-Daten von MockAPI laden |
 | **2** | Antwort der API auslesen und der Variable zuweisen |
+</WRAP>
 === <template>-Bereich ===
+<WRAP center round box 80%>
 ^ Schritt ^ Aufgabe ^
 | **3** | Über die geladenen Daten iterieren und jedes Element an die ''Day''-Komponente übergeben |
+</WRAP>
 ----
@@ Zeile 53: / Zeile 59: @@
 === <script>-Bereich ===
+<WRAP center round box 80%>
 ^ Schritt ^ Aufgabe ^
 | **4** | Erwartete Prop definieren (Name und Datentyp) |
 | **5** | Reaktive Variable für den Öffnungs-Zustand anlegen |
+</WRAP>
 === <template>-Bereich ===
+<WRAP center round box 80%>
 ^ Schritt ^ Aufgabe ^
 | **6** | Klick-Interaktion auf dem Button einrichten |
@@ Zeile 65: / Zeile 72: @@
 | **8** | Klasse für den geöffneten Zustand dynamisch setzen |
 | **9** | Beschreibung, Luftfeuchtigkeit, UV-Index und Wind anzeigen |
+</WRAP>
 Die API gibt ein Array (Liste) mit Objekten zurück. Ein einzelnes Objekt (= einzelner Listeneintrag) hat diese Struktur:
+<WRAP center round box 80%>
 <code json>
 {
@@ Zeile 83: / Zeile 90: @@
 }
 </code>
+</WRAP>
 ==== Day.vue – CSS ====
 === <style>-Bereich ===
+<WRAP center round box 80%>
 ^ Schritt ^ Aufgabe ^
-| **10** | Versetzten Einblende-Effekt (Treppeneffekt) pro Kachel umsetzen |
+| **10** | Darstellung des Datums aus Figma umsetzen |
-| **11** | ⭐ BONUS: Aktiven Zustand der Kachel gestalten (machen Sie das erst zum Schluss) |
+| **11** | Darstellung der Beschreibung aus Figma umsetzen |
-| **12** | Darstellung des Datums aus Figma umsetzen |
+| **12** | Übergangsanimation für das Auf- und Zuklappen einrichten |
-| **13** | Darstellung der Beschreibung aus Figma umsetzen |
+| **13** | Geöffneten Zustand der Detailansicht definieren |
-| **14** | Übergangsanimation für das Auf- und Zuklappen einrichten |
+| **14** | Layout der Chips (Feuchtigkeit, UV, Wind) umsetzen |
-| **15** | Geöffneten Zustand der Detailansicht definieren |
+| 15 | ⭐ BONUS: Aktiven Zustand der Kachel gestalten |
-| **16** | Layout der Chips (Feuchtigkeit, UV, Wind) umsetzen |
+| 16 | ⭐ BONUS: Versetzten Einblende-Effekt (Treppeneffekt) pro Kachel umsetzen |
+</WRAP>
 ----