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.
2.2 KiB
2.2 KiB
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-openin theclassListof theeye-leftHTML element - change the background color of the
eye-left: if the eye is open, to "orange", if the eye is closed, to "black"