LU06.A06 - Events - food counting

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 15 Minutes
• Expected result: a vue script, that counts how many times a food was clicked and shows the result in a list.

• Source-code for the assignment

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. After moving the mouse away from the food, the background colour must turn back to white.
2. Make sure that you have the title <h1> and have the correctl filename: lu06.s06.html
3. 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.
4. And finally, count as well how many time the foods were clicked in total.
5. Save your result in Webstorm, too.
6. In order to display the food-images, you need to download them and save it in your media-directory.
7. Needless to say, that the image-path must be adjusted, e.g. „../media/image_burrito.svg“
8. The result must look as following:

Lösung

Volkan Demir