Welcome to your final milestone! After each of you has brought your unique robot to life, it's time to reunite them together.
Welcome to your final milestone! After each of you has brought a robot to friend 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`.
Now, all those incredible robots need to be displayed in perfect harmony in our interactive and visually stunning Robots `Gallery`.
@ -12,7 +12,7 @@ As a team, your task is to combine your individual creations into a cohesive dis
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.
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.
> You'll be working on 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!
> Separate tasks equally, it will make the results better!
@ -26,24 +26,26 @@ Go ahead, and let the world see the amazing robots you've created together!
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.
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!
> Feel free to play with the settings and familiarize yourself with the collaborative environment!
> PS: Click on Run to see the result of your code!
**2- How to submit your code:**
**2- How to submit your code:**
Your project must be handed in by the group captain before the time runs out. This is done by publishing the code on the platform.
Your project must be handed in by the group captain before the time runs out. This is done by publishing the code on the platform.
To do so, go to **gitea** by clicking on the logo at the top right of your platform dashboard. (on the captain's account)
To do so, go to **gitea** by clicking on the logo at the top right of your platform dashboard. (on the captain's account)
@ -75,7 +77,7 @@ Inside your HTML file, set up the basic structure of the HTML document with a `<
#### 3- Put your robots inside the gallery:
#### 3- Put your robots inside the gallery:
- Inside the `<body>`, create a div element with the `id``gallery`.
- Under the `title` div, create a div element with the `id``gallery`.
- This div will serve as the container for all the robot portraits.
- This div will serve as the container for all the robot portraits.
@ -83,25 +85,25 @@ Inside your HTML file, set up the basic structure of the HTML document with a `<
<divid="gallery"></div>
<divid="gallery"></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 this `gallery` div.
- Each team member should copy their robot's HTML structure (the one you provided in the `first-move.html` exercise between the `<section>``</section>` code) and paste it inside this `gallery` div.
- Ensure each robot is placed inside its own div with the class `name-portrait`, for example:
- Ensure each robot is placed inside its own div with the class `name-robot`, do not forget to change the `name` to be your name in the team, for example:
```html
```html
<divclass="john-robot">
<divclass="john-robot">
<!-- Paste your robot's HTML structure here -->
<!-- Paste your robot's HTML structure here (face, upper-body, lowe-body)-->
</div>
</div>
<divclass="sarah-robot">
<divclass="sarah-robot">
<!-- Paste your robot's HTML structure here -->
<!-- Paste your robot's HTML structure here (face, upper-body, lowe-body) -->
</div>
</div>
<divclass="bob-robot">
<divclass="bob-robot">
<!-- Paste your robot's HTML structure here -->
<!-- Paste your robot's HTML structure here (face, upper-body, lowe-body) -->
</div>
</div>
```
```
#### 4- Add Robot Information:
#### 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.
Under each robot's `</section>` (that you copied from your robot's code in `first-move.html`), add an `<h3>` element for the robot's name and a `<p>` element for a short description of its power.
```html
```html
<h3>Your robot's name</h3>
<h3>Your robot's name</h3>
@ -112,6 +114,12 @@ Under each robot's `</section>`, add an `<h3>` element for the robot's name and
#### 1- Update the CSS File:
#### 1- Update the CSS File:
- In your HTML file, link your CSS file by pasting the following code in between the `<head></head>` tags:
```html
<linkrel="stylesheet"href="robots-harmony.css"/>
```
- In your CSS file, add these styles:
- In your CSS file, add these styles:
```css
```css
@ -199,6 +207,8 @@ h3 {
}
}
```
```
> Trust the process!
- Then add this gallery style block, and change the `background-color` of it based on your team's favorite color:
- Then add this gallery style block, and change the `background-color` of it based on your team's favorite color:
```css
```css
@ -258,20 +268,24 @@ h3 {
- 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`.
- 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`.
> Hint : Do not forget to replace the background property with the new value bellow!
_For Example:_
_For Example:_
```css
```css
background: linear-gradient(
background: linear-gradient(
45deg,
45deg,
/* Starting angle of the gradient */ #color1,
/* Starting angle of the gradient */ red,
/* First color in the gradient */ #color2,
/* First color in the gradient */ blue,
/* Second color in the gradient */ #color3
/* Second color in the gradient */ green
); /* Optional third color in the gradient */
); /* Optional third color in the gradient */
background-size: 300% 300%; /* Increases the background size for smooth animation or effects */
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. */
animation: gradientBackground 2s 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 */
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 */
```
```
> You saw no change? well we did not specify yet what to do with all those colors, angles and timing yet!
- 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 !
- 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:_
_For Example:_
@ -300,7 +314,6 @@ _For Example:_
### Task 3: Add Interactivity with JavaScript:
### Task 3: Add Interactivity with JavaScript:
#### 1- Add Color Change on Key Press:
#### 1- Add Color Change on Key Press:
Inside your JavaScript file, write functions that change the colors of different parts of your robots when specific keys are pressed.
Inside your JavaScript file, write functions that change the colors of different parts of your robots when specific keys are pressed.
@ -311,19 +324,23 @@ Follow the following steps:
- Create a function named `changeArmColor`.
- Create a function named `changeArmColor`.
- This function should accept a parameter `robotClass` to identify which robot to modify.
- This function should accept a parameter `robotClass` to identify which robot to modify.
- Inside the function, generate a random color using JavaScript.
- Inside the function, generate a random color using JavaScript, to both `left` and `right` arms.
- Follow the same steps as the `changeArmColor` function but target the `eyes`. (Yes, pay attention, the `id` that changes the face color is called `eyes`!)
- Follow the same steps as the `changeArmColor` function but target the `eyes``id`. (Yes, pay attention, the `id` that changes the face color is called `eyes`!)
#### 3- Adding Event Listeners for Keyboard Input:
#### 3- Adding Event Listeners for Keyboard Input:
Next, you need to detect when specific keys are pressed and trigger the corresponding function.
Next, you need to detect when specific keys are pressed and trigger the corresponding function.
- Use `document.addEventListener` to listen for `keydown` events.
- Use `document.addEventListener` to listen for `keydown` events.
- Inside the event listener, use multiple if statements to check which key was pressed.
- 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.
- Depending on the `key` pressed, call the appropriate `function` and pass the `robot's class` as an `argument`.
Code example:
_Code example:_
```js
```js
document.addEventListener("keydown", function (event) {
document.addEventListener("keydown", function (event) {
if (event.key === "1") {
if (event.key === "1") {
changeArmColor("sarah-robot");
changeArmColor("john-robot");
}
}
if (event.key === "2") {
if (event.key === "2") {
changeLegColor("sarah-robot");
changeLegColor("john-robot");
}
}
if (event.key === "Q" || event.key === "q") {
if (event.key === "Q" || event.key === "q") {
changeEyeColor("sarah-robot");
changeEyeColor("john-robot");
}
}
if (event.key === "A" || event.key === "a") {
if (event.key === "A" || event.key === "a") {
changeFaceColor("sarah-robot");
changeFaceColor("john-robot");
}
}
// Add similar conditions for other robots choosing what keys will change the colors!
// Add similar conditions for other robots choosing what keys will change the colors!
@ -372,29 +389,33 @@ document.addEventListener("keydown", function (event) {
});
});
```
```
- You should decide with your team mates the keys that will trigger each robot of yours!
**`Prompt Example:`**
**`Prompt Example:`**
- "What is `event.key` in JavaScript and how can it be used to detect keyboard inputs?"
- "What is `event.key` in JavaScript and how can it be used to detect keyboard inputs?"
- "How can I use `document.querySelector` to select multiple elements in JavaScript?"
- "How can I use `document.querySelector` to select multiple elements in JavaScript?"
#### 4- Task 5: Final Touches and Presentation
#### 4- Task 5: Final Touches:
Ensure that all robots are displayed correctly in the gallery.
- Ensure that all robots are displayed correctly in the gallery.
Make sure all files (robot-gallery.html, robots-harmony.css, gallery-script.js) are in the same folder submitted to your `Gitea`.
- Make sure all files (robots-harmony.html, robots-harmony.css, robots-harmony.js) are in the same folder submitted to your `Gitea`.
Double-check the code to ensure everything is clean and well-organized.
- Double-check the code to ensure everything is clean and well-organized.
### Expected Output
### Expected Output
Your project needs to check all the previous tasks, it will look something close to [this](The link of the demo).
Your project needs to check all the previous tasks, it will look something close to (and maybe better than) [this](The link of the demo).
### Bonus part
### 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!
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!
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.
> 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!
Look at all of you—you've made it to this point, working on uniting all your robot friends after bringing them to life. Now in this final step (or maybe the beginning), use your collaboration skills as much as you can!
**"Alone, we can do so little; together, we can do so much." — Helen Keller**
Oumaima Fisaoui
2 months ago