From 8332f2c1360a5ab3bcfd016bff11c686e8dd77ba Mon Sep 17 00:00:00 2001 From: oumaimafisaoui Date: Wed, 21 Aug 2024 08:54:14 +0100 Subject: [PATCH] Chore(DPxAI): Fix instructions for first wink --- subjects/DPxAI/colorful-arms/README.md | 73 ++++++++++++++++++++++++++ subjects/DPxAI/first-wink/README.md | 20 +++---- 2 files changed, 83 insertions(+), 10 deletions(-) create mode 100644 subjects/DPxAI/colorful-arms/README.md diff --git a/subjects/DPxAI/colorful-arms/README.md b/subjects/DPxAI/colorful-arms/README.md new file mode 100644 index 000000000..f08fae146 --- /dev/null +++ b/subjects/DPxAI/colorful-arms/README.md @@ -0,0 +1,73 @@ +## Colorful legs + +> JSPowered Mode + +### Context + +Your robot is cool, but you can make it even more striking! Or at least, make it show off its colorful legs to everyone! + +> Follow the instructions, ask your peers if you are stuck and stay motivated because you are close to the goal! +> Follow every hint you have in the subject! +> Continue on the code from last exercise, and change the file names! + +### Instructions + +In this exercise, you will use your gained knowledge to make your robot's legs change colors! + +#### Task 1: + +Let's put another button in the top right corner of the page with an id ``leg-color``, that will change the legs color. Add it in the HTML structure: + +```html + +``` + +Add the button style in the CSS file: + +```css +#leg-color +{ + position: fixed; + top: 240px; + right: 30px; + padding: 10px; + margin-bottom: 20px; + z-index: 2; +} +``` + +#### Task 2: + +In the JS file, like in the previous exercise, get the following elements: + +- The button with the ID ``leg-color``. +- The left and right leg elements with the IDs ``leg-left`` and ``leg-right``. +- Apply the random color to both legs by changing their ``backgroundColor``. + +At this point, you know how it goes! make those legs vibrate with beautiful colors! + +### Code Example: + +```js +// Select the button with id 'leg-color' +//...Here + +// Select the left and right legs elements +//...Here + +// Your function that gets triggered when clicking the new button + +const handleChangeLegColor = (event) => { + // Generate a random color + const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`; + + // Apply the random color to both legs + //...Here +}; + +legColorButton.addEventListener("click", handleChangeLegColor); +``` + +**``Prompt Example:``** + +- "What mistakes should I prevent while changing the background color of multiple elements in JavaScript?" diff --git a/subjects/DPxAI/first-wink/README.md b/subjects/DPxAI/first-wink/README.md index dc1ec4a25..a9b2a357b 100644 --- a/subjects/DPxAI/first-wink/README.md +++ b/subjects/DPxAI/first-wink/README.md @@ -22,11 +22,11 @@ Don't worry if things feel a bit challenging—that's part of the process! Just We provide you with some content to get started smoothly, check it out! -- [Video](https://www.youtube.com/watch?v=m34qd7aGMBo&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=13) on querySelector -- [Video](https://www.youtube.com/watch?v=ydRv338Fl8Y) DOM JS - Add an event listener to an element -- [Video](https://www.youtube.com/watch?v=4O6zSVR0ufw&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=15) DOM JS - Set an element's properties -- [Video](https://www.youtube.com/watch?v=amEBcoTYw0s&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=21) DOM JS - classList: toggle, replace & contains -- [Video](https://www.youtube.com/watch?v=pxlYKvju1z8&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=16) DOM JS - Set an element's inline style +- [Video](https://www.youtube.com/watch?v=m34qd7aGMBo&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=13) on ``querySelector`` +- [Video](https://www.youtube.com/watch?v=ydRv338Fl8Y) DOM JS - Add an ``event listener`` to an element +- [Video](https://www.youtube.com/watch?v=4O6zSVR0ufw&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=15) DOM JS - Set an ``element's properties`` +- [Video](https://www.youtube.com/watch?v=amEBcoTYw0s&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=21) DOM JS - ``classList``: toggle, replace & contains +- [Video](https://www.youtube.com/watch?v=pxlYKvju1z8&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=16) DOM JS - Set an element's ``inline style`` - [Memo DOM JS](https://github.com/nan-academy/js-training/blob/gh-pages/examples/dom.js) ### Instructions @@ -66,7 +66,7 @@ const myButton = document.querySelector("button"); **`Prompt Example:`** -- "How do I use querySelector to select an HTML element by its ID?" +- "How do I use ``querySelector`` to select an HTML element by its ID?" #### Task 3: @@ -76,7 +76,7 @@ This function will make the robot "wink" by toggling the `eye-closed` class on t - It changes the text content of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye". -- It toggles the class eye-closed in the classList of the eye-left HTML element. +- It toggles the class eye-closed in the ``classList`` of the eye-left HTML element. It changes the background color of the eye-left: if the eye is open, to "red", if the eye is closed, to "black" @@ -106,11 +106,11 @@ button.addEventListener('click', handleClick) **`Prompt Examples:`** -- "As a beginner, explain to me what is querySelector in JavaScript, and how do I use it to select an HTML element by its ID or class?" +- "As a beginner, explain to me what is ``querySelector`` in JavaScript, and how do I use it to select an HTML element by its ID or class?" -- "As a beginner, explain to me how can I change the text content of an HTML element using JavaScript?" +- "As a beginner, explain to me how can I change the text content of an ``HTML element`` using JavaScript?" -- "As a beginner, explain to me how do I use addEventListener to make a button respond to a click event in JavaScript?" +- "As a beginner, explain to me how do I use ``addEventListener`` to make a button respond to a click event in JavaScript?" ### Expected output