public/subjects/action-reaction-dom

Action - reaction!

Resources

We provide you with some content to get started smoothly, check it out!

• Video querySelector
• Video DOM JS - Add an event listener to an element
• Video DOM JS - Set an element's properties
• Video DOM JS - classList: toggle, replace & contains
• Video DOM JS - Set an element's inline style
• Memo DOM JS

Instructions

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

Add this CSS style:

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-closed in the classList of the eye-left HTML element
• change the background color of the eye-left: if the eye is open, to "red", if the eye is closed, to "black"

Code examples

Add an event listener on click on a button that triggers a function:

// events allow you to react to user inputs
// (any action with the mouse, keyboard, etc.)
// it's the foundation of the interactivity of your website
// each event is linked to an element or the window

// for this example we will attach a click event to a button
// first we select the button HTML element
const button = document.querySelector('button')

// we need to create a function
// that will be executed when the event is triggered
// let's call it `handleClick`
const handleClick = (event) => {
  // do semething when the button has been clicked
}

// register the event:
button.addEventListener('click', handleClick)
// here we ask the button to call our `handleClick` function
// on the 'click' event, so every time it's clicked

Expected output

This is what you should see in the browser.

Notions

• querySelector
• Text content of a HTML element
• addEventListener / click event
• classList / toggle
• Setting style with JS