diff --git a/subjects/action-reaction/README.md b/subjects/action-reaction/README.md index f1ad8d0ac..eb9ec586e 100644 --- a/subjects/action-reaction/README.md +++ b/subjects/action-reaction/README.md @@ -7,17 +7,18 @@ Let's put a button on the top right corner of the page, that will toggle (close Add it in the HTML structure: ``` - + ``` Add the style in the CSS file: ``` button { - position: fixed; - top: 30px; - right: 30px; - padding: 30px; + z-index: 1; + position: fixed; + top: 30px; + right: 30px; + padding: 20px; } ``` @@ -27,6 +28,12 @@ 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-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 - [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)