From 447f621015cd2f43796fb7a811f0a062449e2531 Mon Sep 17 00:00:00 2001 From: oumaimafisaoui Date: Tue, 20 Aug 2024 19:26:35 +0100 Subject: [PATCH] Docs(DPxAI): add subject for colorful-legs --- subjects/DPxAI/colorful-legs/README.md | 50 ++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 subjects/DPxAI/colorful-legs/README.md diff --git a/subjects/DPxAI/colorful-legs/README.md b/subjects/DPxAI/colorful-legs/README.md new file mode 100644 index 000000000..24747cc6c --- /dev/null +++ b/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 + +``` + +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?"