Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu14:aufgaben:a_instructions [2026/06/16 12:19] – angelegt 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 35: / Zeile 38: @@
 ===== Aufgaben =====
-==== ''Container.vue'' ====
+==== Container.vue ====
-=== ''<script>''-Bereich ===
+=== <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 ===
+=== <template>-Bereich ===
+<WRAP center round box 80%>
 ^ Schritt ^ Aufgabe ^
 | **3** | Über die geladenen Daten iterieren und jedes Element an die ''Day''-Komponente übergeben |
+</WRAP>
 ----
-==== ''Day.vue'' ====
+==== Day.vue ====
-=== ''<script>''-Bereich ===
+=== <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 ===
+=== <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>
+{
+  "id": 1,
+  "wochentag": "Montag",
+  "datum": "6. Juli",
+  "icon": "https://storage.googleapis.com/m291-lb02-cases/weather/sun.png",
+  "tempMax": 31,
+  "tempMin": 18,
+  "beschreibung": "Der Tag startet strahlend und die Temperatur wird bis zum Nachmittag auf bis zu 31 Grad klettern. Kein Wölkchen trübt den Himmel – ein perfekter Hochsommertag.",
+  "feuchtigkeit": 38,
+  "uvIndex": 8,
+  "wind": "12 km/h W",
+  "ratschlag": "Sonnencreme LSF 50 nicht vergessen!"
+}
+</code>
+</WRAP>
+==== Day.vue – CSS ====
+=== <style>-Bereich ===
+<WRAP center round box 80%>
+^ Schritt ^ Aufgabe ^
+| **10** | Darstellung des Datums aus Figma umsetzen |
+| **11** | Darstellung der Beschreibung aus Figma umsetzen |
+| **12** | Übergangsanimation für das Auf- und Zuklappen einrichten |
+| **13** | Geöffneten Zustand der Detailansicht definieren |
+| **14** | Layout der Chips (Feuchtigkeit, UV, Wind) umsetzen |
+| 15 | ⭐ BONUS: Aktiven Zustand der Kachel gestalten |
+| 16 | ⭐ BONUS: Versetzten Einblende-Effekt (Treppeneffekt) pro Kachel umsetzen |
+</WRAP>
+----
+===== Abgabe =====
+  - ''node_modules''-Ordner **nicht** im ZIP einschliessen
+  - Projektordner als ''.zip'' komprimieren
+  - ZIP-Datei in Moodle hochladen //(LU14 – Probeprüfung → Abgabe Wetter-App)//
+----
+===== Fertig =====
-Die API gibt ein Array (Liste) mit Objekten zurück. Ein einzelnes Objekt (= einzelner Listeneintrag) hat diese
+  * Vergleichen Sie Ihre Lösung mit der Musterlösung (wird auf Moodle freigeschaltet, sobald Sie abgegeben haben): Was stimmt überein? Was nicht?
+  * Wiederholen Sie die Theorie auf Moodle zu den Punkten, wo Sie unsicher waren
+  * In ''Container.vue'' wird der Ladezustand noch nicht dem User angezeigt. Ergänzen Sie die Komponente mit einer ''isLoading''-Variable. Hat sie den Wert ''true'', zeigen Sie den Text "Daten werden geladen..." an – ist sie falsch, zeigen Sie das ''div'' mit der Klasse ''forecast'' an. Sie brauchen dazu die Direktiven ''v-if'' und ''v-else''.