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.
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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) to your `bring-it-to-life.html` file.
[`Link a JS script`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) to your HTML file.
In this script, you're going to close the left eye of your entity.
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`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) method. Then, [change the `style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles) 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.
To do so, you have to target the `eye-left` HTML element by its `id` thanks to the [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) method. Then, [change the `style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles) 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.
@ -22,7 +22,7 @@ Let's add new elements and wrap them in different layers ; convert this list of
Modify your CSS file to add rulesets to `section` tags: `display` at "flex" and `justify-content` at "center" (this is to turn the `section` tags into [`flex` containers](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), so the elements inside will be centered)
Modify your CSS file to add rulesets to `section` tags: `display` at "flex" and `justify-content` at "center" (this is to turn the `section` tags into [`flex` containers](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), so the elements inside will be centered)
Add also the following CSS to your `styles.css` file to see the freshly-added nested elements:
Add also the following CSS to your CSS file to see the freshly-added nested elements:
@ -7,7 +7,7 @@ The first step to achieve in your quest is to conceive your being ; for that, 2
#### Parameters
#### Parameters
To create any project, some things need to be declared in the `index.html` file - those are not visible elements in your page, but things cannot work without them.
To create any project, some things need to be declared in the HTML file - those are not visible elements in your page, but things cannot work without them.
Set your page with [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) & [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) tags, and also put a [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) to name the entity you're going to create.
Set your page with [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) & [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) tags, and also put a [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) to name the entity you're going to create.
#### Structure
#### Structure
@ -19,7 +19,7 @@ Let's define the first level of elements that your entity will be made of ; we'r
Inside the `<body>` tag of your HTML file, create 3 divisions using `<section>` tags, putting the following text content inside for each: 'face', 'upper-body', 'lower-body'.
Inside the `<body>` tag of your HTML file, create 3 divisions using `<section>` tags, putting the following text content inside for each: 'face', 'upper-body', 'lower-body'.
If you open you `index.html` file in the browser, you should see those 3 texts appear on the screen.
If you open you HTML file in the browser, you should see those 3 texts appear on the screen.
