====== LU05.A02 - VUE Directives warm up ======

===== Learning objectives =====
  - Binding CSS-Style to the HTML by using v-bind directive

===== Prerequisites  =====
  * Work type: Individual
  * Means of aid: only teaching materials, no websearch, no use of ai.
  * Timeframe: 10 Minutes
  * Expected result: The background color im example code is adjusted as defined in the assignment.   

===== Source =====
  * [[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-bind_1|Code-example: v-bind Directive]]

===== 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.

===== Solution =====
[[en:modul:m291:learningunits:lu05:loesungen:02|Lösung]]

===== Vocabulary =====
^ English ^ German ^ 
| as well| ebenfalls |
| be advised that | Ich weise Sie darauf hin, dass| 


----
[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir