![]() |
3 years ago | |
---|---|---|
.. | ||
README.md | 3 years ago | |
bring-it-to-life.png | 4 years ago |
README.md
Bring it to life
Resources
We provide you with some content to get started smoothly, check it out!
- Video Link a JS script to your HTML file
- Video DOM JS - getElementById
- Video DOM JS - Set an element's inline style
- Video DOM JS - classList: add & remove
- Memo DOM JS
Instructions
Still there? Well done! But hold on, here begins the serious part... In order to control your creation, you're going to plug its brain: JavaScript.
Link a JS script
to your HTML file.
In this script, you're going to close the left eye of your entity.
To do so, you have to target the eye-left
HTML element by its id
thanks to the getElementById
method. Then, set the style
of your eye-left
to set its background color to "black". We also need to modify its shape ; for that we are going to add a new class to it.
First, define this new class in your CSS file:
.eye-closed {
height: 4px;
padding: 0 5px;
border-radius: 10px;
}
In the JS file, add the freshly-created class eye-closed
to the classList
of your eye-left
element.
Reload the page - it's alive! Your JS brain has control and orders your HTML/CSS body to close one eye.
Code examples
Get a HTML element by its id
& set its inline style:
const myDiv = document.getElementById('my-div')
myDiv.style.color = 'green'
Expected output
This is what you should see in the browser: