LU06.A07 - Events - colour changing

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 30 Minutes
• Expected result: Changing the color of a area which the reactiing to events e.g.
  • simple-click,
  • mouseover,
  • mouse.right-click,
  • mouse-left-click and
  • mouse-middle-click

• Source-code for the assignment

The idea of this assignment is to exercise on the one hand the four basic events, and on the other hand the increment and decrement-operators with various step-sizes. As a base for our exercise we are goint to change the appearance of html-visual-elements such as background color. Your result should look as following

1. Test the code example provided to you: When moving the mouse over a list food elements each element must change the backgroundcolour to grey.
2. Make sure that you have the title <h1> and have the correctl filename: lu06.s07.html
3. After moving the mouse over the color area the background-color should change randomly. Behind this effect there is a sophisticated Math-Operation.
4. Replace the math-method with a simple increment operation with step-size 1.
5. Start with the color value of 0.

1. Add another area for the a right-click event.
2. Start with a color value of 120
3. Decrement step-size is 2

1. Add another area for the a left-click event.
2. Start with a color value of 240
3. Increment step-size is 5

1. Add another area for the a left-click event.
2. Start with a color value of 240
3. Increment step-size is 5

1. Add another area for the a mouseover event.
2. Start with a color value of 360
3. Decrement step-size is 10

1. Add to all four textareas a mouse-middle event which resets all colour to the initial values.
2. Hint: To get the initial values, you need to store te values in separately in the first place: either in 4 variables or in a array with all four initial values.

Lösung

Volkan Demir