fix(curriculum): add quotes to string values (Football Team Cards) (#53891)

This commit is contained in:
Lasse Jørgensen
2024-02-26 20:24:12 -08:00
committed by GitHub
parent 63bc3d4aa3
commit 497d9792fd
16 changed files with 36 additions and 36 deletions
@@ -9,7 +9,7 @@ dashedName: step-1
In this project, you will build a set of football team cards and learn about nested objects, object destructuring, default parameters, event listeners, and switch statements. All of the HTML and CSS for this project has been provided for you.
Start by accessing the `id` called `team` from the HTML document and storing it in a `const` variable called `teamName`.
Start by accessing the `id` called `"team"` from the HTML document and storing it in a `const` variable called `teamName`.
Remember, you can use the `getElementById` method for this.
@@ -7,7 +7,7 @@ dashedName: step-2
# --description--
Next, access the `id` called `sport` from the HTML document and store it in a `const` variable called `typeOfSport`. Below that variable, assign the `id` of `year` to a `const` variable called `worldCupYear`.
Next, access the `id` called `"sport"` from the HTML document and store it in a `const` variable called `typeOfSport`. Below that variable, assign the `id` of `year` to a `const` variable called `worldCupYear`.
# --hints--
@@ -7,7 +7,7 @@ dashedName: step-3
# --description--
Next, access the `id` called `head-coach` from the HTML document and store it in a `const` variable called `headCoach`. Below that variable, assign the `id` of `player-cards` to a `const` variable called `playerCards`.
Next, access the `id` called `"head-coach"` from the HTML document and store it in a `const` variable called `headCoach`. Below that variable, assign the `id` of `"player-cards"` to a `const` variable called `playerCards`.
# --hints--
@@ -7,7 +7,7 @@ dashedName: step-4
# --description--
Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method.
Create one more `const` variable called `playersDropdownList` and assign it the `id` of `"players"` using the `getElementById` method.
# --hints--
@@ -7,7 +7,7 @@ dashedName: step-6
# --description--
Inside the `myFavoriteFootballTeam` object, add a new property with a key named `team` and a string value of `Argentina`.
Inside the `myFavoriteFootballTeam` object, add a new property with a key named `team` and a string value of `"Argentina"`.
# --hints--
@@ -18,7 +18,7 @@ Your `myFavoriteFootballTeam` object should have a `team` property.
assert.property(myFavoriteFootballTeam, 'team');
```
Your `team` property should be set to `Argentina`.
Your `team` property should be set to `"Argentina"`.
```js
assert.equal(myFavoriteFootballTeam.team, 'Argentina');
@@ -7,7 +7,7 @@ dashedName: step-7
# --description--
Below the `team` property, add a new property with a key named `sport` and a string value of `Football`.
Below the `team` property, add a new property with a key named `sport` and a string value of `"Football"`.
# --hints--
@@ -7,7 +7,7 @@ dashedName: step-10
# --description--
Below the `isWorldCupWinner` property, add a new key called `headCoach` with a value of an empty object. Inside that object, add a property with a key of `coachName` and a string value of `Carlos Bilardo`. Below that property, add another key called `matches` with a number value of 7.
Below the `isWorldCupWinner` property, add a new key called `headCoach` with a value of an empty object. Inside that object, add a property with a key of `coachName` and a string value of `"Carlos Bilardo"`. Below that property, add another key called `matches` with a number value of `7`.
# --hints--
@@ -29,7 +29,7 @@ Your `headCoach` object should have a `coachName` property.
assert.property(myFavoriteFootballTeam.headCoach, 'coachName');
```
Your `coachName` property should be set to `Carlos Bilardo`.
Your `coachName` property should be set to `"Carlos Bilardo"`.
```js
assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo');
@@ -31,7 +31,7 @@ Your new object should have a `name` property.
assert.property(myFavoriteFootballTeam.players[0], 'name');
```
Your `name` property should be set to `Sergio Almirón`.
Your `name` property should be set to `"Sergio Almirón"`.
```js
assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón');
@@ -43,7 +43,7 @@ Your new object should have a `position` property.
assert.property(myFavoriteFootballTeam.players[0], 'position');
```
Your `position` property should be set to `forward`.
Your `position` property should be set to `"forward"`.
```js
assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward');
@@ -38,7 +38,7 @@ Your new object should have a `name` property.
assert.property(myFavoriteFootballTeam.players[1], 'name');
```
Your `name` property should be set to `Sergio Batista`.
Your `name` property should be set to `"Sergio Batista"`.
```js
assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista');
@@ -50,7 +50,7 @@ Your new object should have a `position` property.
assert.property(myFavoriteFootballTeam.players[1], 'position');
```
Your `position` property should be set to `midfielder`.
Your `position` property should be set to `"midfielder"`.
```js
assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder');
@@ -9,11 +9,11 @@ dashedName: step-27
Inside the body of the callback function, you will need to add template literals ``` `` ``` which will contain the HTML content for the player cards.
Inside the template literals, add an empty `div` with a class of `player-card`.
Inside the template literals, add an empty `div` with a class of `"player-card"`.
# --hints--
You should use template literals to add an empty `div` with a class of `player-card`.
You should use template literals to add an empty `div` with a class of `"player-card"`.
```js
@@ -9,7 +9,7 @@ dashedName: step-35
The next step is to create a function that will detect when a user makes a selection from the `playersDropdownList`.
Use the `.addEventListener()` method on `playersDropdownList`. Inside the event listener, pass in a `change` event type and an empty callback function.
Use the `.addEventListener()` method on `playersDropdownList`. Inside the event listener, pass in a `"change"` event type and an empty callback function.
# --hints--
@@ -19,7 +19,7 @@ You should call the `.addEventListener()` method on the `playersDropdownList` va
assert.match(code, /playersDropdownList\.addEventListener\(/);
```
Your event listener should listen for the `change` event.
Your event listener should listen for the `"change"` event.
```js
assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/);
@@ -9,11 +9,11 @@ dashedName: step-40
If the user selects `Nicknames` from the dropdown menu you will want to filter out player cards that have a nickname.
Start by adding a `case` clause for `nickname` inside your `switch` statement.
Start by adding a `case` clause for `"nickname"` inside your `switch` statement.
# --hints--
You should add a new `case` clause for `nickname` inside your `switch` statement.
You should add a new `case` clause for `"nickname"` inside your `switch` statement.
```js
assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*/)
@@ -7,23 +7,23 @@ dashedName: step-43
# --description--
Next, add a `case` clause for `forward`.
Next, add a `case` clause for `"forward"`.
Inside that `case`, call the `setPlayerCards` function with an argument of `players.filter()`.
Inside the `filter()` method, add a callback function with a parameter of `player` that will check if `player.position` equals `forward`.
Inside the `filter()` method, add a callback function with a parameter of `player` that will check if `player.position` equals `"forward"`.
Lastly, add a `break` statement below the `setPlayerCards` function call.
# --hints--
You should add a new `case` for `forward` inside your `switch` statement.
You should add a new `case` for `"forward"` inside your `switch` statement.
```js
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*/)
```
In your `forward` `case`, you should call the `setPlayerCards` function.
In your `"forward"` `case`, you should call the `setPlayerCards` function.
```js
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/)
@@ -47,7 +47,7 @@ Your `filter()` callback should take a `player` parameter.
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
```
Your `filter()` callback should implicitly return the result of checking if `player.position` is `forward`.
Your `filter()` callback should implicitly return the result of checking if `player.position` is `"forward"`.
```js
assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)forward\2|('|"|`)forward\3\s*===?\s*player\.position)\s*\)/)
@@ -7,17 +7,17 @@ dashedName: step-44
# --description--
Add a new `case` for `midfielder` that checks if `player.position` equals `midfielder` following the same pattern from the previous step.
Add a new `case` for `"midfielder"` that checks if `player.position` equals `"midfielder"` following the same pattern from the previous step.
# --hints--
You should add a new `case` for `midfielder` inside your `switch` statement.
You should add a new `case` for `"midfielder"` inside your `switch` statement.
```js
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/)
```
In your `midfielder` `case`, you should call the `setPlayerCards` function.
In your `"midfielder"` `case`, you should call the `setPlayerCards` function.
```js
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/)
@@ -41,7 +41,7 @@ Your `filter()` callback should take a `player` parameter.
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
```
Your `filter()` callback should implicitly return the result of checking if `player.position` is `midfielder`.
Your `filter()` callback should implicitly return the result of checking if `player.position` is `"midfielder"`.
```js
assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)midfielder\2|('|"|`)midfielder\3\s*===?\s*player\.position)\s*\)/)
@@ -7,17 +7,17 @@ dashedName: step-45
# --description--
Add a new `case` for `defender` that checks if `player.position` equals `defender` following the same pattern as the previous step.
Add a new `case` for `"defender"` that checks if `player.position` equals `"defender"` following the same pattern as the previous step.
# --hints--
You should add a new `case` for `defender` inside your `switch` statement.
You should add a new `case` for `"defender"` inside your `switch` statement.
```js
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/)
```
In your `defender` `case`, you should call the `setPlayerCards` function.
In your `"defender"` `case`, you should call the `setPlayerCards` function.
```js
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/)
@@ -41,7 +41,7 @@ Your `filter()` callback should take a `player` parameter.
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
```
Your `filter()` callback should implicitly return the result of checking if `player.position` is `defender`.
Your `filter()` callback should implicitly return the result of checking if `player.position` is `"defender"`.
```js
assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)defender\2|('|"|`)defender\3\s*===?\s*player\.position)\s*\)/)
@@ -7,17 +7,17 @@ dashedName: step-46
# --description--
Add a new `case` for `goalkeeper` that checks if `player.position` equals `goalkeeper` following the same pattern as the previous step.
Add a new `case` for `"goalkeeper"` that checks if `player.position` equals `"goalkeeper"` following the same pattern as the previous step.
# --hints--
You should add a new `case` for `goalkeeper` inside your `switch` statement.
You should add a new `case` for `"goalkeeper"` inside your `switch` statement.
```js
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/)
```
In your `goalkeeper` `case`, you should call the `setPlayerCards` function.
In your `"goalkeeper"` `case`, you should call the `setPlayerCards` function.
```js
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/)
@@ -41,7 +41,7 @@ Your `filter()` callback should take a `player` parameter.
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(\(\s*player\s*\)|player)\s*=>/)
```
Your `filter()` callback should implicitly return the result of checking if `player.position` is `goalkeeper`.
Your `filter()` callback should implicitly return the result of checking if `player.position` is `"goalkeeper"`.
```js
assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*(?:\(\s*player\s*\)|player)\s*=>\s*(?:player\.position\s*===?\s*('|"|`)goalkeeper\2|('|"|`)goalkeeper\3\s*===?\s*player\.position)\s*\)/)