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.
 
 
 
 
 
 

1.9 KiB

Bring it to life

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, change 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, and set its style property background color to "black".

Reload the page - it's alive! Your JS brain has control and orders your HTML/CSS body to close one eye.

Expected output

This is what you should see in the browser:

Notions