Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu19:theorie:02 [2025/05/12 16:22] – vdemir
+++ en:modul:m291:learningunits:lu19:theorie:02 [2025/06/26 10:50] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU19a - Task 02: v-bind  ======
+====== LU19a - Aufgabe 1 / Task 02: v-bind, v-if, ... ======
+===== Administration =====
+Füllen Sie die nachfolgenden Felder aus:
+**Klasse:** ....................................
+**Vorname:** ...................................
+**Name:** ......................................
+===== Vorarbeit =====
+  * Sie können als Vorlage für diese Aufgabe die Lösung **LU05.S09.html** verwenden.
+  * Das entsprechende Bild, dass aktuell angezeigt wird, kann in Ihrer Lösung variieren (kann anders sein).
+===== Ausgangslage =====
+Beim Auftrag **LU05.A09.html** wurde der Lagerbestand von Schreibmaschinen in Gruppen ausgegeben:
+  - //Plenty in Stock//
+  - //In Stock//
+  - //Very few left//
+  - //Not in Stock//
+Die Hintergrundfarbe blieb bei allen Meldungen grün.
+{{:en:modul:m291:learningunits:lu19:theorie:lu09.s09_start.png?400|}}
+===== Auftrag =====
+  * Veränderung Sie die Anzeige dahingehend, dass bei jeder Meldung die Text-Hintergrundfarbe sich nach dem Ampelprinzip verändert.
+    * Grün:  Es hat an Lager bzw. es hat reichlich an Lager
+    * Orange: Es hat weniger an Lager
+    * rot: Es hat keine mehr an Lager
+  * Realisieren sie die Farbanpassungen anhand von 2 neuen CSS-Klassen **outOfStockClass** und **lowStockClass**, die mittels v-bind beim entsprechenden <p>-Tag eingebaut werden müssen.
+  * Der jeweilige Warenbestand muss auch angezeigt werden.
+**Hinweis**
+  * Das Bild ist nicht relevant.
+  * Der Farbton ist nicht relevant.
+^Zielzustand 1 | Wenn es **an Lager** oder **reichlich an Lager** hat | {{:en:modul:m291:learningunits:lu19:theorie:t02_ziel1.png?400|}} |
+^Zielzustand 2 | Es hat nur noch **wenig an Lager** | {{:en:modul:m291:learningunits:lu19:theorie:t02_ziel2.png?400|}} |
+^Zielzustand 3 | Schreibmaschinen hat es **keine an Lager** | {{:en:modul:m291:learningunits:lu19:theorie:ta02_ziel3.png?400|}} |
+-----
+[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir