From 503fa1c3f3ee65bc9552cac23fba3b675c62565c Mon Sep 17 00:00:00 2001
From: oumaimafisaoui <oumaimafisaoui@gmail.com>
Date: Tue, 20 Aug 2024 18:30:37 +0100
Subject: [PATCH] Docs(DPxAI): Add subject for colorful arms

---
 subjects/DPxAI/colorful-arms/README.md | 90 ++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 subjects/DPxAI/colorful-arms/README.md

diff --git a/subjects/DPxAI/colorful-arms/README.md b/subjects/DPxAI/colorful-arms/README.md
new file mode 100644
index 000000000..43f26cf99
--- /dev/null
+++ b/subjects/DPxAI/colorful-arms/README.md
@@ -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?"