LU06.A07 - Events - colour changing

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

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 inrement operation with step size 1.
5. Your result should look as following

1. Additionally to the current features, we also want to count how many times each food was moved over by the mouse. This count must be shown after each food element.
2. And finally, count as well how many time the foods were clicked in total.
3. Save your result in Webstorm, too.
4. In order to display the food-images, you need to download them and save it in your media-directory.
5. Needless to say, that the image-path must be adjusted, e.g. „../media/image_burrito.svg“
6. The result must look as following:

Lösung

Volkan Demir