mirror of https://github.com/01-edu/public.git
Docs(DPxAI): Add subject for colorful arms
This commit is contained in:
parent
ed71296b4e
commit
503fa1c3f3
|
@ -0,0 +1,90 @@
|
|||
## Colorful arms
|
||||
|
||||
> JSPowered Mode
|
||||
|
||||
### Context
|
||||
|
||||
Your robot winked, but you can make it talk too! or at least, make it say his first hello to the world!
|
||||
|
||||
> 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
|
||||
|
||||
After finishing these tasks, you will be able make your robot's arms change to beautiful colors!
|
||||
|
||||
#### Task 1:
|
||||
|
||||
Let's put a third button in the top right corner of the page with an id `arm-color`, that will change the arms color. Add it in the HTML structure:
|
||||
|
||||
```html
|
||||
<button id="arm-color">Change robot's arm colors</button>
|
||||
```
|
||||
|
||||
Add the button style in the CSS file:
|
||||
|
||||
```css
|
||||
#arm-color {
|
||||
position: fixed;
|
||||
top: 170px;
|
||||
right: 30px;
|
||||
padding: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
```
|
||||
|
||||
Also replace the styles tto your HTML ``button` element with this block:
|
||||
|
||||
```css
|
||||
button {
|
||||
border-radius: 50px;
|
||||
padding: 10px;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
Do you see how prettier the buttons turned to be?
|
||||
|
||||
#### Task 2:
|
||||
|
||||
In the JS file, like in the previous exercise, get the following elements:
|
||||
|
||||
- The button with the ID `arm-color`.
|
||||
- The left and right arm elements with the IDs `arm-left` and `arm-right`.
|
||||
|
||||
#### Task 3:
|
||||
|
||||
We provide you with the variable `randomColor`, that stores a random color in each different time we use it.
|
||||
|
||||
- Apply the random color to both arms by changing their `backgroundColor`.
|
||||
|
||||
### Code Example:
|
||||
|
||||
```js
|
||||
// Select the button with id 'arm-color'
|
||||
//...Here
|
||||
|
||||
// Select the left and right arm elements
|
||||
//...Here
|
||||
|
||||
// Your function that gets triggered when clicking the new button
|
||||
|
||||
const handleChangeArmColor = (event) => {
|
||||
// Generate a random color
|
||||
const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
|
||||
|
||||
// Apply the random color to both arms
|
||||
//...Here
|
||||
};
|
||||
|
||||
// Attach the handleChangeArmColor function to the 'arm-color' button
|
||||
armColorButton.addEventListener("click", handleChangeArmColor);
|
||||
```
|
||||
|
||||
**`Prompt Example:`**
|
||||
|
||||
- "How do I change the background color of multiple elements in JavaScript?"
|
Loading…
Reference in New Issue