Docs(DPxAI): add subject for colorful-legs

This commit is contained in:
oumaimafisaoui 2024-08-20 19:26:35 +01:00 committed by Oumaima Fisaoui
parent 88e5054db1
commit 447f621015
1 changed files with 50 additions and 0 deletions

View File

@ -0,0 +1,50 @@
## 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
Just like you turned your robot's arms special in the last exercise, you will do the same now with the legs!
Follow the same
#### 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">robot's leg colors</button>
```
Add the button style in the CSS file:
```css
#leg-color {
position: fixed;
top: 305px;
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`.
**`Prompt Example:`**
- "What mistakes should I prevent while changing the background color of multiple elements in JavaScript?"