LU05.S02 - VUE Directives warm up

ZipFile with the HtML code-solution

• 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
• The result will be presented in the right hand side of the window.

1. box-colour change

1. Test the given script
2. Create a new CSS-Class blueBG in analogy to pinkBG. Make sure to belabour the DIVs within the script part as well.
3. Execute your script by clicking the run-Button.
4. Toggle for testing purpose within your VUE-APP (in the script part) between the blue and pink.

2. extended CSS

1. create another css-class .extended
2. redifine the bgColor
3. add additional values for color, font-size, font-family, …
4. Bind this new css-class .extended into the HTML-Dom (script-part)
5. Execute your script by having it run.

3. Save the results

1. Comment your results as you find fit within the html-comment area
2. 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.

Your result is supposed to look like displayed in the following image:

Volkan Demir