Fix(DPxAI): Add subject for robots harmony

2 months ago · e9849dd4d2
1 changed files with 384 additions and 0 deletions
--- a/subjects/DPxAI/robots-harmony/README.md
+++ b/subjects/DPxAI/robots-harmony/README.md
@ -0,0 +1,384 @@
 ## Robots Harmony
 > AI Synergy Mode
 ## Context
 Welcome to your final milestone! After each of you has brought your unique robot to life, it's time to reunite them together.
 Now, all those incredible robots need to be displayed in perfect harmony in our interactive and visually stunning Robots `Gallery`.
 As a team, your task is to combine your individual creations into a cohesive display.
 This gallery won't just be functional, it will be a fun and visually appealing experience that highlights the creativity and collaboration behind your robots.
 > You'll be working in this mission as a team, so effective communication and mutual support are key to bringing your robots together.
 > Separate tasks equally, it will make the results better!
 > Remember what you learned in asking AI for the precise explanation of concepts, while your team apply those concepts and do the actual fun work!
 Go ahead, and let the world see the amazing robots you've created together!
 ## Setups:
 **1- Code Editor:**
 First , remember that you will not be using the platform's code editor. Instead, you can use this online [tool](https://jsfiddle.net/) to create and modify your code.
 > Feel free to play with the settings and familiarize yourself with the environment!
 **2- How to submit your code:**
 ------->Louis
 **3- Expected files:**
 You need to submit the following files:
 - `robots-harmony.html`
 - `robots-harmony.css`
 - `robots-harmony.js`
 ## Instructions
 Theses tasks are representing the mandatory part for this raid to be passed successfully. Bonus part is optional but highly encouraged for more fun!
 ### Task 1: Set Up the Gallery Structure
 #### 1- Create a New HTML File:
 Start by creating a new HTML file called `robot-harmony.html`.
 Set up the basic structure of the HTML document with a `<head>` and `<body>` inside an `<html>` tag.
 #### 2- Create a Container for the Robots:
 Inside the `<body>`, create a div element with the ID gallery.
 This div will serve as the container for all the robot portraits.
 ```html
 <div id="gallery"></div>
 ```
 #### 3- Include a title and each Robot:
 - Inside your gallery `<div>`, create an `<h1>` tag inside a `<div>` with an `id` of `title`. Then put the name of your gallery inside it !
 ```HTML
    <div id="idname">
        <h1>your favorite gallery name</h1>
    </div>
 ```
 - Each team member should copy their robot's HTML structure (the one you provided in the `first-move.html` exercise) and paste it inside the `gallery` div.
 - Ensure each robot is placed inside its own div with the class `name-portrait`, for example:
 ```html
 <div class="john-robot">
  <!-- Paste your robot's HTML structure here -->
 </div>
 <div class="sarah-robot">
  <!-- Paste your robot's HTML structure here -->
 </div>
 <div class="bob-robot">
  <!-- Paste your robot's HTML structure here -->
 </div>
 ```
 #### 4- Add Robot Information:
 Under each robot's `</section>`, add an `<h3>` element for the robot's name and a `<p>` element for a short description of its power.
 ```html
 <h3>Your robot's name</h3>
 <p>Your robot's description</p>
 ```
 ### Task 2: Style the Gallery
 #### 1- Update the CSS File:
 - In your `robots-harmony.css` file, add these styles:
 ```css
 * {
  margin: 0;
  box-sizing: border-box;
  opacity: 0.85;
 }
 body {
  height: 100vh;
 }
 section {
  padding: 20px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
 }
 div,
 p {
  border: solid 1px black;
  padding: 10px;
  margin: 0;
  border-radius: 30px;
 }
 #face {
  align-items: center;
  margin-bottom: 20px;
 }
 #eyes {
  display: flex;
  background-color: yellow;
  justify-content: space-between;
  align-items: center;
  border-radius: 50px;
  width: 200px;
 }
 #torso {
  width: 150px;
  height: 90%;
  background-color: violet;
 }
 .eye {
  width: 60px;
  height: 60px;
  background-color: red;
  border-radius: 50%;
 }
 .arm {
  background-color: aquamarine;
  width: 50px;
  height: 100px;
  margin: 20px;
 }
 .leg {
  background-color: dodgerblue;
  width: 50px;
  height: 100px;
  margin: 20px;
 }
 .body-member {
  width: 50px;
  margin: 30px;
 }
 h3 {
  margin-bottom: 10px;
 }
 ```
 - Then add this gallery style block, and change the `background-color` of it based on your team's favorite color:
 ```css
 #gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 100px;
  padding: 100px;
  /* Change this color to reflect the color of your gallery */
  background-color: #383086;
 }
 ```
 - Add the following block of style to all you class's of `name-robot`. To do so, we follow the rule:
 ```css
 .class-one,
 .class-two,
 .class-three {
  /* block of style */
 }
 ```
 - Name it with your `name-robot` for each member of the team, and put inside the block the following styles:
 ```css
 {
    border: 2px solid #333;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
 }
 ```
 #### 2- Add Animations:
 - Add a subtle `hover` animation to the robot portraits to make the gallery more dynamic and engaging.
 ```css
 .class-one:hover,
 .class-two:hover,
 .class-three:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }
 ```
 > Experiment by changing the colors of the box-shadow and the scale value! Be creative.
 - In your `#gallery` CSS rule, add some animated gradient color to the background! You can achieve it by combining CSS properties: `background`, `background-size`, `animation`, `box-shadow`.
 _For Example:_
 ```css
 background: linear-gradient(
  45deg,
  /* Starting angle of the gradient */ #color1,
  /* First color in the gradient */ #color2,
  /* Second color in the gradient */ #color3
 ); /* Optional third color in the gradient */
 background-size: 300% 300%; /* Increases the background size for smooth animation or effects */
 animation: gradientBackground 5s ease infinite; /* Animates the background to create a dynamic effect. */
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow around the element. Adjust the offsets, blur radius, and opacity as needed */
 ```
 - Let's make it more exciting, by actually making the colors move! We can do that with `keyframes`! Under the `#gallery` css rule, put the `keyframes`` block and see the magic !
 _For Example:_
 ```css
@keyframes gradientBackground {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
 }
 ```
 > Play with the values and colors to get the best effect for your gallery!
 **`Prompt Example:`**
 - "How do I create a smooth gradient background with multiple colors in CSS?"
 - "Explain to me as a beginner these CSS properties: `background`, `background-size`, `animation`, `box-shadow`."
 ### Task 3: Add Interactivity with JavaScript:
 #### 1- Create a New JavaScript File:
 Create a new JavaScript file called `robots-harmony.js`.
 Link this file to your `robots-harmony.html` file.
 #### 2- Add Color Change on Key Press:
 You will write JavaScript functions to change the colors of different parts of your robots when specific keys are pressed.
 In your `robots-harmony.js`, follow the following steps:
 - **Function to Change Arm Colors**:
  - Create a function named `changeArmColor`.
  - This function should accept a parameter `robotClass` to identify which robot to modify.
  - Inside the function, generate a random color using JavaScript.
  ```js
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  ```
  - Use `document.querySelector` to select the `left` and ```right` arm elements of the robot.
  - Apply the random color to both arm elements using style.backgroundColor.
  - Here is an example, do the same for right arm:
  ```js
  document.querySelector(`.${robotClass} #arm-left`).style.backgroundColor =
    randomColor;
  ```
 - **Function to Change Legs Colors**:
  - Create a function named `changeLegColor`.
  - Follow the same steps as the `changeArmColor` function but target the `legs`.
 - **Function to Change Eye Colors**:
  - Create a function named `changeEyeColor`.
  - Follow the same steps as the `changeArmColor` function but target the `eye`.
 - **Function to Change Face Colors**:
  - Create a function named `changeFaceColor`.
  - Follow the same steps as the `changeArmColor` function but target the `face`.
 #### 3- Adding Event Listeners for Keyboard Input:
 Next, you need to detect when specific keys are pressed and trigger the corresponding function.
 - Use `document.addEventListener` to listen for `keydown` events.
 - Inside the event listener, use multiple if statements to check which key was pressed.
 - Depending on the key pressed, call the appropriate function and pass the robot's class as an argument.
 Code example:
 ```js
 document.addEventListener("keydown", function (event) {
  if (event.key === "1") {
    changeArmColor("sarah-robot");
  }
  if (event.key === "2") {
    changeLegColor("sarah-robot");
  }
  if (event.key === "Q" || event.key === "q") {
    changeEyeColor("sarah-robot");
  }
  if (event.key === "A" || event.key === "a") {
    changeFaceColor("sarah-robot");
  }
  // Add similar conditions for other robots choosing what keys will change the colors!
  //...Here
 });
 ```
 #### 4- Task 5: Final Touches and Presentation
 - Test Everything:
 Ensure that all robots are displayed correctly in the gallery.
 Make sure all files (robot-gallery.html, robots-harmony.css, gallery-script.js, and any media files) are in the same folder.
 Double-check the code to ensure everything is clean and well-organized.
 ### Expected Output
 Your project needs to check all the previous tasks, it will look something close to [this](The link of the demo).
 ### Bonus part
 If you would like to make your project even more creative, you can add more features to your gallery on top of the mandatory ones!
 It could be music to the background, pop-out information window or anything that makes your project different!
 > Remember to ensure that the mandatory part is working perfectly before adding more effects.
 Good luck, and have fun bringing your robots to life in this dynamic gallery!