Browse Source

Update subject exercise 6 "Action - reaction!"

content-update
Marie Malarme 3 years ago committed by Clément
parent
commit
f87746e4e7
  1. 17
      subjects/action-reaction/README.md

17
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 it in the HTML structure:
``` ```
<button>Click me to toggle left eye</button> <button>Click me to close left eye</button>
``` ```
Add the style in the CSS file: Add the style in the CSS file:
``` ```
button { button {
position: fixed; z-index: 1;
top: 30px; position: fixed;
right: 30px; top: 30px;
padding: 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 - [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" - 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:
<!-- screenshot -->
### Notions ### Notions
- [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) - [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)

Loading…
Cancel
Save