From 95b52fc6d9ea4b47266b1949ed574507f94d79a8 Mon Sep 17 00:00:00 2001 From: MarieMalarme Date: Wed, 24 Mar 2021 10:41:59 +0000 Subject: [PATCH] bring-it-to-life: add videos + memo dom-js links --- subjects/bring-it-to-life/README.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/subjects/bring-it-to-life/README.md b/subjects/bring-it-to-life/README.md index add250d3..c32f8d16 100644 --- a/subjects/bring-it-to-life/README.md +++ b/subjects/bring-it-to-life/README.md @@ -1,12 +1,21 @@ ## Bring it to life +### Resources + +We provide you with some content to get started smoothly, check it out! +- Video [Link a JS script to your HTML file](https://www.youtube.com/watch?v=jMvsQm-p1gM&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=7) +- Video [DOM JS - getElementById](https://www.youtube.com/watch?v=34kAR8yBtDM&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=8) +- Video [DOM JS - Set an element's inline style](https://www.youtube.com/watch?v=pxlYKvju1z8&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=15) +- Video [DOM JS - classList: add & remove](https://www.youtube.com/watch?v=uQEM-3_4vPA&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=17) +- [Memo DOM JS](https://github.com/nan-academy/js-training/blob/gh-pages/examples/dom.js) + ### 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`](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. -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, [set 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. First, define this new class in your CSS file: ``` @@ -17,7 +26,7 @@ First, define this new class in your CSS file: } ``` -In the JS file, add the freshly-created class `eye-closed` to the [`classList`](https://css-tricks.com/snippets/javascript/the-classlist-api/) of your `eye-left` element, and [set its style property](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles) background color to "black". +In the JS file, add the freshly-created class `eye-closed` to the [`classList`](https://css-tricks.com/snippets/javascript/the-classlist-api/) 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.