You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
Marie Malarme a392208531 Subject exercise 7 "Action - reaction!" (JS interaction / click event listener) 4 years ago
..
README.md Subject exercise 7 "Action - reaction!" (JS interaction / click event listener) 4 years ago

README.md

Action - reaction!

OK, you have now connected HTML, CSS and JS altogether ; big day! Excited? Exhausted? Well so far, you've only scratched the surface... Let's go deeper into the power of JS! You're going to add some interaction ; the webpage will react when a user action will happen, called an event (a click, a key pressed, a mouse move, etc.).

Let's put a button on the top right corner of the page, that will toggle (close or open) the left eye when clicked. Add it in the HTML structure:

<button>Click me to toggle left eye</button>

Add the style in the CSS file:

button {
 position: fixed;
 top: 30px;
 right: 30px;
 padding: 30px;
}

In the JS file, get the HTML button element with querySelector, and add an event listener on click event, triggering a function that will:

  • change the text content of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye"
  • toggle the class eye-open in the classList of the eye-left HTML element
  • change the background color of the eye-left: if the eye is open, to "orange", if the eye is closed, to "black"

Notions