From 447f621015cd2f43796fb7a811f0a062449e2531 Mon Sep 17 00:00:00 2001
From: oumaimafisaoui <oumaimafisaoui@gmail.com>
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
+<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?"