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 fe84fbd4ce bring-it-to-life: add code examples to get an element by id in js and set its style properties 4 years ago
..
README.md bring-it-to-life: add code examples to get an element by id in js and set its style properties 4 years ago
bring-it-to-life.png Resize the img of the subjects 4 years ago

README.md

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