Skip to content

Commit

Permalink
Merge branch 'master' into CON-3182-Fixing-the-listed-issue
Browse files Browse the repository at this point in the history
  • Loading branch information
Oumaimafisaoui authored Oct 2, 2024
2 parents 82717b4 + 3b79b28 commit 6ee801b
Show file tree
Hide file tree
Showing 30 changed files with 418 additions and 247 deletions.
2 changes: 1 addition & 1 deletion subjects/AI.GO/call-it/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ there's still a bit of work to do.

First of all, instead of writing down what things are _(you're not writing down on your hand the word 'hand',
are you?)_, we're going to identify them semantically with the very practical [id
attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attri butes/id). This `id` has to be a **unique**
attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). This `id` has to be a **unique**
identifier on your webpage, allowing you to target your element when needed. You can compare it to your name and
surname; this is what identifies you to other people, and if someone's calling you by your name, you answer.

Expand Down
7 changes: 4 additions & 3 deletions subjects/AI.GO/colorful-arms/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,10 @@ In the JS file, like in the previous exercise, get the following elements:

#### Task 3:

We provide you with the variable `randomColor`, that stores a random color in each different time we use it.
In the code example below, we show you the variable `randomColor` which stores a random color each time we use it.

- Apply the random color to both arms by changing their `backgroundColor`.
- Create a function that applies the random color to both arms by changing their `backgroundColor`every time the function is called.
- Then add an `event listener` on `click event` for the button with ID `arm-color`.

### Code Example:

Expand All @@ -87,7 +88,7 @@ armColorButton.addEventListener("click", handleChangeArmColor);

### Expected result

