diff --git a/subjects/action-reaction/README.md b/subjects/action-reaction/README.md index 1c565f9a..e74ead6d 100644 --- a/subjects/action-reaction/README.md +++ b/subjects/action-reaction/README.md @@ -28,6 +28,33 @@ In the JS file, get the HTML button element with [`querySelector`](https://devel - [toggle](https://css-tricks.com/snippets/javascript/the-classlist-api/) 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: + +```js +// 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](https://youtu.be/Wkar5SmswDo) is what you should see in the browser.