mirror of https://github.com/01-edu/public.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
4 years ago | |
---|---|---|
.. | ||
README.md | 4 years ago |
README.md
Action - reaction!
OK, you have now connected HTML, CSS and JS altogether ; big day! Excited? Exhausted? Well so far, you've only scratched the surface... Let's go deeper into the power of JS! You're going to add some interaction ; the webpage will react when a user action will happen, called an event (a click, a key pressed, a mouse move, etc.).
Let's put a button on the top right corner of the page, that will toggle (close or open) the left eye when clicked. Add it in the HTML structure:
<button>Click me to toggle left eye</button>
Add the style in the CSS file:
button {
position: fixed;
top: 30px;
right: 30px;
padding: 30px;
}
In the JS file, get the HTML button element with querySelector
, and add an event listener on click
event, triggering a function that will:
- change the text content of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye"
- toggle the class
eye-open
in theclassList
of theeye-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"