js-munich-2020-spring

Lesson 5 Classwork

Let’s practive mouseover/mouseleave/onclick events

Spec

We want to have a button with following specification

1. can react onclick event
2. change background color in case of mouseover
3. restore initial background when mouse leave the button

Tips

• event names: mouseover, mouseleave, onclick
• to add class to an element: el.classList.add(‘classname’)
• to remove class from an element: el.classList.remove(‘classname’)

Bonus

Challenge:

• try to change shape, color, text of a button
• try to change the surroundings inside the document (show additional button on mouseover)

Super bonus

Create a tooltip - if user hover mouse on the button, then display some helper text close to the mouse pointer