Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- en:modul:m291:learningunits:lu05:loesungen:02 [2025/01/22 10:30] – vdemir
+++ en:modul:m291:learningunits:lu05:loesungen:02 [2025/05/07 16:02] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU05.S02 - Hello World - TBD ======
+====== LU05.S02 - VUE Directives warm up ======
-{{ :en:modul:m291:learningunits:lu05:loesungen:02_v-directive-ueb2.zip | ZipFile with the HtML code-solution}}
+{{ :en:modul:m291:learningunits:lu05:loesungen:lu05.s02.zip | ZipFile with the HTML code-solution}}
 ===== Hints ====
-You can download the file and copy the content into the code area of the W3School on the left hand side of the coding window.
+  * You can download the file and copy the content into the code area of the W3School on the left hand side of the coding window.
-You can execute the code by pressing the //run// button
+  * You can execute the code by pressing the //run// button
-The result will be presented in the right hand side of the window.
+  * The result will be presented in the right hand side of the window.
+===== Assignments  ======
+** 1. box-colour change **
+  - 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. //lu.s02//. This will be helpful while preparing for the exams.
+===== Solutions =====
+Your result is supposed to look like displayed in the following image:
+{{:en:modul:m291:learningunits:lu05:loesungen:lu05.s02.png?1000| Code-Solution}}
-{{ :en:modul:m291:learningunits:lu05:loesungen:02_v-directive-ueb2.zip |}}{{ :en:modul:m291:learningunits:lu05:loesungen:02_v-directive-ueb2.zip |}}{{ :en:modul:m291:learningunits:lu05:loesungen:02_v-directive-ueb2.zip |}}
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir