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:
```
<button>Click me to toggle left eye</button>
<button>Click me to close left eye</button>
```
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:
<!-- screenshot -->
### Notions
- [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)

Loading…
Cancel
Save