Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:aufgaben:02 [2025/01/22 09:55] – vdemir
+++ en:modul:m291:learningunits:lu05:aufgaben:02 [2025/02/07 12:52] (aktuell) – [Assignments] vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU05.A02 - Directives Example ======
+====== LU05.A02 - VUE Directives warm up ======
+===== Learning objectives =====
+  - Binding CSS-Style to the HTML by using v-bind directive
 ===== Prerequisites  =====
@@ Zeile 10: / Zeile 13: @@
   * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-bind_1|Code-example: v-bind Directive]]
-===== Assignment ======
+===== Assignments  ======
-  - Change the background colour from //lightPink// to //lightBlue//.
+** 1. box-colour change **
+  - Test the given script
   - Create a new CSS-Class //blueBG// in analogy to //pinkBG//). Make sure to belabour the DIVs within the script part as well.
   - Execute your script by having it //run//.
+  - Toggle for testing purpose  within your VUE-APP (in the script part) between the blue and pink.
+** 2. extended CSS**
+  - create another css-class //.extended//
+  - redifine the bgColor
+  - add additional values for color, font-size, font-family, ...
+  - Bind this new css-class //.extended// into the HTML-Dom (script-part)
+  - Execute your script by having it //run//.
+** 3. Save the results **
+  - Comment your results as you find fit within the html-comment area
   - Save your solution within W3-Save-Area.
       * Therefore you might need a W3-School-Account.
@@ Zeile 24: / Zeile 39: @@
 ^ English ^ German ^
 | as well| ebenfalls |
-| be advised that | Ich weise Sie darauf hin, that |
+| be advised that | Ich weise Sie darauf hin, dass|