Browse Source

Docs(DPxAI): add subject for colorful-legs

pull/2708/head
OUMAIMA FISAOUI 3 months ago committed by Oumaima Fisaoui
parent
commit
447f621015
  1. 50
      subjects/DPxAI/colorful-legs/README.md

50
subjects/DPxAI/colorful-legs/README.md

@ -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?"
Loading…
Cancel
Save