|
|
@ -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) |
|
|
|