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.6 KiB

Bring it to life

Resources

We provide you with some content to get started smoothly, check it out!

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:

Notions