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.
 
 
 
 
 
 
Marie Malarme 6065a13342 world-wide-what exercises: add titles in the readme 4 years ago
..
README.md world-wide-what exercises: add titles in the readme 4 years ago
bring-it-to-life.png Resize the img of the subjects 4 years ago

README.md

Bring it to life

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, 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.

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