Browse Source

Chore(DPxAI): Fix instructions for first wink

pull/2706/head
OUMAIMA FISAOUI 3 months ago committed by Oumaima Fisaoui
parent
commit
8332f2c136
  1. 73
      subjects/DPxAI/colorful-arms/README.md
  2. 20
      subjects/DPxAI/first-wink/README.md

73
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
<button id="leg-color">Change robot's leg colors</button>
```
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?"

20
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! 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=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=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=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=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=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) - [Memo DOM JS](https://github.com/nan-academy/js-training/blob/gh-pages/examples/dom.js)
### Instructions ### Instructions
@ -66,7 +66,7 @@ const myButton = document.querySelector("button");
**`Prompt Example:`** **`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: #### 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 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" 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:`** **`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 ### Expected output

Loading…
Cancel
Save