en:modul:m291:learningunits:lu05:aufgaben:02

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu05:aufgaben:02 [2025/01/22 10:29] – vdemiren:modul:m291:learningunits:lu05:aufgaben:02 [2025/03/27 15:55] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU05.A02 - Hello World - TBD ======+====== LU05.A02 - VUE Directives warm up ====== 
 + 
 +===== Learning objectives ===== 
 +  - Binding CSS-Style to the HTML by using v-bind directive
  
 ===== Prerequisites  ===== ===== Prerequisites  =====
Zeile 10: Zeile 13:
   * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-bind_1|Code-example: v-bind Directive]]   * [[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//.   - 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.    - Save your solution within W3-Save-Area. 
       * Therefore you might need a W3-School-Account.        * 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 ===== ===== Solution =====
Zeile 24: Zeile 39:
 ^ English ^ German ^  ^ English ^ German ^ 
 | as well| ebenfalls | | as well| ebenfalls |
-| be advised that | Ich weise Sie darauf hin, that | +| be advised that | Ich weise Sie darauf hin, dass| 
  
  
  • en/modul/m291/learningunits/lu05/aufgaben/02.1737538149.txt.gz
  • Zuletzt geändert: 2025/01/22 10:29
  • von vdemir