You can see an example of the expected result [here](https://youtu.be/KjTBuAmUnk4)
You can see an example of the expected result [here](https://youtu.be/viQymmWw6wo)

**`Prompt Example:`**

Expand Down
2 changes: 1 addition & 1 deletion subjects/AI.GO/colorful-legs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ In the JS file, like in the previous exercise, get the following elements:

### Expected result

You can see an example of the expected result [here](https://youtu.be/QQ0GKGuXgBw)
You can see an example of the expected result [here](https://youtu.be/vnzQ0R-Ixl0)

**`Prompt Example:`**

Expand Down
5 changes: 0 additions & 5 deletions subjects/AI.GO/declare-everything/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,6 @@ Declare two variables:
- Use the identifier `seven` with the value being a string of the number 7
- Use the identifier `seventySeven` with the value being a string of the number 77

```js
let seven = "7";
let seventySeven = "77";
```

---

> "When we first begin fighting for our dreams, we have no experience and make many mistakes. The secret of life, though, is to fall seven times and get up eight times."
Expand Down
2 changes: 1 addition & 1 deletion subjects/AI.GO/first-function/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,4 @@ You are a robot made by a scientist called Rick and you want to know your purpos

- Declare a function named `ask` that `log` 'What is my purpose ?' in the console
- Declare a function named `reply` that `log` 'You pass butter.' in the console
Then first `call the ask` then `the reply` once, in that order.
Then call the `ask` and the `reply` each once, in that order.
2 changes: 1 addition & 1 deletion subjects/AI.GO/first-hello/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const handleSpeakClick = (event) => {

### Expected result

You can see an example of the expected result [here](https://youtu.be/At4BhyzMxzw)
You can see an example of the expected result [here](https://youtu.be/PuyEdAA0wy4)

**`Prompt Example:`**

Expand Down
10 changes: 5 additions & 5 deletions subjects/AI.GO/first-move/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@

Glad to see you here! It's impressive how far you've come today, and you are just one step away from seeing a simple yet impressive thing we can do with JavaScript. This will give you a glimpse of how JavaScript works with HTML and CSS to make your robot interesting! By using JavaScript, you will control and interact with your creation, adding dynamic abilities that make it come alive.

So far, you haven't learned much about JavaScript (but you will soon, don't worry!), but we want you to see an example of how powerful JavaScript can be in modifying the robot.
So far, you haven't learned much about JavaScript (but you will soon, don't worry!), now we want you to see an example of how powerful JavaScript can be in modifying the robot.

In these instructions, you will execute the steps to change your robot's eyes from open to closed using JavaScript! Does it seem simple? Yes, but you will later make your robot more dynamic by pushing a button to open and close that eye! Of course, that's for when you learn more about JavaScript (Again, a secret for you because you made it until here).
In these instructions, you will execute the steps to change your robot's eyes from open to closed using JavaScript! Does it seem simple? Yes, but you will later make your robot more dynamic by pushing a button to open and close that eye! Of course, that's for when you will learn more about JavaScript.

This is more of a puzzle to use your brain to follow hints and make things work, even if it seems complex (it is not!). Isn't that your brain's superpower?

Expand All @@ -33,15 +33,15 @@ First, define this new class in `your CSS file`:

#### Task 1

Second, [`Link a JS script`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) to your HTML file.
Second, [Link a JS script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) to your HTML file.

#### Task 2

Then in your Javascript file, you're going to close the left eye of your entity. To do so, you have to target the `eye-left` HTML element by its `id` using the [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) method.
Then in your Javascript file, you're going to close the left eye of your entity. To do so, you have to first target the `eye-left` HTML element by its `id` using the [getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) method.

#### Task 3

Then, [set the `style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles) of your `eye-left` to change its background color to "black". We also need to modify its shape; for that, we are going to add a new class to it.
Then, after your eye is targetted, [set the style](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles) of your `eye-left` to change its background color to "black". Finally, we also need to modify its shape; for that, we are going to add a new class to it. To do so, you need to you use the [classList.add()](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).

### Code examples

Expand Down
55 changes: 32 additions & 23 deletions subjects/AI.GO/first-wink/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Don't worry if things feel a bit challenging—that's part of the process! Just

> We can mention thing you do not know; but by this time, you know what to do! Search for it, ask your peers and use clever prompts ;)
- **You need to continue on the HTML, CSS, JS code you submitted for the exercise `first-move`, but with an empty JavaScript file and do not forget to change the name of the linked files to the name of this exercise!**
- **You need to continue on the HTML, CSS, JS code you submitted for the exercise `first-move`, but with an empty JavaScript file. Do not forget to change the name of the linked files to the name of this exercise as well as following the new instructions!**

### Resources

Expand All @@ -33,12 +33,12 @@ We provide you with some content to get started smoothly, check it out!

#### Task 1:

Let's put a button on the top right corner of the page, that will toggle (close or open) the left eye when clicked.
Let's put a button on the top right corner of the page with the `id` set to "eye-btn", that will toggle (close or open) the left eye when clicked.

Add it in the HTML structure:

```js
<button>Click to close the left eye</button>
<button id="eye-btn">Click to close the left eye</button>
```

And add the style in the CSS file:
Expand All @@ -55,63 +55,72 @@ button {

#### Task 2:

Select the button in your JavaScript file that will allow the user to control the robot’s left eye.
Select the button in your JavaScript file by its `id`. That will allow the user to control the robot’s left eye.

```js
// Select the button element using its ID so we can interact with it in our JavaScript

//Example of selecting a button called myButton
const myButton = document.querySelector("button");
//Example of selecting a button called btn-example
const myButton = document.getElementById("btn-example");
```

**`Prompt Example:`**

- "How do I use `querySelector` to select an HTML element by its ID?"
- "How do I use `getElementById` to select an HTML element by its ID?"

#### Task 3:

Write a function that will be triggered when the button is clicked.

This function will make the robot "wink" by toggling the `eye-closed` class on the left eye and change the `button` text based on the current state of the eye.

- It changes the text content of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye".
1- It changes the text content of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye".

- It toggles the class eye-closed in the `classList` of the eye-left HTML element.
2- It toggles the class `eye-closed` in the `classList` of the `eye-left` HTML element.

It changes the background color of the eye-left: if the eye is open, to "red", if the eye is closed, to "black"
3- It changes the background color of the `eye-left`: if the eye is open, to "red", if the eye is closed, to "black"

**Code Example:**

```js
const button = document.querySelector('button')
const button = document.getElementById('eye-btn')

const handleClick = (event) => {

// Select the left eye element by its ID
const myDiv = ...
// Select left eye by its ID and assign it to the variable eyeLeft
const eyeLeft = ...

// Check if the eye is currently closed by looking at its background color
// Check if the eye is currently closed by looking at the eyeLeft background color, if it's 'black', that means it's closed.
if (...) {
// If the eye is closed, open it and update the button text
/*
- Add to the 'button' element the text: "Click to close the left eye"
- Change the 'eyeLeft' element background color to red
*/

} else {
// If the eye is open, close it and update the button text
/*
If the eye is open:
- Add to the 'button' element the text: "Click to open the left eye"
- Change the 'eyeLeft' element background color to black
*/
}
// Toggle the 'eye-closed' class on the 'eye-left' div
eyeLeft.classList.toggle("eye-closed")
};

// register the event:
/* Register the event:
here we ask the button to call our `handleClick` function
on the 'click' event, so every time it's clicked
*/
button.addEventListener('click', handleClick)
// here we ask the button to call our `handleClick` function
// on the 'click' event, so every time it's clicked
```

### Expected result

You can see an example of the expected result [here](https://youtu.be/wuYTorfBViE)
You can see an example of the expected result [here](https://youtu.be/IQ6-3X3JBss)

**`Prompt Examples:`**

- "As a beginner, explain to me what is `querySelector` in JavaScript, and how do I use it to select an HTML element by its ID or class?"

- "As a beginner, explain to me how can I change the text content of an `HTML element` using JavaScript?"
- "As a beginner, explain to me how can I change the text content and the background color of an `HTML element` using JavaScript?"

- "As a beginner, explain to me how do I use `addEventListener` to make a button respond to a click event in JavaScript?"
16 changes: 8 additions & 8 deletions subjects/AI.GO/good-recipe/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@ console.log(num.toFixed(2)); // -> '3.33'
Using the `.slice` method to cut parts of a string:

```js
let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let cutFirst = alphabet.slice(10); // 'KLMNOPQRSTUVWXYZ'
let cutLast = alphabet.slice(0, -3); // 'ABCDEFGHIJKLMNOPQRSTU'
let cutFirstLast = alphabet.slice(5, -6); // 'FGHIJKLMNOPQRS
let numbers = "0123456789";
let firstNumbers = numbers.slice(5); // '6789'
let lastNumbers = numbers.slice(0, -3); // '0123456'
let cutBothSides = numbers.slice(2, -3); // '23456'
```

### Splitting Strings
Expand Down Expand Up @@ -93,11 +93,11 @@ Declare an `oldestAge` variable that uses `Math.max` on the `age` properties of

#### Task 2:

You need to slice some virtual vegetables. Using the `.slice` method and the provided alphabet variable, which is a string of all the characters in the alphabet:
You need to slice some virtual vegetables. Using the `.slice` method and the provided `alphabet` variable, which is a string of all the characters in the alphabet:

- Declare a `cutFirst` variable that removes the first `10` characters of alphabet, simulating the removal of the first few slices.
- Declare a `cutLast` variable that removes the last `3` characters of alphabet, simulating the trimming of the last few slices.
- Declare a `cutFirstLast` variable that removes the first `5` characters and the last 6 characters of alphabet, simulating a precise cut in the middle.
- Declare a `cutFirst` variable that removes the first `10` characters of `alphabet`, simulating the removal of the first few slices.
- Declare a `cutLast` variable that removes the last `3` characters of `alphabet`, simulating the trimming of the last few slices.
- Declare a `cutFirstLast` variable that removes the first `5` characters and the last 6 characters of `alphabet`, simulating a precise cut in the middle.

#### Task 3:

Expand Down
6 changes: 3 additions & 3 deletions subjects/AI.GO/i-win-arguments/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
### Context

You made it to the last mission in getting your full power, to make your robot alive and fully functional!
You made it to the last mission for getting your full power which will make your robot alive and fully functional!

The final step involves mastering the use of `arguments` in functions. By learning how to use and manage these `arguments` effectively, you can unlock the full potential of your robot and make it later truly come alive.

Expand Down Expand Up @@ -141,15 +141,15 @@ As the leader of the RoboGuard forces, you're not just preparing for battle—yo
1- Create the `duos` Function:

- This function will take `two arguments`, representing the **names** of **two robots**.
- It will `log them` together with an **and** and an **exclamation mark**.
- It will `log them` together with a space, the word **and**, another space and end the sentence with an **exclamation mark**.

> Output's example: "robotOne and robotTwo!"
2- Create the `duosWork` Function:

- This function will take `three arguments`: the **names** of two robots and the **task** they will perform together.

- It will `log them` together in a sentence describing their task.
- It will `log them` together in a sentence describing their task with the same formatting than below.

> Output's example: "robotOne and robotTwo are saying hi!
Expand Down
8 changes: 4 additions & 4 deletions subjects/AI.GO/only-if/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,14 +108,14 @@ if (temperature < 8) {

Your Robot must always seek the truth.

- Check if the value of the provided variable `truth` is truthy, log '`The truth was spoken.`'
- Otherwise, log '`Lies !!!!`' because the value of the provided variable truth is falsy.
- Check if the value of the provided variable `truth` is truthy, log the string: `The truth was spoken.`
- Otherwise, log the string: `Lies !!!!` because the value of the provided variable truth is falsy.

#### Task 2:

Your `RoboGuard's traveling company` has a special promotion for robot members aged between 18 and 25. Write the if condition that will check if the robot user can benefit from the promotion:
Your `RoboGuard's traveling company` has a special promotion for robot members aged between 18 (included) and 25 (included). Write the if condition that will check if the robot user can benefit from the promotion:

- `user.age` must be at least `18`.
- `user.age` must be more than `17`.
- `user.age` must be less than or equal to `25`.
- `user.activeMembership` must be `true`.

Expand Down
Loading

0 comments on commit 6ee801b

Please sign in to comment.