From f87746e4e7be0b3d21417c1dd93562b2467b5362 Mon Sep 17 00:00:00 2001 From: Marie Malarme Date: Fri, 26 Feb 2021 23:47:20 +0000 Subject: [PATCH] Update subject exercise 6 "Action - reaction!" --- subjects/action-reaction/README.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/subjects/action-reaction/README.md b/subjects/action-reaction/README.md index f1ad8d0a..eb9ec586 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)