- Use the identifier `seven` with the value being a string of the number 7
- 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
- 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."
> "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."
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.
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?
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?
@ -33,15 +33,15 @@ First, define this new class in `your CSS file`:
#### Task 1
#### 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
#### 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
#### 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).
Using the `.slice` method to cut parts of a string:
Using the `.slice` method to cut parts of a string:
```js
```js
let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let numbers = "0123456789";
let cutFirst = alphabet.slice(10); // 'KLMNOPQRSTUVWXYZ'
let firstNumbers = numbers.slice(5); // '6789'
let cutLast = alphabet.slice(0, -3); // 'ABCDEFGHIJKLMNOPQRSTU'
let lastNumbers = numbers.slice(0, -3); // '0123456'
let cutFirstLast = alphabet.slice(5, -6); // 'FGHIJKLMNOPQRS
let cutBothSides= numbers.slice(2, -3); // '23456'
```
```
### Splitting Strings
### Splitting Strings
@ -93,11 +93,11 @@ Declare an `oldestAge` variable that uses `Math.max` on the `age` properties of
#### Task 2:
#### 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 `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 `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 `cutFirstLast` variable that removes the first `5` characters and the last 6 characters of `alphabet`, simulating a precise cut in the middle.
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.
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.
@ -141,7 +141,7 @@ As the leader of the RoboGuard forces, you're not just preparing for battle—yo
1- Create the `duos` Function:
1- Create the `duos` Function:
- This function will take `two arguments`, representing the **names** of **two robots**.
- 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!"
> Output's example: "robotOne and robotTwo!"
@ -149,7 +149,7 @@ As the leader of the RoboGuard forces, you're not just preparing for battle—yo
- This function will take `three arguments`: the **names** of two robots and the **task** they will perform together.
- 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!
> Output's example: "robotOne and robotTwo are saying hi!
@ -109,7 +109,7 @@ Now, the array looks like this:
#### Task 1:
#### Task 1:
You must declare a variable `components` that contains 4 strings, one for each robot component.
You must declare a variable `components` that contains 4 strings, one for each robot component "motor", "sensor", "battery" and "camera" (respect that order).
- Check if the value of the provided variable `truth` is truthy, log '`The truth was spoken.`'
- Check if the value of the provided variable `truth` is truthy, log the string: `The truth was spoken.`
- Otherwise, log '`Lies !!!!`' because the value of the provided variable truth is falsy.
- Otherwise, log the string: `Lies !!!!` because the value of the provided variable truth is falsy.
#### Task 2:
#### 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:
@ -52,7 +52,7 @@ Choose a power that you will give to your robot from the following list and put
#### The `<body>` part:
#### The `<body>` part:
This section contains the content of your webpage , in our case the lower body of your buddy. Define the skeleton of your robot by organizing it into three main sections: the face, the upper body, and the lower body. Inside the <body> tag of your HTML file, create three divisions using <section> tags, and place the following text content inside each one: face, upper-body, lower-body.
This section contains the content of your webpage , in our case the lower body of your buddy. Define the skeleton of your robot by organizing it into three main sections: the face, the upper body, and the lower body. Inside the `<body>` tag of your HTML file, create three divisions using `<section>` tags, and place the following text content inside each one: face, upper-body, lower-body.
> Don't forget to press Render again to refresh the display page when you modify your code.
> Don't forget to press Render again to refresh the display page when you modify your code.
- Add a `model` property with the string value 'RX-78'.
- Add a `model` property with the string value 'RX-78'.
- Add a `fullName` property that is the joined value of the `brand` and the `model` with a space in between.
- Add a `fullName` property that is the joined value of the `brand` and the `model` with a space in between. (`brand` and `model`are already defined in the provided `robot`)
- Add `10` to its `batteryLevel` property.
- Add `10` to its `batteryLevel` property.
#### Task 2:
#### Task 2:
Let's move away from objects a bit, and discover a notion we will use later. `Duplicating a String with Placeholders`!
Let's move away from objects a bit, and discover a notion we will use later. `Duplicating a String with Placeholders`!
Declare a variable `duplicate` that repeats the provided variable `sentence`, separated by a comma, and adds an exclamation mark at the end.
Declare a variable `duplicate` that repeats the provided variable `sentence`, separated by a comma and a space, and then adds an exclamation mark at the end.
> For example, if `sentence` is "Hello there", we expect "Hello there, Hello there!".
> For example, if `sentence` is "Hello there", we expect "Hello there, Hello there!".
Oumaima Fisaoui