Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:aufgaben:02 [2025/01/22 14:03] – vdemir
+++ en:modul:m291:learningunits:lu05:aufgaben:02 [2025/03/27 15:55] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU05.A02 - Directives v-bind ======
+====== 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 **
-  - Create a new CSS-Class //blueBG// in analogy to //pinkBG//). Make sure to belabour the DIVs within the script part as well.
+  - Test the given script
+  - Create a new CSS-Class <color #ed1c24>blueBG</color> in analogy to <color #ffaec9>pinkBG</color>. Make sure to belabour the DIVs within the script part as well.
+  - Execute your script by clicking the //run-Button//.
+  - 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.
-      * Be advised to name you script accordingly, i.e. //20250203_vueDirectives_01//. This will be helpful when preparing for the exams.
+      * Be advised to name you script accordingly, i.e. //lu.s02//. This will be helpful while preparing for the exams.
 ===== Solution =====