From e9849dd4d2687912398ba163cd8fcdfaf49a5df9 Mon Sep 17 00:00:00 2001 From: oumaimafisaoui Date: Wed, 28 Aug 2024 17:59:05 +0100 Subject: [PATCH] Fix(DPxAI): Add subject for robots harmony --- subjects/DPxAI/robots-harmony/README.md | 384 ++++++++++++++++++++++++ 1 file changed, 384 insertions(+) create mode 100644 subjects/DPxAI/robots-harmony/README.md diff --git a/subjects/DPxAI/robots-harmony/README.md b/subjects/DPxAI/robots-harmony/README.md new file mode 100644 index 000000000..1276642f1 --- /dev/null +++ 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 `` and `` inside an `` tag. + +#### 2- Create a Container for the Robots: + +Inside the ``, create a div element with the ID gallery. + +This div will serve as the container for all the robot portraits. + +```html + +``` + +#### 3- Include a title and each Robot: + +- Inside your gallery `
`, create an `

` tag inside a `
` with an `id` of `title`. Then put the name of your gallery inside it ! + +```HTML +
+

your favorite gallery name

+
+``` + +- 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 +
+ +
+
+ +
+
+ +
+``` + +#### 4- Add Robot Information: + +Under each robot's ``, add an `

` element for the robot's name and a `

` element for a short description of its power. + +```html +

Your robot's name

+

Your robot's description

+``` + +### 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!