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.
 
 
 
 
 
 

2.3 KiB

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 close left eye</button>

Add the style in the CSS file:

button {
  z-index: 1;
  position: fixed;
  top: 30px;
  right: 30px;
  padding: 20px;
}

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"

Expected output

This is what you should see in the browser.

Notions