diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index e5dec4479a5..672988cd6ec 100644 --- a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery يحتوي كل عنصر HTML على عنصر `parent` الذي `inherits` خصائص. -على سبيل المثال يحتوي `jQuery Playground` على عنصر `h3` يكون الأبُ لعنصر `
`، الذي نفسه يملك الأبُ `body`. +For example, the `h3` element in your `jQuery Playground` has the parent element of `
`, which itself has the parent element of `body`. jQuery لديه وظيفة تسمى `parent()` التي تسمح لك بالوصول إلى الأبُ من أي عنصر واختارته. diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 5045db53bc2..56ddbdc4def 100644 --- a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -522,6 +522,7 @@ async(getUserInput) => { date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" + }).replaceAll(',', '') }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md new file mode 100644 index 00000000000..46b4f675589 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -0,0 +1,278 @@ +--- +id: 63c620161fc2b49ac340ffc4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +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`. + +Remember, you can use the `getElementById` method for this. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#team` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +You should use `const` to declare the variable called `teamName` and assign it the `#team` element. + +```js +assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md new file mode 100644 index 00000000000..513b3c3ed99 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md @@ -0,0 +1,287 @@ +--- +id: 63cf7e324c1831f8d936b3ae +title: Step 2 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#sport` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element. + +```js +assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#year` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element. + +```js +assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md new file mode 100644 index 00000000000..080e5e186a1 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md @@ -0,0 +1,289 @@ +--- +id: 63cf7f97e7f99af9348f5068 +title: Step 3 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#head-coach` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element. + +```js +assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#player-cards` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element. + +```js +assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md new file mode 100644 index 00000000000..6afeaf034bf --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md @@ -0,0 +1,279 @@ +--- +id: 63cf812bb8ecd4f9cf749b8f +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#players` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element. + +```js +assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md new file mode 100644 index 00000000000..e306a5ea676 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md @@ -0,0 +1,276 @@ +--- +id: 63cf83fdbb51d9fa54654ae6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now it is time to build out the data structure that will hold all of the information for your football team. + +Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object. + +# --hints-- + +You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object. + +```js +assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md new file mode 100644 index 00000000000..e0b502ce27e --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md @@ -0,0 +1,283 @@ +--- +id: 63cf8ec006a776ff5f6e3c68 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`. + + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `team` property. + +```js +assert.property(myFavoriteFootballTeam, 'team'); +``` + +Your `team` property should be set to `Argentina`. + +```js +assert.equal(myFavoriteFootballTeam.team, 'Argentina'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md new file mode 100644 index 00000000000..ed41bc54c71 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md @@ -0,0 +1,283 @@ +--- +id: 63cf90d4696d8f00851873a4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `sport` property. + +```js +assert.property(myFavoriteFootballTeam, 'sport'); +``` + +Your `team` property should be set to `Football`. + +```js +assert.equal(myFavoriteFootballTeam.sport, 'Football'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md new file mode 100644 index 00000000000..14594da8b08 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md @@ -0,0 +1,290 @@ +--- +id: 63cf91b0ff6e9300ead140cc +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `year` property. + +```js +assert.property(myFavoriteFootballTeam, 'year'); +``` + +Your `year` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.year); +``` + +Your `year` property should be set to `1986`. + +```js +assert.equal(myFavoriteFootballTeam.year, 1986); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md new file mode 100644 index 00000000000..1502bc6914d --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md @@ -0,0 +1,291 @@ +--- +id: 63cf920228531a0145abd0b3 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property. + +```js +assert.property(myFavoriteFootballTeam, 'isWorldCupWinner'); +``` + +Your `isWorldCupWinner` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner); +``` + +Your `isWorldCupWinner` property should be set to `true`. + +```js +assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md new file mode 100644 index 00000000000..33ba5e855e9 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md @@ -0,0 +1,316 @@ +--- +id: 63cf93472de77d01bf8474bf +title: Step 10 +challengeType: 0 +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. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `headCoach` property. + +```js +assert.property(myFavoriteFootballTeam, 'headCoach'); +``` + +Your `headCoach` value should be an object. + +```js +assert.isObject(myFavoriteFootballTeam.headCoach) +``` + +Your `headCoach` object should have a `coachName` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'coachName'); +``` + +Your `coachName` property should be set to `Carlos Bilardo`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo'); +``` + +Your `headCoach` object should have a `matches` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'matches'); +``` + +Your `matches` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.headCoach.matches); +``` + +Your `matches` property should be set to `7`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.matches, 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md new file mode 100644 index 00000000000..6dbedd38e9f --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md @@ -0,0 +1,296 @@ +--- +id: 63d120a05ee93f38353b84c0 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `players` property. + +```js +assert.property(myFavoriteFootballTeam, 'players'); +``` + +Your `players` value should be an array. + +```js +assert.isArray(myFavoriteFootballTeam.players) +``` + +Your `players` array should be empty. + +```js +assert.deepEqual(myFavoriteFootballTeam.players, []) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md new file mode 100644 index 00000000000..c5569d06c04 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md @@ -0,0 +1,369 @@ +--- +id: 63d1214a0ac7a9389793269b +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `players` array, create a new object with the following properties: + + +```md + +name: "Sergio Almirón" +position: "forward" +number: 1 +isCaptain: false +nickname: null + +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have the value of an object. + +```js +assert.isObject(myFavoriteFootballTeam.players[0]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'name'); +``` + +Your `name` property should be set to `Sergio Almirón`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'position'); +``` + +Your `position` property should be set to `forward`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[0]?.number); +``` + +Your `number` property should be set to `1`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.number, 1); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[0]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md new file mode 100644 index 00000000000..7bb2e78b95d --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md @@ -0,0 +1,380 @@ +--- +id: 63d128eaedcc773d2ded2128 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Below that object, create a new object with the following properties: + +```md +name: "Sergio Batista" +position: "midfielder" +number: 2 +isCaptain: false +nickname: null +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have two values. + +```js +// Have to assert at least, because we pre-populate data in the next step. +assert.isAtLeast(myFavoriteFootballTeam.players.length, 2); +``` + +Your `myFavoriteFootballTeam.players` array should have an object as the second value. + +```js +assert.isObject(myFavoriteFootballTeam.players[1]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'name'); +``` + +Your `name` property should be set to `Sergio Batista`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'position'); +``` + +Your `position` property should be set to `midfielder`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[1]?.number); +``` + +Your `number` property should be set to `2`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.number, 2); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[1]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md new file mode 100644 index 00000000000..e117f81605f --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md @@ -0,0 +1,446 @@ +--- +id: 63d12b9c7aaee43de1ba265d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you. + +The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it. + +Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + + +# --hints-- + +You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + +```js +assert.isFrozen(myFavoriteFootballTeam); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md new file mode 100644 index 00000000000..6e03cf91edf --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md @@ -0,0 +1,458 @@ +--- +id: 63d12fe2a595263e8f5084f7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties. + +Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`. + +When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value. + +# --hints-- + +You should assign the `USA` string to `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); + +``` + +You should add a `console.log` for `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md new file mode 100644 index 00000000000..c9a4a2ad0f4 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md @@ -0,0 +1,470 @@ +--- +id: 63e02a333354343b595d64ca +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson. + +The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`. + +Remember you can use dot notation for this. + +# --hints-- + +You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); +``` + +You should remove your `console.log` for `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); +``` + +You should use `const` to declare a `sport` variable. + +```js +assert.match(code, /const\s+sport\s*=/); +``` + +You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable. + +```js +assert.equal(sport, myFavoriteFootballTeam.sport); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +myFavoriteFootballTeam.team = "USA"; +console.log(myFavoriteFootballTeam.team); + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md new file mode 100644 index 00000000000..f95ca095c29 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md @@ -0,0 +1,454 @@ +--- +id: 63e0334b7a24bd3c96aca4de +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`. + +# --hints-- + +You should use `const` to declare a `team` variable. + +```js +assert.match(code, /const\s+team\s*=/); +``` + +You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable. + +```js +assert.equal(team, myFavoriteFootballTeam.team); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md new file mode 100644 index 00000000000..ce0835fa4d9 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md @@ -0,0 +1,464 @@ +--- +id: 63e036373fc9173d284e165a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal. + +The object destructuring syntax allows you to unpack values from arrays and objects: + +```js +const developerObj = { + name: "Jessica Wilkins", + isDeveloper: true +}; + +// Object destructuring +const { name, isDeveloper } = developerObj; +``` + +Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code. + +# --hints-- + +Use object destructuring to access the `sport` and `team` values. + +```js + +assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; +const team = myFavoriteFootballTeam.team; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md new file mode 100644 index 00000000000..de3439a814b --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md @@ -0,0 +1,449 @@ +--- +id: 63e03b86008bbb3e1c3de846 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Next, add the `year` and `players` to your destructuring assignment. + +# --hints-- + +You should add the `year` and `players` values to your destructuring assignment. + +```js +assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const { sport, team } = myFavoriteFootballTeam; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md new file mode 100644 index 00000000000..95eda5017a7 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md @@ -0,0 +1,448 @@ +--- +id: 63e042661ad2663f0d468740 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax. + +# --hints-- + +Use object destructuring to access the `coachName` value. + +```js + +assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md new file mode 100644 index 00000000000..8179fd09158 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md @@ -0,0 +1,453 @@ +--- +id: 63e050bf935ac341b88326d6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now you need to start displaying the team's information on the screen. + +Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element. + +Once you complete that task, you should see the result in the preview window. + +# --hints-- + +You should assign the `sport` variable to `typeOfSport.innerHTML`. + +```js + +assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md new file mode 100644 index 00000000000..587342d8d66 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md @@ -0,0 +1,451 @@ +--- +id: 63e05557016dfd45ea49152c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`. + +# --hints-- + +You should assign the `team` variable to `teamName.innerHTML`. + +```js + +assert.match(code, /teamName.innerHTML\s*=\s*team\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md new file mode 100644 index 00000000000..fd77bba607c --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md @@ -0,0 +1,462 @@ +--- +id: 63e05c00b615bb46ac87273a +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`. + +You should now see all of that information displayed on the screen below `Team stats`. + +# --hints-- + +You should assign the `year` variable to `worldCupYear.innerHTML`. + +```js + +assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/) + +``` + +You should assign the `coachName` variable to `headCoach.innerHTML`. + +```js + +assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md new file mode 100644 index 00000000000..64e5e01482a --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md @@ -0,0 +1,479 @@ +--- +id: 63e060df21bca347b2d2b374 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu. + +Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step. + + +# --hints-- + +You should use `const` to declare a `setPlayerCards` variable. + +```js +assert.match(code, /const\s+setPlayerCards\s*=/); +``` + +Your `setPlayerCards` variable should be a function. + +```js +assert.isFunction(setPlayerCards); +``` + +Your `setPlayerCards` function should use arrow syntax. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/); +``` + +Your `setPlayerCards` function should not take a parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/); +``` + +Your `setPlayerCards` function should be empty. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md new file mode 100644 index 00000000000..e2fd95b4278 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md @@ -0,0 +1,470 @@ +--- +id: 63e062d6090ebb486a4eda3a +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used: + +```js +const greeting = (name = "Anonymous") => { + return "Hello " + name; +} + +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + +Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. + +# --hints-- + +Your `setPlayerCards` function should take an `arr` parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/); +``` + +Your `arr` parameter should have a default value of `players`. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + +const setPlayerCards = () => {}; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md new file mode 100644 index 00000000000..c5f10540ae0 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md @@ -0,0 +1,478 @@ +--- +id: 63e949b8327aa2aca2ca8eac +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The next step is to create a new array that will be responsible for adding the player card information to the page. + +Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`. + +Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element. + +# --hints-- + +You should call the `.map()` method on your `arr` parameter. + +```js +assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/); +``` + +Your `.map()` method should take an empty callback function. + +```js +assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); +``` + +You should use the `+=` operator on `playerCards.innerHTML`. + +```js +assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/); +``` + +You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator. + +```js +assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md new file mode 100644 index 00000000000..10556005822 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md @@ -0,0 +1,472 @@ +--- +id: 63e94dae6dcedbad73f2f6ee +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables. + +Here is an example: + +```js +function myExampleFunction({ name, age, job, city }) { + +} +``` + +Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring. + +# --hints-- + +You should unpack all 5 object properties from objects in `arr` using object destructuring. + +```js + +assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/) + + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map(() => { + + }) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md new file mode 100644 index 00000000000..564fb6bb8e0 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md @@ -0,0 +1,467 @@ +--- +id: 63e954321b0a77ae4f6d9650 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +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`. + +# --hints-- + +You should use template literals to add an empty `div` with a class of `player-card`. + + +```js + +assert.match(code, /`\s*\s*<\/div>\s*`\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md new file mode 100644 index 00000000000..b9c104fb55a --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md @@ -0,0 +1,475 @@ +--- +id: 63e95a45dce95baf41dd4f78 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter: + +```js +${expression goes here} +``` + +# --hints-- + +You should add an `h2` element with the `name` parameter. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/) +``` + +Your `h2` should be nested in your `div`. + +```js +assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+ +
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md new file mode 100644 index 00000000000..53646c4fff0 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md @@ -0,0 +1,467 @@ +--- +id: 63e95e39860dc5b01ebe9be0 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team. + +Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string. + +# --hints-- + +You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name}

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md new file mode 100644 index 00000000000..f41577b8e76 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md @@ -0,0 +1,472 @@ +--- +id: 63e9667c881b61b1e338d276 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Position:` followed by the `position` variable. + +```js +assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+ +
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md new file mode 100644 index 00000000000..edceac6fe11 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md @@ -0,0 +1,472 @@ +--- +id: 63e96938d2a347b2734a1587 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Number:` followed by the `number` variable. + +```js +assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after your existing `p` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md new file mode 100644 index 00000000000..4bb4a4f5aa6 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md @@ -0,0 +1,473 @@ +--- +id: 63e96eb94c97b6b31ee50f63 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Below your existing paragraph elements, add another paragraph element with the text `Nickname:`. + +# --hints-- + +You should add a new paragraph element with the text `Nickname:`. + +```js +assert.match(code, /\s*\s*Nickname:\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md new file mode 100644 index 00000000000..46379d93380 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md @@ -0,0 +1,482 @@ +--- +id: 63e9718d7d490bb3940d5a0a +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next to the `Nickname:` text, add an embedded expression that will show the player's nickname if they have one. + +Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`. + +# --hints-- + +You should use a ternary operator to check if `nickname` is not `null`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/) +``` + +If your ternary is truthy, it should display the player's `nickname`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/) +``` + +If your ternary is falsy, it should display the string `N/A`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname:

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md new file mode 100644 index 00000000000..b4b4d23626a --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md @@ -0,0 +1,477 @@ +--- +id: 63e9737f686c76b4078a60f4 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `.map()` method will return a new array of `player-card` items separated by commas. + +To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method. + + +# --hints-- + +You should chain the `.join()` method to the `.map()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s); +``` + +You should pass an empty string to the `.join()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ `; + } + ) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md new file mode 100644 index 00000000000..e5c273332f2 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md @@ -0,0 +1,485 @@ +--- +id: 63f28972973504e7bb58b0b3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +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. + +# --hints-- + +You should call the `.addEventListener()` method on the `playersDropdownList` variable. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(/); +``` + +Your event listener should listen for the `change` event. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/); +``` + +Your event listener should have an empty callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md new file mode 100644 index 00000000000..8aeee3d3efa --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md @@ -0,0 +1,475 @@ +--- +id: 63f28ef082d771e8bf71f94a +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +For the callback function, pass in `e` as a parameter. + +`e` represents an object which contains the information for that event. + +# --hints-- + +You should pass in `e` as a parameter to your callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +--fcc-editable-region-- + +playersDropdownList.addEventListener("change", () => { + +}); + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md new file mode 100644 index 00000000000..f8bad487511 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -0,0 +1,477 @@ +--- +id: 63f293c804d6f9e9a83ca4c5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Inside the callback function, add a `console.log` with the value of `e.target.value`. + +Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. + +`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. + +# --hints-- + +You should add a `console.log` with the value of `e.target.value`. + +```js +assert.match(code, /console.log\s*\(e.target.value\)\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md new file mode 100644 index 00000000000..a15fd647b37 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md @@ -0,0 +1,489 @@ +--- +id: 63f29804e3ec00ea6fab1ec4 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Remove the `console.log` statement you created in the previous step. + +The next step would be to reset the content for the `playerCards` element. + +Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string. + +# --hints-- + +You should not have the `console.log` statement in your code. + +```js +assert.notMatch(code, /\s*console.log\(e.target.value\)/); +``` + +You should access the `innerHTML` property of the `playerCards` element. + +```js +assert.match(code, /playerCards\.innerHTML\s*=/); +``` + +You should set the `innerHTML` property to an empty string. + +```js +assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + +console.log(e.target.value) + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md new file mode 100644 index 00000000000..1657ba65473 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md @@ -0,0 +1,508 @@ +--- +id: 63f29ce62aea65eb041758c8 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions. + +A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause. + +This is the basic syntax for a `switch` statement: + +```js +switch (expression) { + case 1: + /* + this code will execute + if the case matches the expression + */ + break; + default: + /* + the default will execute if none + of the other cases match the expression + */ +} +``` + +Add a `switch` statement and use `e.target.value` for the expression. + +# --hints-- + +You should use a `switch` statement. + +```js +assert.match(code, /switch/); +``` + +Your `switch` statement should use `e.target.value` for the expression. + +```js +assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/); +``` + +Your `switch` statement should be empty. + +```js +assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md new file mode 100644 index 00000000000..9188483c345 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md @@ -0,0 +1,478 @@ +--- +id: 63f2a0a860790eebe61bf908 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +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. + +# --hints-- + +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*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md new file mode 100644 index 00000000000..cabfe408ca5 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md @@ -0,0 +1,521 @@ +--- +id: 63f2a4a8087e6dec8ec47f16 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +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`. + +Lastly, add a `break` statement below the `setPlayerCards` function call. + +# --hints-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md new file mode 100644 index 00000000000..fbf9f1cb1b8 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md @@ -0,0 +1,517 @@ +--- +id: 63f2a5f09a785aed155c0a56 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/) +``` + +In your `midfielder` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md new file mode 100644 index 00000000000..8666f5ab42e --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md @@ -0,0 +1,521 @@ +--- +id: 63f2a8e14fb388edd3242527 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/) +``` + +In your `defender` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards(players.filter((player) => player.position === "midfielder")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md new file mode 100644 index 00000000000..c41768c86d6 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md @@ -0,0 +1,527 @@ +--- +id: 63f2aa36fcdc63ee4e18fc37 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/) +``` + +In your `goalkeeper` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md new file mode 100644 index 00000000000..6c919ef5e37 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md @@ -0,0 +1,790 @@ +--- +id: 63f2ab4f6c52c5eec6d68de4 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The final step is to add a `default` clause if none of the other `case` clauses match the user selection. + +For the `default` clause, call the `setPlayerCards` function without any arguments passed in. + +Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname. + +Congratulations on completing the football team cards project! + +# --hints-- + +You should add a `default` clause to your `switch` statement. + +```js +assert.match(code, /default\s*:\s*/) +``` + +In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in. + +```js +assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + case "goalkeeper": + setPlayerCards( + players.filter((player) => player.position === "goalkeeper") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` + +# --solutions-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [ + { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, }, + { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, }, + { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", }, + { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", }, + { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", }, + { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", }, + { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", }, + { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, }, + { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", }, + { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", }, + { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", }, + { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, }, + { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, }, + { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, }, + { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", }, + { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, }, + { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, }, + { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, }, + { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", }, + { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, }, + { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", }, + { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], }; + +Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
` ) .join(""); }; + +playersDropdownList.addEventListener("change", (e) => { playerCards.innerHTML = ""; + + switch (e.target.value) { case "nickname": setPlayerCards(players.filter((player) => player.nickname !== null)); break; case "forward": setPlayerCards(players.filter((player) => player.position === "forward")); break; case "midfielder": setPlayerCards( players.filter((player) => player.position === "midfielder") ); break; case "defender": setPlayerCards( players.filter((player) => player.position === "defender") ); break; case "goalkeeper": setPlayerCards( players.filter((player) => player.position === "goalkeeper") ); break; default: setPlayerCards(); } }); diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md new file mode 100644 index 00000000000..03ddbef793f --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md @@ -0,0 +1,504 @@ +--- +id: 641fc88d8fa7127f76e0324f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + + +Call the `setPlayerCards` function with an argument of `players.filter()`. + +Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`. + +# --hints-- + +In your `nickname` case, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md new file mode 100644 index 00000000000..e084de31fa4 --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md @@ -0,0 +1,488 @@ +--- +id: 641fcfd468185384ac218b7d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Before you can move onto the next case, you will need to add a `break` statement: + +```js + case "example": + // code goes here + break; +``` + +The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement. + +Below your `setPlayerCards` call, add a `break` statement. + +# --hints-- + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index cd5f2547add..bbb81c6106c 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery 每個 HTML 標籤都默認 `inherits`(繼承)其 `parent`(父標籤)的 CSS 屬性。 -例如,`h3` 標籤 `jQuery Playground` 的父標籤是 `
`,而這個標籤的父標籤是 `body`。 +For example, the `h3` element in your `jQuery Playground` has the parent element of `
`, which itself has the parent element of `body`. jQuery 有一個 `parent()` 方法,可以訪問被選取標籤的父標籤。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index cbee1e4ae5f..498c046dfe4 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -522,6 +522,7 @@ async(getUserInput) => { date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" + }).replaceAll(',', '') }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md new file mode 100644 index 00000000000..46b4f675589 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -0,0 +1,278 @@ +--- +id: 63c620161fc2b49ac340ffc4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +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`. + +Remember, you can use the `getElementById` method for this. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#team` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +You should use `const` to declare the variable called `teamName` and assign it the `#team` element. + +```js +assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md new file mode 100644 index 00000000000..513b3c3ed99 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md @@ -0,0 +1,287 @@ +--- +id: 63cf7e324c1831f8d936b3ae +title: Step 2 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#sport` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element. + +```js +assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#year` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element. + +```js +assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md new file mode 100644 index 00000000000..080e5e186a1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md @@ -0,0 +1,289 @@ +--- +id: 63cf7f97e7f99af9348f5068 +title: Step 3 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#head-coach` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element. + +```js +assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#player-cards` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element. + +```js +assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md new file mode 100644 index 00000000000..6afeaf034bf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md @@ -0,0 +1,279 @@ +--- +id: 63cf812bb8ecd4f9cf749b8f +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#players` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element. + +```js +assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md new file mode 100644 index 00000000000..e306a5ea676 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md @@ -0,0 +1,276 @@ +--- +id: 63cf83fdbb51d9fa54654ae6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now it is time to build out the data structure that will hold all of the information for your football team. + +Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object. + +# --hints-- + +You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object. + +```js +assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md new file mode 100644 index 00000000000..e0b502ce27e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md @@ -0,0 +1,283 @@ +--- +id: 63cf8ec006a776ff5f6e3c68 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`. + + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `team` property. + +```js +assert.property(myFavoriteFootballTeam, 'team'); +``` + +Your `team` property should be set to `Argentina`. + +```js +assert.equal(myFavoriteFootballTeam.team, 'Argentina'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md new file mode 100644 index 00000000000..ed41bc54c71 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md @@ -0,0 +1,283 @@ +--- +id: 63cf90d4696d8f00851873a4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `sport` property. + +```js +assert.property(myFavoriteFootballTeam, 'sport'); +``` + +Your `team` property should be set to `Football`. + +```js +assert.equal(myFavoriteFootballTeam.sport, 'Football'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md new file mode 100644 index 00000000000..14594da8b08 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md @@ -0,0 +1,290 @@ +--- +id: 63cf91b0ff6e9300ead140cc +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `year` property. + +```js +assert.property(myFavoriteFootballTeam, 'year'); +``` + +Your `year` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.year); +``` + +Your `year` property should be set to `1986`. + +```js +assert.equal(myFavoriteFootballTeam.year, 1986); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md new file mode 100644 index 00000000000..1502bc6914d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md @@ -0,0 +1,291 @@ +--- +id: 63cf920228531a0145abd0b3 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property. + +```js +assert.property(myFavoriteFootballTeam, 'isWorldCupWinner'); +``` + +Your `isWorldCupWinner` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner); +``` + +Your `isWorldCupWinner` property should be set to `true`. + +```js +assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md new file mode 100644 index 00000000000..33ba5e855e9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md @@ -0,0 +1,316 @@ +--- +id: 63cf93472de77d01bf8474bf +title: Step 10 +challengeType: 0 +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. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `headCoach` property. + +```js +assert.property(myFavoriteFootballTeam, 'headCoach'); +``` + +Your `headCoach` value should be an object. + +```js +assert.isObject(myFavoriteFootballTeam.headCoach) +``` + +Your `headCoach` object should have a `coachName` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'coachName'); +``` + +Your `coachName` property should be set to `Carlos Bilardo`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo'); +``` + +Your `headCoach` object should have a `matches` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'matches'); +``` + +Your `matches` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.headCoach.matches); +``` + +Your `matches` property should be set to `7`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.matches, 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md new file mode 100644 index 00000000000..6dbedd38e9f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md @@ -0,0 +1,296 @@ +--- +id: 63d120a05ee93f38353b84c0 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `players` property. + +```js +assert.property(myFavoriteFootballTeam, 'players'); +``` + +Your `players` value should be an array. + +```js +assert.isArray(myFavoriteFootballTeam.players) +``` + +Your `players` array should be empty. + +```js +assert.deepEqual(myFavoriteFootballTeam.players, []) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md new file mode 100644 index 00000000000..c5569d06c04 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md @@ -0,0 +1,369 @@ +--- +id: 63d1214a0ac7a9389793269b +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `players` array, create a new object with the following properties: + + +```md + +name: "Sergio Almirón" +position: "forward" +number: 1 +isCaptain: false +nickname: null + +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have the value of an object. + +```js +assert.isObject(myFavoriteFootballTeam.players[0]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'name'); +``` + +Your `name` property should be set to `Sergio Almirón`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'position'); +``` + +Your `position` property should be set to `forward`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[0]?.number); +``` + +Your `number` property should be set to `1`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.number, 1); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[0]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md new file mode 100644 index 00000000000..7bb2e78b95d --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md @@ -0,0 +1,380 @@ +--- +id: 63d128eaedcc773d2ded2128 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Below that object, create a new object with the following properties: + +```md +name: "Sergio Batista" +position: "midfielder" +number: 2 +isCaptain: false +nickname: null +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have two values. + +```js +// Have to assert at least, because we pre-populate data in the next step. +assert.isAtLeast(myFavoriteFootballTeam.players.length, 2); +``` + +Your `myFavoriteFootballTeam.players` array should have an object as the second value. + +```js +assert.isObject(myFavoriteFootballTeam.players[1]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'name'); +``` + +Your `name` property should be set to `Sergio Batista`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'position'); +``` + +Your `position` property should be set to `midfielder`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[1]?.number); +``` + +Your `number` property should be set to `2`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.number, 2); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[1]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md new file mode 100644 index 00000000000..e117f81605f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md @@ -0,0 +1,446 @@ +--- +id: 63d12b9c7aaee43de1ba265d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you. + +The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it. + +Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + + +# --hints-- + +You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + +```js +assert.isFrozen(myFavoriteFootballTeam); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md new file mode 100644 index 00000000000..6e03cf91edf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md @@ -0,0 +1,458 @@ +--- +id: 63d12fe2a595263e8f5084f7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties. + +Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`. + +When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value. + +# --hints-- + +You should assign the `USA` string to `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); + +``` + +You should add a `console.log` for `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md new file mode 100644 index 00000000000..c9a4a2ad0f4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md @@ -0,0 +1,470 @@ +--- +id: 63e02a333354343b595d64ca +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson. + +The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`. + +Remember you can use dot notation for this. + +# --hints-- + +You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); +``` + +You should remove your `console.log` for `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); +``` + +You should use `const` to declare a `sport` variable. + +```js +assert.match(code, /const\s+sport\s*=/); +``` + +You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable. + +```js +assert.equal(sport, myFavoriteFootballTeam.sport); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +myFavoriteFootballTeam.team = "USA"; +console.log(myFavoriteFootballTeam.team); + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md new file mode 100644 index 00000000000..f95ca095c29 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md @@ -0,0 +1,454 @@ +--- +id: 63e0334b7a24bd3c96aca4de +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`. + +# --hints-- + +You should use `const` to declare a `team` variable. + +```js +assert.match(code, /const\s+team\s*=/); +``` + +You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable. + +```js +assert.equal(team, myFavoriteFootballTeam.team); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md new file mode 100644 index 00000000000..ce0835fa4d9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md @@ -0,0 +1,464 @@ +--- +id: 63e036373fc9173d284e165a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal. + +The object destructuring syntax allows you to unpack values from arrays and objects: + +```js +const developerObj = { + name: "Jessica Wilkins", + isDeveloper: true +}; + +// Object destructuring +const { name, isDeveloper } = developerObj; +``` + +Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code. + +# --hints-- + +Use object destructuring to access the `sport` and `team` values. + +```js + +assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; +const team = myFavoriteFootballTeam.team; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md new file mode 100644 index 00000000000..de3439a814b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md @@ -0,0 +1,449 @@ +--- +id: 63e03b86008bbb3e1c3de846 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Next, add the `year` and `players` to your destructuring assignment. + +# --hints-- + +You should add the `year` and `players` values to your destructuring assignment. + +```js +assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const { sport, team } = myFavoriteFootballTeam; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md new file mode 100644 index 00000000000..95eda5017a7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md @@ -0,0 +1,448 @@ +--- +id: 63e042661ad2663f0d468740 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax. + +# --hints-- + +Use object destructuring to access the `coachName` value. + +```js + +assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md new file mode 100644 index 00000000000..8179fd09158 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md @@ -0,0 +1,453 @@ +--- +id: 63e050bf935ac341b88326d6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now you need to start displaying the team's information on the screen. + +Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element. + +Once you complete that task, you should see the result in the preview window. + +# --hints-- + +You should assign the `sport` variable to `typeOfSport.innerHTML`. + +```js + +assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md new file mode 100644 index 00000000000..587342d8d66 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md @@ -0,0 +1,451 @@ +--- +id: 63e05557016dfd45ea49152c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`. + +# --hints-- + +You should assign the `team` variable to `teamName.innerHTML`. + +```js + +assert.match(code, /teamName.innerHTML\s*=\s*team\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md new file mode 100644 index 00000000000..fd77bba607c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md @@ -0,0 +1,462 @@ +--- +id: 63e05c00b615bb46ac87273a +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`. + +You should now see all of that information displayed on the screen below `Team stats`. + +# --hints-- + +You should assign the `year` variable to `worldCupYear.innerHTML`. + +```js + +assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/) + +``` + +You should assign the `coachName` variable to `headCoach.innerHTML`. + +```js + +assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md new file mode 100644 index 00000000000..64e5e01482a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md @@ -0,0 +1,479 @@ +--- +id: 63e060df21bca347b2d2b374 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu. + +Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step. + + +# --hints-- + +You should use `const` to declare a `setPlayerCards` variable. + +```js +assert.match(code, /const\s+setPlayerCards\s*=/); +``` + +Your `setPlayerCards` variable should be a function. + +```js +assert.isFunction(setPlayerCards); +``` + +Your `setPlayerCards` function should use arrow syntax. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/); +``` + +Your `setPlayerCards` function should not take a parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/); +``` + +Your `setPlayerCards` function should be empty. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md new file mode 100644 index 00000000000..e2fd95b4278 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md @@ -0,0 +1,470 @@ +--- +id: 63e062d6090ebb486a4eda3a +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used: + +```js +const greeting = (name = "Anonymous") => { + return "Hello " + name; +} + +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + +Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. + +# --hints-- + +Your `setPlayerCards` function should take an `arr` parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/); +``` + +Your `arr` parameter should have a default value of `players`. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + +const setPlayerCards = () => {}; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md new file mode 100644 index 00000000000..c5f10540ae0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md @@ -0,0 +1,478 @@ +--- +id: 63e949b8327aa2aca2ca8eac +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The next step is to create a new array that will be responsible for adding the player card information to the page. + +Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`. + +Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element. + +# --hints-- + +You should call the `.map()` method on your `arr` parameter. + +```js +assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/); +``` + +Your `.map()` method should take an empty callback function. + +```js +assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); +``` + +You should use the `+=` operator on `playerCards.innerHTML`. + +```js +assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/); +``` + +You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator. + +```js +assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md new file mode 100644 index 00000000000..10556005822 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md @@ -0,0 +1,472 @@ +--- +id: 63e94dae6dcedbad73f2f6ee +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables. + +Here is an example: + +```js +function myExampleFunction({ name, age, job, city }) { + +} +``` + +Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring. + +# --hints-- + +You should unpack all 5 object properties from objects in `arr` using object destructuring. + +```js + +assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/) + + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map(() => { + + }) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md new file mode 100644 index 00000000000..564fb6bb8e0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md @@ -0,0 +1,467 @@ +--- +id: 63e954321b0a77ae4f6d9650 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +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`. + +# --hints-- + +You should use template literals to add an empty `div` with a class of `player-card`. + + +```js + +assert.match(code, /`\s*\s*<\/div>\s*`\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md new file mode 100644 index 00000000000..b9c104fb55a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md @@ -0,0 +1,475 @@ +--- +id: 63e95a45dce95baf41dd4f78 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter: + +```js +${expression goes here} +``` + +# --hints-- + +You should add an `h2` element with the `name` parameter. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/) +``` + +Your `h2` should be nested in your `div`. + +```js +assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+ +
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md new file mode 100644 index 00000000000..53646c4fff0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md @@ -0,0 +1,467 @@ +--- +id: 63e95e39860dc5b01ebe9be0 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team. + +Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string. + +# --hints-- + +You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name}

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md new file mode 100644 index 00000000000..f41577b8e76 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md @@ -0,0 +1,472 @@ +--- +id: 63e9667c881b61b1e338d276 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Position:` followed by the `position` variable. + +```js +assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+ +
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md new file mode 100644 index 00000000000..edceac6fe11 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md @@ -0,0 +1,472 @@ +--- +id: 63e96938d2a347b2734a1587 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Number:` followed by the `number` variable. + +```js +assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after your existing `p` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md new file mode 100644 index 00000000000..4bb4a4f5aa6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md @@ -0,0 +1,473 @@ +--- +id: 63e96eb94c97b6b31ee50f63 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Below your existing paragraph elements, add another paragraph element with the text `Nickname:`. + +# --hints-- + +You should add a new paragraph element with the text `Nickname:`. + +```js +assert.match(code, /\s*\s*Nickname:\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md new file mode 100644 index 00000000000..46379d93380 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md @@ -0,0 +1,482 @@ +--- +id: 63e9718d7d490bb3940d5a0a +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next to the `Nickname:` text, add an embedded expression that will show the player's nickname if they have one. + +Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`. + +# --hints-- + +You should use a ternary operator to check if `nickname` is not `null`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/) +``` + +If your ternary is truthy, it should display the player's `nickname`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/) +``` + +If your ternary is falsy, it should display the string `N/A`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname:

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md new file mode 100644 index 00000000000..b4b4d23626a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md @@ -0,0 +1,477 @@ +--- +id: 63e9737f686c76b4078a60f4 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `.map()` method will return a new array of `player-card` items separated by commas. + +To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method. + + +# --hints-- + +You should chain the `.join()` method to the `.map()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s); +``` + +You should pass an empty string to the `.join()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ `; + } + ) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md new file mode 100644 index 00000000000..e5c273332f2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md @@ -0,0 +1,485 @@ +--- +id: 63f28972973504e7bb58b0b3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +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. + +# --hints-- + +You should call the `.addEventListener()` method on the `playersDropdownList` variable. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(/); +``` + +Your event listener should listen for the `change` event. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/); +``` + +Your event listener should have an empty callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md new file mode 100644 index 00000000000..8aeee3d3efa --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md @@ -0,0 +1,475 @@ +--- +id: 63f28ef082d771e8bf71f94a +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +For the callback function, pass in `e` as a parameter. + +`e` represents an object which contains the information for that event. + +# --hints-- + +You should pass in `e` as a parameter to your callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +--fcc-editable-region-- + +playersDropdownList.addEventListener("change", () => { + +}); + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md new file mode 100644 index 00000000000..f8bad487511 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -0,0 +1,477 @@ +--- +id: 63f293c804d6f9e9a83ca4c5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Inside the callback function, add a `console.log` with the value of `e.target.value`. + +Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. + +`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. + +# --hints-- + +You should add a `console.log` with the value of `e.target.value`. + +```js +assert.match(code, /console.log\s*\(e.target.value\)\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md new file mode 100644 index 00000000000..a15fd647b37 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md @@ -0,0 +1,489 @@ +--- +id: 63f29804e3ec00ea6fab1ec4 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Remove the `console.log` statement you created in the previous step. + +The next step would be to reset the content for the `playerCards` element. + +Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string. + +# --hints-- + +You should not have the `console.log` statement in your code. + +```js +assert.notMatch(code, /\s*console.log\(e.target.value\)/); +``` + +You should access the `innerHTML` property of the `playerCards` element. + +```js +assert.match(code, /playerCards\.innerHTML\s*=/); +``` + +You should set the `innerHTML` property to an empty string. + +```js +assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + +console.log(e.target.value) + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md new file mode 100644 index 00000000000..1657ba65473 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md @@ -0,0 +1,508 @@ +--- +id: 63f29ce62aea65eb041758c8 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions. + +A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause. + +This is the basic syntax for a `switch` statement: + +```js +switch (expression) { + case 1: + /* + this code will execute + if the case matches the expression + */ + break; + default: + /* + the default will execute if none + of the other cases match the expression + */ +} +``` + +Add a `switch` statement and use `e.target.value` for the expression. + +# --hints-- + +You should use a `switch` statement. + +```js +assert.match(code, /switch/); +``` + +Your `switch` statement should use `e.target.value` for the expression. + +```js +assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/); +``` + +Your `switch` statement should be empty. + +```js +assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md new file mode 100644 index 00000000000..9188483c345 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md @@ -0,0 +1,478 @@ +--- +id: 63f2a0a860790eebe61bf908 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +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. + +# --hints-- + +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*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md new file mode 100644 index 00000000000..cabfe408ca5 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md @@ -0,0 +1,521 @@ +--- +id: 63f2a4a8087e6dec8ec47f16 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +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`. + +Lastly, add a `break` statement below the `setPlayerCards` function call. + +# --hints-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md new file mode 100644 index 00000000000..fbf9f1cb1b8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md @@ -0,0 +1,517 @@ +--- +id: 63f2a5f09a785aed155c0a56 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/) +``` + +In your `midfielder` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md new file mode 100644 index 00000000000..8666f5ab42e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md @@ -0,0 +1,521 @@ +--- +id: 63f2a8e14fb388edd3242527 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/) +``` + +In your `defender` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards(players.filter((player) => player.position === "midfielder")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md new file mode 100644 index 00000000000..c41768c86d6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md @@ -0,0 +1,527 @@ +--- +id: 63f2aa36fcdc63ee4e18fc37 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/) +``` + +In your `goalkeeper` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md new file mode 100644 index 00000000000..6c919ef5e37 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md @@ -0,0 +1,790 @@ +--- +id: 63f2ab4f6c52c5eec6d68de4 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The final step is to add a `default` clause if none of the other `case` clauses match the user selection. + +For the `default` clause, call the `setPlayerCards` function without any arguments passed in. + +Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname. + +Congratulations on completing the football team cards project! + +# --hints-- + +You should add a `default` clause to your `switch` statement. + +```js +assert.match(code, /default\s*:\s*/) +``` + +In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in. + +```js +assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + case "goalkeeper": + setPlayerCards( + players.filter((player) => player.position === "goalkeeper") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` + +# --solutions-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [ + { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, }, + { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, }, + { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", }, + { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", }, + { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", }, + { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", }, + { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", }, + { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, }, + { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", }, + { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", }, + { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", }, + { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, }, + { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, }, + { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, }, + { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", }, + { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, }, + { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, }, + { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, }, + { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", }, + { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, }, + { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", }, + { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], }; + +Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
` ) .join(""); }; + +playersDropdownList.addEventListener("change", (e) => { playerCards.innerHTML = ""; + + switch (e.target.value) { case "nickname": setPlayerCards(players.filter((player) => player.nickname !== null)); break; case "forward": setPlayerCards(players.filter((player) => player.position === "forward")); break; case "midfielder": setPlayerCards( players.filter((player) => player.position === "midfielder") ); break; case "defender": setPlayerCards( players.filter((player) => player.position === "defender") ); break; case "goalkeeper": setPlayerCards( players.filter((player) => player.position === "goalkeeper") ); break; default: setPlayerCards(); } }); diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md new file mode 100644 index 00000000000..03ddbef793f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md @@ -0,0 +1,504 @@ +--- +id: 641fc88d8fa7127f76e0324f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + + +Call the `setPlayerCards` function with an argument of `players.filter()`. + +Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`. + +# --hints-- + +In your `nickname` case, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md new file mode 100644 index 00000000000..e084de31fa4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md @@ -0,0 +1,488 @@ +--- +id: 641fcfd468185384ac218b7d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Before you can move onto the next case, you will need to add a `break` statement: + +```js + case "example": + // code goes here + break; +``` + +The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement. + +Below your `setPlayerCards` call, add a `break` statement. + +# --hints-- + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index c71dbc149b4..5d35c2154f6 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery 每个 HTML 标签都默认 `inherits`(继承)其 `parent`(父标签)的 CSS 属性。 -例如,`h3` 标签 `jQuery Playground` 的父标签是 `
`,而这个标签的父标签是 `body`。 +For example, the `h3` element in your `jQuery Playground` has the parent element of `
`, which itself has the parent element of `body`. jQuery 有一个 `parent()` 方法,可以访问被选取标签的父标签。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index c0fa0b71ab0..84b8ccca6b6 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -522,6 +522,7 @@ async(getUserInput) => { date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" + }).replaceAll(',', '') }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md new file mode 100644 index 00000000000..46b4f675589 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -0,0 +1,278 @@ +--- +id: 63c620161fc2b49ac340ffc4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +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`. + +Remember, you can use the `getElementById` method for this. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#team` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +You should use `const` to declare the variable called `teamName` and assign it the `#team` element. + +```js +assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md new file mode 100644 index 00000000000..513b3c3ed99 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md @@ -0,0 +1,287 @@ +--- +id: 63cf7e324c1831f8d936b3ae +title: Step 2 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#sport` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element. + +```js +assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#year` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element. + +```js +assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md new file mode 100644 index 00000000000..080e5e186a1 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md @@ -0,0 +1,289 @@ +--- +id: 63cf7f97e7f99af9348f5068 +title: Step 3 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#head-coach` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element. + +```js +assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#player-cards` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element. + +```js +assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md new file mode 100644 index 00000000000..6afeaf034bf --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md @@ -0,0 +1,279 @@ +--- +id: 63cf812bb8ecd4f9cf749b8f +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#players` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element. + +```js +assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md new file mode 100644 index 00000000000..e306a5ea676 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md @@ -0,0 +1,276 @@ +--- +id: 63cf83fdbb51d9fa54654ae6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now it is time to build out the data structure that will hold all of the information for your football team. + +Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object. + +# --hints-- + +You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object. + +```js +assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md new file mode 100644 index 00000000000..e0b502ce27e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md @@ -0,0 +1,283 @@ +--- +id: 63cf8ec006a776ff5f6e3c68 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`. + + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `team` property. + +```js +assert.property(myFavoriteFootballTeam, 'team'); +``` + +Your `team` property should be set to `Argentina`. + +```js +assert.equal(myFavoriteFootballTeam.team, 'Argentina'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md new file mode 100644 index 00000000000..ed41bc54c71 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md @@ -0,0 +1,283 @@ +--- +id: 63cf90d4696d8f00851873a4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `sport` property. + +```js +assert.property(myFavoriteFootballTeam, 'sport'); +``` + +Your `team` property should be set to `Football`. + +```js +assert.equal(myFavoriteFootballTeam.sport, 'Football'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md new file mode 100644 index 00000000000..14594da8b08 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md @@ -0,0 +1,290 @@ +--- +id: 63cf91b0ff6e9300ead140cc +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `year` property. + +```js +assert.property(myFavoriteFootballTeam, 'year'); +``` + +Your `year` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.year); +``` + +Your `year` property should be set to `1986`. + +```js +assert.equal(myFavoriteFootballTeam.year, 1986); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md new file mode 100644 index 00000000000..1502bc6914d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md @@ -0,0 +1,291 @@ +--- +id: 63cf920228531a0145abd0b3 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property. + +```js +assert.property(myFavoriteFootballTeam, 'isWorldCupWinner'); +``` + +Your `isWorldCupWinner` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner); +``` + +Your `isWorldCupWinner` property should be set to `true`. + +```js +assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md new file mode 100644 index 00000000000..33ba5e855e9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md @@ -0,0 +1,316 @@ +--- +id: 63cf93472de77d01bf8474bf +title: Step 10 +challengeType: 0 +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. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `headCoach` property. + +```js +assert.property(myFavoriteFootballTeam, 'headCoach'); +``` + +Your `headCoach` value should be an object. + +```js +assert.isObject(myFavoriteFootballTeam.headCoach) +``` + +Your `headCoach` object should have a `coachName` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'coachName'); +``` + +Your `coachName` property should be set to `Carlos Bilardo`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo'); +``` + +Your `headCoach` object should have a `matches` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'matches'); +``` + +Your `matches` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.headCoach.matches); +``` + +Your `matches` property should be set to `7`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.matches, 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md new file mode 100644 index 00000000000..6dbedd38e9f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md @@ -0,0 +1,296 @@ +--- +id: 63d120a05ee93f38353b84c0 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `players` property. + +```js +assert.property(myFavoriteFootballTeam, 'players'); +``` + +Your `players` value should be an array. + +```js +assert.isArray(myFavoriteFootballTeam.players) +``` + +Your `players` array should be empty. + +```js +assert.deepEqual(myFavoriteFootballTeam.players, []) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md new file mode 100644 index 00000000000..c5569d06c04 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md @@ -0,0 +1,369 @@ +--- +id: 63d1214a0ac7a9389793269b +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `players` array, create a new object with the following properties: + + +```md + +name: "Sergio Almirón" +position: "forward" +number: 1 +isCaptain: false +nickname: null + +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have the value of an object. + +```js +assert.isObject(myFavoriteFootballTeam.players[0]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'name'); +``` + +Your `name` property should be set to `Sergio Almirón`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'position'); +``` + +Your `position` property should be set to `forward`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[0]?.number); +``` + +Your `number` property should be set to `1`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.number, 1); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[0]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md new file mode 100644 index 00000000000..7bb2e78b95d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md @@ -0,0 +1,380 @@ +--- +id: 63d128eaedcc773d2ded2128 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Below that object, create a new object with the following properties: + +```md +name: "Sergio Batista" +position: "midfielder" +number: 2 +isCaptain: false +nickname: null +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have two values. + +```js +// Have to assert at least, because we pre-populate data in the next step. +assert.isAtLeast(myFavoriteFootballTeam.players.length, 2); +``` + +Your `myFavoriteFootballTeam.players` array should have an object as the second value. + +```js +assert.isObject(myFavoriteFootballTeam.players[1]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'name'); +``` + +Your `name` property should be set to `Sergio Batista`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'position'); +``` + +Your `position` property should be set to `midfielder`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[1]?.number); +``` + +Your `number` property should be set to `2`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.number, 2); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[1]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md new file mode 100644 index 00000000000..e117f81605f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md @@ -0,0 +1,446 @@ +--- +id: 63d12b9c7aaee43de1ba265d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you. + +The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it. + +Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + + +# --hints-- + +You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + +```js +assert.isFrozen(myFavoriteFootballTeam); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md new file mode 100644 index 00000000000..6e03cf91edf --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md @@ -0,0 +1,458 @@ +--- +id: 63d12fe2a595263e8f5084f7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties. + +Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`. + +When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value. + +# --hints-- + +You should assign the `USA` string to `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); + +``` + +You should add a `console.log` for `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md new file mode 100644 index 00000000000..c9a4a2ad0f4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md @@ -0,0 +1,470 @@ +--- +id: 63e02a333354343b595d64ca +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson. + +The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`. + +Remember you can use dot notation for this. + +# --hints-- + +You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); +``` + +You should remove your `console.log` for `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); +``` + +You should use `const` to declare a `sport` variable. + +```js +assert.match(code, /const\s+sport\s*=/); +``` + +You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable. + +```js +assert.equal(sport, myFavoriteFootballTeam.sport); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +myFavoriteFootballTeam.team = "USA"; +console.log(myFavoriteFootballTeam.team); + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md new file mode 100644 index 00000000000..f95ca095c29 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md @@ -0,0 +1,454 @@ +--- +id: 63e0334b7a24bd3c96aca4de +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`. + +# --hints-- + +You should use `const` to declare a `team` variable. + +```js +assert.match(code, /const\s+team\s*=/); +``` + +You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable. + +```js +assert.equal(team, myFavoriteFootballTeam.team); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md new file mode 100644 index 00000000000..ce0835fa4d9 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md @@ -0,0 +1,464 @@ +--- +id: 63e036373fc9173d284e165a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal. + +The object destructuring syntax allows you to unpack values from arrays and objects: + +```js +const developerObj = { + name: "Jessica Wilkins", + isDeveloper: true +}; + +// Object destructuring +const { name, isDeveloper } = developerObj; +``` + +Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code. + +# --hints-- + +Use object destructuring to access the `sport` and `team` values. + +```js + +assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; +const team = myFavoriteFootballTeam.team; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md new file mode 100644 index 00000000000..de3439a814b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md @@ -0,0 +1,449 @@ +--- +id: 63e03b86008bbb3e1c3de846 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Next, add the `year` and `players` to your destructuring assignment. + +# --hints-- + +You should add the `year` and `players` values to your destructuring assignment. + +```js +assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const { sport, team } = myFavoriteFootballTeam; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md new file mode 100644 index 00000000000..95eda5017a7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md @@ -0,0 +1,448 @@ +--- +id: 63e042661ad2663f0d468740 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax. + +# --hints-- + +Use object destructuring to access the `coachName` value. + +```js + +assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md new file mode 100644 index 00000000000..8179fd09158 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md @@ -0,0 +1,453 @@ +--- +id: 63e050bf935ac341b88326d6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now you need to start displaying the team's information on the screen. + +Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element. + +Once you complete that task, you should see the result in the preview window. + +# --hints-- + +You should assign the `sport` variable to `typeOfSport.innerHTML`. + +```js + +assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md new file mode 100644 index 00000000000..587342d8d66 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md @@ -0,0 +1,451 @@ +--- +id: 63e05557016dfd45ea49152c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`. + +# --hints-- + +You should assign the `team` variable to `teamName.innerHTML`. + +```js + +assert.match(code, /teamName.innerHTML\s*=\s*team\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md new file mode 100644 index 00000000000..fd77bba607c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md @@ -0,0 +1,462 @@ +--- +id: 63e05c00b615bb46ac87273a +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`. + +You should now see all of that information displayed on the screen below `Team stats`. + +# --hints-- + +You should assign the `year` variable to `worldCupYear.innerHTML`. + +```js + +assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/) + +``` + +You should assign the `coachName` variable to `headCoach.innerHTML`. + +```js + +assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md new file mode 100644 index 00000000000..64e5e01482a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md @@ -0,0 +1,479 @@ +--- +id: 63e060df21bca347b2d2b374 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu. + +Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step. + + +# --hints-- + +You should use `const` to declare a `setPlayerCards` variable. + +```js +assert.match(code, /const\s+setPlayerCards\s*=/); +``` + +Your `setPlayerCards` variable should be a function. + +```js +assert.isFunction(setPlayerCards); +``` + +Your `setPlayerCards` function should use arrow syntax. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/); +``` + +Your `setPlayerCards` function should not take a parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/); +``` + +Your `setPlayerCards` function should be empty. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md new file mode 100644 index 00000000000..e2fd95b4278 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md @@ -0,0 +1,470 @@ +--- +id: 63e062d6090ebb486a4eda3a +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used: + +```js +const greeting = (name = "Anonymous") => { + return "Hello " + name; +} + +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + +Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. + +# --hints-- + +Your `setPlayerCards` function should take an `arr` parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/); +``` + +Your `arr` parameter should have a default value of `players`. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + +const setPlayerCards = () => {}; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md new file mode 100644 index 00000000000..c5f10540ae0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md @@ -0,0 +1,478 @@ +--- +id: 63e949b8327aa2aca2ca8eac +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The next step is to create a new array that will be responsible for adding the player card information to the page. + +Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`. + +Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element. + +# --hints-- + +You should call the `.map()` method on your `arr` parameter. + +```js +assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/); +``` + +Your `.map()` method should take an empty callback function. + +```js +assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); +``` + +You should use the `+=` operator on `playerCards.innerHTML`. + +```js +assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/); +``` + +You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator. + +```js +assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md new file mode 100644 index 00000000000..10556005822 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md @@ -0,0 +1,472 @@ +--- +id: 63e94dae6dcedbad73f2f6ee +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables. + +Here is an example: + +```js +function myExampleFunction({ name, age, job, city }) { + +} +``` + +Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring. + +# --hints-- + +You should unpack all 5 object properties from objects in `arr` using object destructuring. + +```js + +assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/) + + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map(() => { + + }) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md new file mode 100644 index 00000000000..564fb6bb8e0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md @@ -0,0 +1,467 @@ +--- +id: 63e954321b0a77ae4f6d9650 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +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`. + +# --hints-- + +You should use template literals to add an empty `div` with a class of `player-card`. + + +```js + +assert.match(code, /`\s*\s*<\/div>\s*`\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md new file mode 100644 index 00000000000..b9c104fb55a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md @@ -0,0 +1,475 @@ +--- +id: 63e95a45dce95baf41dd4f78 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter: + +```js +${expression goes here} +``` + +# --hints-- + +You should add an `h2` element with the `name` parameter. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/) +``` + +Your `h2` should be nested in your `div`. + +```js +assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+ +
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md new file mode 100644 index 00000000000..53646c4fff0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md @@ -0,0 +1,467 @@ +--- +id: 63e95e39860dc5b01ebe9be0 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team. + +Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string. + +# --hints-- + +You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name}

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md new file mode 100644 index 00000000000..f41577b8e76 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md @@ -0,0 +1,472 @@ +--- +id: 63e9667c881b61b1e338d276 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Position:` followed by the `position` variable. + +```js +assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+ +
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md new file mode 100644 index 00000000000..edceac6fe11 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md @@ -0,0 +1,472 @@ +--- +id: 63e96938d2a347b2734a1587 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Number:` followed by the `number` variable. + +```js +assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after your existing `p` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md new file mode 100644 index 00000000000..4bb4a4f5aa6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md @@ -0,0 +1,473 @@ +--- +id: 63e96eb94c97b6b31ee50f63 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Below your existing paragraph elements, add another paragraph element with the text `Nickname:`. + +# --hints-- + +You should add a new paragraph element with the text `Nickname:`. + +```js +assert.match(code, /\s*\s*Nickname:\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md new file mode 100644 index 00000000000..46379d93380 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md @@ -0,0 +1,482 @@ +--- +id: 63e9718d7d490bb3940d5a0a +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next to the `Nickname:` text, add an embedded expression that will show the player's nickname if they have one. + +Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`. + +# --hints-- + +You should use a ternary operator to check if `nickname` is not `null`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/) +``` + +If your ternary is truthy, it should display the player's `nickname`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/) +``` + +If your ternary is falsy, it should display the string `N/A`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname:

+
+ `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md new file mode 100644 index 00000000000..b4b4d23626a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md @@ -0,0 +1,477 @@ +--- +id: 63e9737f686c76b4078a60f4 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `.map()` method will return a new array of `player-card` items separated by commas. + +To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method. + + +# --hints-- + +You should chain the `.join()` method to the `.map()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s); +``` + +You should pass an empty string to the `.join()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ `; + } + ) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md new file mode 100644 index 00000000000..e5c273332f2 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md @@ -0,0 +1,485 @@ +--- +id: 63f28972973504e7bb58b0b3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +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. + +# --hints-- + +You should call the `.addEventListener()` method on the `playersDropdownList` variable. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(/); +``` + +Your event listener should listen for the `change` event. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/); +``` + +Your event listener should have an empty callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md new file mode 100644 index 00000000000..8aeee3d3efa --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md @@ -0,0 +1,475 @@ +--- +id: 63f28ef082d771e8bf71f94a +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +For the callback function, pass in `e` as a parameter. + +`e` represents an object which contains the information for that event. + +# --hints-- + +You should pass in `e` as a parameter to your callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +--fcc-editable-region-- + +playersDropdownList.addEventListener("change", () => { + +}); + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md new file mode 100644 index 00000000000..f8bad487511 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -0,0 +1,477 @@ +--- +id: 63f293c804d6f9e9a83ca4c5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Inside the callback function, add a `console.log` with the value of `e.target.value`. + +Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. + +`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. + +# --hints-- + +You should add a `console.log` with the value of `e.target.value`. + +```js +assert.match(code, /console.log\s*\(e.target.value\)\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md new file mode 100644 index 00000000000..a15fd647b37 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md @@ -0,0 +1,489 @@ +--- +id: 63f29804e3ec00ea6fab1ec4 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Remove the `console.log` statement you created in the previous step. + +The next step would be to reset the content for the `playerCards` element. + +Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string. + +# --hints-- + +You should not have the `console.log` statement in your code. + +```js +assert.notMatch(code, /\s*console.log\(e.target.value\)/); +``` + +You should access the `innerHTML` property of the `playerCards` element. + +```js +assert.match(code, /playerCards\.innerHTML\s*=/); +``` + +You should set the `innerHTML` property to an empty string. + +```js +assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + +console.log(e.target.value) + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md new file mode 100644 index 00000000000..1657ba65473 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md @@ -0,0 +1,508 @@ +--- +id: 63f29ce62aea65eb041758c8 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions. + +A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause. + +This is the basic syntax for a `switch` statement: + +```js +switch (expression) { + case 1: + /* + this code will execute + if the case matches the expression + */ + break; + default: + /* + the default will execute if none + of the other cases match the expression + */ +} +``` + +Add a `switch` statement and use `e.target.value` for the expression. + +# --hints-- + +You should use a `switch` statement. + +```js +assert.match(code, /switch/); +``` + +Your `switch` statement should use `e.target.value` for the expression. + +```js +assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/); +``` + +Your `switch` statement should be empty. + +```js +assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md new file mode 100644 index 00000000000..9188483c345 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md @@ -0,0 +1,478 @@ +--- +id: 63f2a0a860790eebe61bf908 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +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. + +# --hints-- + +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*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md new file mode 100644 index 00000000000..cabfe408ca5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md @@ -0,0 +1,521 @@ +--- +id: 63f2a4a8087e6dec8ec47f16 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +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`. + +Lastly, add a `break` statement below the `setPlayerCards` function call. + +# --hints-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md new file mode 100644 index 00000000000..fbf9f1cb1b8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md @@ -0,0 +1,517 @@ +--- +id: 63f2a5f09a785aed155c0a56 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/) +``` + +In your `midfielder` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md new file mode 100644 index 00000000000..8666f5ab42e --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md @@ -0,0 +1,521 @@ +--- +id: 63f2a8e14fb388edd3242527 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/) +``` + +In your `defender` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards(players.filter((player) => player.position === "midfielder")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md new file mode 100644 index 00000000000..c41768c86d6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md @@ -0,0 +1,527 @@ +--- +id: 63f2aa36fcdc63ee4e18fc37 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/) +``` + +In your `goalkeeper` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md new file mode 100644 index 00000000000..6c919ef5e37 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md @@ -0,0 +1,790 @@ +--- +id: 63f2ab4f6c52c5eec6d68de4 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The final step is to add a `default` clause if none of the other `case` clauses match the user selection. + +For the `default` clause, call the `setPlayerCards` function without any arguments passed in. + +Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname. + +Congratulations on completing the football team cards project! + +# --hints-- + +You should add a `default` clause to your `switch` statement. + +```js +assert.match(code, /default\s*:\s*/) +``` + +In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in. + +```js +assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + case "goalkeeper": + setPlayerCards( + players.filter((player) => player.position === "goalkeeper") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` + +# --solutions-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [ + { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, }, + { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, }, + { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", }, + { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", }, + { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", }, + { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", }, + { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", }, + { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, }, + { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", }, + { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", }, + { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", }, + { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, }, + { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, }, + { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, }, + { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", }, + { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, }, + { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, }, + { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, }, + { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", }, + { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, }, + { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", }, + { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], }; + +Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
` ) .join(""); }; + +playersDropdownList.addEventListener("change", (e) => { playerCards.innerHTML = ""; + + switch (e.target.value) { case "nickname": setPlayerCards(players.filter((player) => player.nickname !== null)); break; case "forward": setPlayerCards(players.filter((player) => player.position === "forward")); break; case "midfielder": setPlayerCards( players.filter((player) => player.position === "midfielder") ); break; case "defender": setPlayerCards( players.filter((player) => player.position === "defender") ); break; case "goalkeeper": setPlayerCards( players.filter((player) => player.position === "goalkeeper") ); break; default: setPlayerCards(); } }); diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md new file mode 100644 index 00000000000..03ddbef793f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md @@ -0,0 +1,504 @@ +--- +id: 641fc88d8fa7127f76e0324f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + + +Call the `setPlayerCards` function with an argument of `players.filter()`. + +Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`. + +# --hints-- + +In your `nickname` case, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md new file mode 100644 index 00000000000..e084de31fa4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md @@ -0,0 +1,488 @@ +--- +id: 641fcfd468185384ac218b7d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Before you can move onto the next case, you will need to add a `break` statement: + +```js + case "example": + // code goes here + break; +``` + +The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement. + +Below your `setPlayerCards` call, add a `break` statement. + +# --hints-- + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

Team stats

+
+
+

Team:

+

Sport:

+

Year:

+

Head coach:

+
+ + +
+
+

Sergio Almirón

+

Position: forward

+

Number: 1

+

Nickname: N/A

+
+
+

Sergio Batista

+

Position: midfielder

+

Number: 2

+

Nickname: N/A

+
+
+

Ricardo Bochini

+

Position: midfielder

+

Number: 3

+

Nickname: El Bocha

+
+
+

Claudio Borghi

+

Position: midfielder

+

Number: 4

+

Nickname: Bichi

+
+
+

José Luis Brown

+

Position: defender

+

Number: 5

+

Nickname: Tata

+
+
+

Daniel Passarella

+

Position: defender

+

Number: 6

+

Nickname: El Gran Capitán

+
+
+

Jorge Burruchaga

+

Position: forward

+

Number: 7

+

Nickname: Burru

+
+
+

Néstor Clausen

+

Position: defender

+

Number: 8

+

Nickname: N/A

+
+
+

José Luis Cuciuffo

+

Position: defender

+

Number: 9

+

Nickname: El Cuchu

+
+
+

(Captain) Diego Maradona

+

Position: midfielder

+

Number: 10

+

Nickname: El Pibe de Oro

+
+
+

Jorge Valdano

+

Position: forward

+

Number: 11

+

Nickname: The Philosopher of Football

+
+
+

Héctor Enrique

+

Position: midfielder

+

Number: 12

+

Nickname: N/A

+
+
+

Oscar Garré

+

Position: defender

+

Number: 13

+

Nickname: N/A

+
+
+

Ricardo Giusti

+

Position: midfielder

+

Number: 14

+

Nickname: N/A

+
+
+

Luis Islas

+

Position: goalkeeper

+

Number: 15

+

Nickname: El loco

+
+
+

Julio Olarticoechea

+

Position: defender

+

Number: 16

+

Nickname: N/A

+
+
+

Pedro Pasculli

+

Position: forward

+

Number: 17

+

Nickname: N/A

+
+
+

Nery Pumpido

+

Position: goalkeeper

+

Number: 18

+

Nickname: N/A

+
+
+

Oscar Ruggeri

+

Position: defender

+

Number: 19

+

Nickname: El Cabezón

+
+
+

Carlos Tapia

+

Position: midfielder

+

Number: 20

+

Nickname: N/A

+
+
+

Marcelo Trobbiani

+

Position: midfielder

+

Number: 21

+

Nickname: Calesita

+
+
+

Héctor Zelada

+

Position: goalkeeper

+

Number: 22

+

Nickname: N/A

+
+
+
+
© freeCodeCamp
+ + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
+

${name} ${isCaptain ? "(Captain)" : ""}

+

Position: ${position}

+

Number: ${number}

+

Nickname: ${nickname !== null ? nickname : "N/A"}

+
+ ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/espanol/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml b/curriculum/challenges/espanol/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml index 707d18c0493..59791a99458 100644 --- a/curriculum/challenges/espanol/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml +++ b/curriculum/challenges/espanol/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml @@ -1,22 +1,22 @@ --- id: 61531b20cc9dfa2741a5b800 -title: College Algebra with Python Certification +title: Álgebra universitaria con certificación Python certification: college-algebra-with-python challengeType: 7 isPrivate: true tests: - id: 63d83ff239c73468b059cd3f - title: Build a Multi-Function Calculator + title: Construye un Calculador Multi-Funciones - id: 63d83ffd39c73468b059cd40 - title: Build a Graphing Calculator + title: Construye un calculador gráfico - id: 63d8401039c73468b059cd41 - title: Build Three Math Games + title: Construye tres juegos de matemáticas - id: 63d8401e39c73468b059cd42 - title: Build a Financial Calculator + title: Construye un calculador financiero - id: 63d8402e39c73468b059cd43 - title: Build a Data Graph Explorer + title: Construye un explorador de gráficos de datos diff --git a/curriculum/challenges/espanol/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/espanol/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index 315f0ecad63..271c381796d 100644 --- a/curriculum/challenges/espanol/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/espanol/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery Cada elemento HTML tiene un elemento `parent` (padre) del cual `inherits` (hereda) propiedades. -Por ejemplo, tu elemento `jQuery Playground` `h3` tiene el elemento padre de `
`, que en sí mismo tiene el padre `body`. +For example, the `h3` element in your `jQuery Playground` has the parent element of `
`, which itself has the parent element of `body`. jQuery tiene una función llamada `parent()` que te permite acceder al padre del elemento que hayas seleccionado. diff --git a/curriculum/challenges/espanol/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/espanol/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 421f2d50a7d..f1c2c2d89eb 100644 --- a/curriculum/challenges/espanol/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/espanol/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -522,6 +522,7 @@ async(getUserInput) => { date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" + }).replaceAll(',', '') }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md index 7391703e6c7..9b28381be97 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md @@ -24,9 +24,9 @@ Finalmente, toma todas las rutas de tu servidor y pégalas en tus nuevos archivo Sigue agregándolos hasta que no existan más errores, y tu archivo de servidor ya no tenga ninguna ruta ¡(**excepto la ruta en el bloque catch**)! -Do the same thing in your `auth.js` file with all of the things related to authentication such as the serialization and the setting up of the local strategy and erase them from your server file. Asegúrate de agregar las dependencias y llamar a `auth(app, myDataBase)` en el servidor en el mismo lugar. +Haz lo mismo en el archivo `auth.js` con todo lo relacionado con autenticación, como la serialización y configuración de la estrategia local, y bórralo del archivo de servidor. Asegúrate de agregar las dependencias y llamar a `auth(app, myDataBase)` en el servidor en el mismo lugar. -Envía tu página cuando creas que lo has hecho bien. If you're running into errors, you can check out an example of the completed project. +Envía tu página cuando creas que lo has hecho bien. Si tienes errores, aquí puedes ver un ejemplo del proyecto completo. # --hints-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md index 49572b90897..f7da5659bc0 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md @@ -38,11 +38,11 @@ socket.on('user count', function(data) { Ahora, ¡intenta cargar tu aplicación, autentifica, y debes ver en tu consola "1" que representa el recuento de usuarios actual! Trata de cargar más clientes y de autentificar para ver cómo sube el número. -Envía tu página cuando creas que lo has hecho bien. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que lo has hecho bien. Si tienes errores, aquí puedes ver un ejemplo del proyecto hasta este punto. # --hints-- -`currentUsers` should be defined. +`currentUsers` debe estar definido. ```js async (getUserInput) => { @@ -72,7 +72,7 @@ async (getUserInput) => { } ``` -Your client should be listening for `'user count'` event. +El cliente debe estar escuchando al evento `'user count'`. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md index 30099cb0ff7..3b7d0fda410 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md @@ -18,11 +18,11 @@ socket.on('disconnect', () => { }); ``` -To make sure clients continuously have the updated count of current users, you should decrease `currentUsers` by 1 when the disconnect happens then emit the `'user count'` event with the updated count. +Para asegurar que los usuarios disponen siempre del recuento de usuarios actualizado, debes reducir `currentUsers` en 1 cuando ocurra la desconexión, y entonces emitir el evento `'user count'` con el recuento actualizado. **Nota:** Al igual que `'disconnect'`, todos los demás eventos que un socket puede emitir al servidor deben ser manejados dentro del oyente de conexión donde tenemos definido 'socket'. -Envía tu página cuando creas que lo has hecho bien. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que lo has hecho bien. Si se producen errores, aquí puedes ver el proyecto completado hasta este punto. # --hints-- @@ -37,7 +37,7 @@ async (getUserInput) => { } ``` -Your client should be listening for `'user count'` event. +El cliente debe estar escuchando el evento `'user count'` ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md index d0802e23e25..0654ac61505 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md @@ -12,9 +12,9 @@ Volviendo a la sección de seguridad de la información, puedes recordar que alm `bcrypt@~5.0.0` Ha sido agregado como una dependencia, así que requiérelo en tu servidor. Necesitarás manejar el hashing en 2 áreas clave: donde manejas el registro/guardado de una nueva cuenta, y cuando compruebas que una contraseña es correcta al iniciar sesión. -Currently on your registration route, you insert a user's plaintext password into the database like so: `password: req.body.password`. Hash the passwords instead by adding the following before your database logic: `const hash = bcrypt.hashSync(req.body.password, 12);`, and replacing the `req.body.password` in the database saving with just `password: hash`. +Actualmente, en la ruta de registro estás insertando en la base de datos contraseñas de usuario en texto plano: `password: req.body.password`. En su lugar, haz un hashing de las contraseñas añadiendo lo siguiente antes de la lógica de la base de datos: `const hash = bcrypt.hashSync(req.body.password, 12);` y reemplazando `req.body.password` en el guardado en la base da datos por simplemente lo siguiente: `password: hash`. -On your authentication strategy, you check for the following in your code before completing the process: `if (password !== user.password) return done(null, false);`. Después de realizar los cambios anteriores, ahora `user.password` es un hash. Antes de hacer un cambio en el código existente, nota que la sentencia está comprobando si la contraseña **no** es igual entonces devuelve no autenticado. With this in mind, change that code to look as follows to properly check the password entered against the hash: +En la estrategia de autenticación, comprobamos lo siguiente antes de completar el proceso: `if (password !== user.password) return done(null, false);`. Después de realizar los cambios anteriores, ahora `user.password` es un hash. Antes de hacer un cambio en el código existente, nota que la sentencia está comprobando si la contraseña **no** es igual entonces devuelve no autenticado. Con esto en mente, cambia el código según el siguiente fragmento para constrastar la contraseña introducida frente al hash: ```js if (!bcrypt.compareSync(password, user.password)) { @@ -22,9 +22,9 @@ if (!bcrypt.compareSync(password, user.password)) { } ``` -That is all it takes to implement one of the most important security features when you have to store passwords. +Esto es todo lo necesario para implementar una de las características de seguridad más importantes cuando se almacenan contraseñas. -Envía tu página cuando creas que lo has hecho bien. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que lo has hecho bien. Si tienes problemas, aquí puedes echar un vistazo al proyecto completado hasta este punto. # --hints-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md index 5e4b12b29b9..ce88f3ea062 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md @@ -8,29 +8,29 @@ dashedName: how-to-put-a-profile-together # --description-- -Now that you can ensure the user accessing the `/profile` is authenticated, you can use the information contained in `req.user` on your page. +Una vez asegurado que el usuario que accede a `/profile` está autenticado, se puede aprovechar la información contenida en `req.user` y hacer uso de ella en la página que estamos construyendo. -Pass an object containing the property `username` and value of `req.user.username` as the second argument for the `render` method of the profile view. +Pasa un objeto con la propiedad `username` y valor `req.user.username` como segundo argumento al método `render` de la vista profile. -Then, go to your `profile.pug` view, and add the following line below the existing `h1` element, and at the same level of indentation: +Después, en la vista `profile.pug` añade la siguiente línea debajo del elemento `h1`, con el mismo nivel de indentación: ```pug h2.center#welcome Welcome, #{username}! ``` -This creates an `h2` element with the class `center` and id `welcome` containing the text `Welcome,` followed by the username. +Esto crea un elemento `h2` con la clase `center` e id `welcome` que contiene el texto`Welcome,` seguido del nombre de usuario. -Also, in `profile.pug`, add a link referring to the `/logout` route, which will host the logic to unauthenticate a user: +Añade, también en `profile.pug`, un enlace a la ruta `/logout`, la cual albergará la lógica para desautenticar un usuario: ```pug a(href='/logout') Logout ``` -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que está correcta. Si tienes problemas, aquí puedes comprobar el proyecto completado hasta este punto. # --hints-- -You should correctly add a Pug render variable to `/profile`. +Debes añadir correctamente la variable de renderizado Pug a `/profile`. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md index 72b5b541ec5..3f51f25b39a 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md @@ -8,11 +8,11 @@ dashedName: implement-the-serialization-of-a-passport-user # --description-- -You are not loading an actual user object since the database is not set up. Connect to the database once, when you start the server, and keep a persistent connection for the full life-cycle of the app. To do this, add your database's connection string (for example: `mongodb+srv://:@cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`) to the environment variable `MONGO_URI`. Esto se utiliza en el archivo `connection.js`. +En este momento, no estás cargando ningún objeto usuario ya que la base de datos no está configurada. Conéctate a la base de datos una vez, cuando arranca el servidor, y mantén la conexión durante todo el ciclo de vida de la app. Para ello, establece el valor de la variable de entorno `MONGO_URI` con la cadena de conexión a la base de datos (por ejemplo `mongodb+srv://:@cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`). Esto se utiliza en el archivo `connection.js`. -*If you are having issues setting up a free database on MongoDB Atlas, check out this tutorial.* +*Si tienes problemas configurando una base de datos gratis en MongoDB Atlas, échale un vistazo a este tutorial.* -Now you want to connect to your database, then start listening for requests. The purpose of this is to not allow requests before your database is connected or if there is a database error. To accomplish this, encompass your serialization and app routes in the following code: +Por tanto, el objetivo es, en primer lugar, conectarse a la base de datos y, a continuación, comenzar a escuchar peticiones. El objetivo de este enfoque es no permitir peticiones antes de establecer conexión con la base de datos o si hay algún error durante el proceso de conexión. Para conseguirlo, agrupa el código de serialización y de las rutas como se muestra en el siguiente ejemplo: ```javascript myDB(async client => { @@ -40,7 +40,7 @@ myDB(async client => { Asegúrate de descomentar el código `myDataBase` en `deserializeUser`, y edita tu `done(null, null)` para incluir el `doc`. -Envía tu página cuando creas que lo has hecho bien. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que lo has hecho bien. Si tienes errores, aquí puedes comprobar el proyecto completado hasta este punto. # --hints-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md index bc41470ce22..9817d7ec656 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md @@ -12,7 +12,7 @@ La última parte de configurar tu autentificación de GitHub es crear la propia Para configurar la estrategia de GitHub, debes decirle a Passport que utilice una instancia de `GitHubStrategy`, que acepta 2 argumentos: un objeto (que contiene `clientID`, `clientSecret`, y `callbackURL`) y una función a ser llamada cuando un usuario es autentificado con éxito, que determinará si el usuario es nuevo y qué campos guardar inicialmente en el objeto de base de datos del usuario. Esto es común en muchas estrategias, pero algunas pueden requerir más información como se indica en el README de GitHub de esa estrategia específica. Por ejemplo, Google requiere un *ámbito* también que determina qué tipo de información está pidiendo que se le devuelva y pide al usuario que apruebe dicho acceso. -The current strategy you are implementing authenticates users using a GitHub account and OAuth 2.0 tokens. El ID de cliente y el secreto obtenidos al crear una aplicación se proporcionan como opciones al crear la estrategia. La estrategia también requiere un callback `verify`, que recibe el token de acceso y el token de actualización opcional, así como `profile` que contiene el perfil de GitHub del usuario autenticado. El callback `verify` debe llamar a `cb` que proporciona un usuario para completar la autenticación. +La estrategia que estás implementando actualmente autentica usuarios mediante una cuenta de GitHub y tokens de OAuth 2.0. El ID de cliente y el secreto obtenidos al crear una aplicación se proporcionan como opciones al crear la estrategia. La estrategia también requiere un callback `verify`, que recibe el token de acceso y el token de actualización opcional, así como `profile` que contiene el perfil de GitHub del usuario autenticado. El callback `verify` debe llamar a `cb` que proporciona un usuario para completar la autenticación. Así es como debe verse tu nueva estrategia en este punto: @@ -31,7 +31,7 @@ passport.use(new GitHubStrategy({ ¡Tu autenticación aún no será exitosa, y en realidad arrojará un error sin la lógica de la base de datos y el callback, pero debería registrar tu perfil de GitHub en tu consola si lo intentas! -Envía tu página cuando creas que la tienes correcta. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que la tienes correcta. Si tienes dudas o se producen errores, aquí puedes comprobar el proyecto completado hasta este punto. # --hints-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md index 11c76cf60ea..d0450030267 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md @@ -8,9 +8,9 @@ dashedName: logging-a-user-out # --description-- -Crear la lógica de cierre de sesión es fácil. The route should just unauthenticate the user, and redirect to the home page instead of rendering any view. +Crear la lógica de cierre de sesión es fácil. La ruta simplemente debe desautenticar el usuario y redirigir a la página de inicio, en lugar de renderizar ninguna vista. -In passport, unauthenticating a user is as easy as just calling `req.logout()` before redirecting. Add this `/logout` route to do that: +En passport, desautenticar un usuario es tan sencillo como llamar a `req.logout()` antes de redireccionar. Añade la ruta `/logout` que haga lo siguiente: ```js app.route('/logout') @@ -20,7 +20,7 @@ app.route('/logout') }); ``` -You may have noticed that you are not handling missing pages (404). La forma común de manejar esto en Node es con el siguiente middleware. Sigue adelante y añade esto después de todas tus rutas: +Seguramente habrás observado que no estamos gestionando páginas no encontradas (404). La forma común de manejar esto en Node es con el siguiente middleware. Sigue adelante y añade esto después de todas tus rutas: ```js app.use((req, res, next) => { @@ -30,7 +30,7 @@ app.use((req, res, next) => { }); ``` -Envía tu página cuando creas que lo has hecho bien. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que lo has hecho bien. Si tienes dudas o se producen errores, aquí puedes comprobar el proyecto completado hasta este punto. # --hints-- @@ -49,7 +49,7 @@ async (getUserInput) => { } ``` -`/logout` should redirect to the home page. +`/logout` debe redireccionar a la página de inicio. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md index 455e1a8e60d..a964d9ffa27 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md @@ -8,20 +8,20 @@ dashedName: registration-of-new-users # --description-- -Now you need to allow a new user on your site to register an account. In the `res.render` for the home page add a new variable to the object passed along - `showRegistration: true`. When you refresh your page, you should then see the registration form that was already created in your `index.pug` file. This form is set up to **POST** on `/register`, so create that route and have it add the user object to the database by following the logic below. +Ahora necesitas permitir que un nuevo usuario registre una cuenta. En el método `res.render` para la página de inicio añade una nueva variable al objeto que se le pasa como argumento - `showRegistration: true`. Cuando actualizas tu página, entonces verás el formulatio de registro que ya fue creado en tu archivo `index.pug`. Este formulario esta configurado para **POST** en `/register`, así crea esa ruta y tiene que agregar el objeto usuario a la base de datos siguiendo la lógica a continuación. -The logic of the registration route should be as follows: +La lógica de la ruta de registro debería ser la siguiente: -1. Register the new user -2. Authenticate the new user -3. Redirect to `/profile` +1. Registrar el nuevo usuario +2. Autenticar el nuevo usuario +3. Redireccionar a `/profile` -The logic of step 1 should be as follows: +La lógica del paso 1 debería ser la siguiente: -1. Query database with `findOne` -2. If there is an error, call `next` with the error -3. If a user is returned, redirect back to home -4. If a user is not found and no errors occur, then `insertOne` into the database with the username and password. As long as no errors occur there, call `next` to go to step 2, authenticating the new user, which you already wrote the logic for in your `POST /login` route. +1. Consulta la base de datos con `findOne` +2. Si hay un error, llama a `next` con el error +3. Si el usuario es devuelto, redirecciona de regreso al inicio +4. Si un usuario no fue encontrado y no ocurren errores, entonces `insertOne` en la base de datos con el nombre de usuario y contraseña. Mientras no ocurran errores ahí, llama a `next` para ir al paso 2, autenticando el nuevo usuario, para el cual escribiste la lógica para entrar en tu ruta `POST /login`. ```js app.route('/register') @@ -56,13 +56,13 @@ app.route('/register') ); ``` -Envía tu página cuando creas que lo has hecho bien. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que lo has hecho bien. Si tu ejecución lleva a errrores, puedes check out the project completed up to this point. **NOTA:** A partir de este punto, pueden surgir problemas relacionados con el uso del navegador *picture-in-picture*. Si está utilizando un IDE en línea que ofrece una vista previa de la aplicación dentro del editor, se recomienda abrir esta vista previa en una nueva pestaña. # --hints-- -You should have a `/register` route and display a registration form on the home page. +Deberías tener una ruta a `/register` y mostrar un formulario en la página de inicio. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md index a98bacc0124..3b8fe0afb8e 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md @@ -46,11 +46,11 @@ const { ObjectID } = require('mongodb'); El `deserializeUser` arrojará un error hasta que configures la conexión de la base de datos. Así que, por ahora, comenta la llamada `myDatabase.findOne`, y llama `done(null, null)` en la `deserializeUser` función callback. -Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando tu creas la tienes correctamente. Si te encuentras errores, puedes comprobar el proyecto completado hasta este punto. # --hints-- -You should serialize the user object correctly. +Debes serializar el objeto usuario correctamente. ```js async (getUserInput) => { @@ -70,7 +70,7 @@ async (getUserInput) => { } ``` -You should deserialize the user object correctly. +Debes deserializar el objeto usuario correctamente. ```js async (getUserInput) => { @@ -90,7 +90,7 @@ async (getUserInput) => { } ``` -MongoDB should be a dependency. +MongoDB debe ser una dependencia. ```js async (getUserInput) => { @@ -105,7 +105,7 @@ async (getUserInput) => { } ``` -Mongodb should be properly required including the ObjectId. +Mongodb debe ser requerido apropiadamente incluyendo el ObjectId. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md index 850168daf51..cb793ccc46d 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md +++ b/curriculum/challenges/espanol/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md @@ -19,7 +19,7 @@ const io = require('socket.io')(http); Ahora que el servidor *http* está montado en la *aplicación expresa*, necesitas escuchar desde el servidor *http*. Cambia la línea con `app.listen` a `http.listen`. -Lo primero que hay que manejar es escuchar por una nueva conexión del cliente. La palabra clave on hace eso: escucha un evento específico. Requiere dos argumentos: un string con el nombre del evento emitido, y una función a través de la cual son pasados los datos. In the case of our connection listener, use `socket` to define the data in the second argument. Un socket es un cliente individual que está conectado. +Lo primero que hay que manejar es escuchar por una nueva conexión del cliente. La palabra clave on hace eso: escucha un evento específico. Requiere dos argumentos: un string con el nombre del evento emitido, y una función a través de la cual son pasados los datos. En el caso del listener de la conexión, usa `socket` para definir los datos en el segundo argumento. Un socket es un cliente individual que está conectado. Para escuchar las conexiones a tu servidor, añade lo siguiente dentro de la conexión de tu base de datos: @@ -36,13 +36,13 @@ Ahora para que el cliente se conecte, sólo tiene que añadir lo siguiente a su let socket = io(); ``` -El comentario suprime el error que normalmente verías, ya que 'io' no está definido en el archivo. You have already added a reliable CDN to the Socket.IO library on the page in `chat.pug`. +El comentario suprime el error que normalmente verías, ya que 'io' no está definido en el archivo. Ya ha sido añadido un CDN de confianza a la biblioteca Socket.IO en la página `chat.pug`. -Now try loading up your app and authenticate and you should see in your server console `A user has connected`. +Ahora prueba a cargar la app y autenticarte; en la consola del servidor debería aparecer `A user has connected`. **Nota:**`io()` funciona sólo cuando se conecta a un socket alojado en la misma url/servidor. Para conectar a un socket externo alojado en otro lugar, debes usar `io.connect('URL');`. -Envía tu página cuando creas que está correcto. If you're running into errors, you can check out the project completed up to this point. +Envía tu página cuando creas que está correcto. Si tienes errores, aquí puedes ver el proyecto completado hasta este paso. # --hints-- diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md index ce6096e32ae..34dd561c151 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md @@ -14,21 +14,21 @@ Trabajar en estos desafíos implica escribir tu código usando uno de los siguie - Usa nuestro proyecto de inicio Replit para completar estos desafíos. - Utiliza un constructor de sitios web de tu elección para completar el proyecto. Asegúrate de incorporar todos los archivos de nuestro repositorio de GitHub. -If you use Replit, follow these steps to set up the project: +Si usas Replit, sigue estos pasos para configurar el proyecto: -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Comienza importando el proyecto en Replit. +- A continuación, verás una ventana `.replit` +- Selecciona `Use run command` y haz click en el botón `Done` -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. +Una vez completado lo anterior, asegúrate de que una demo funcional del proyecto sea accesible públicamente. Envía entonces la URL a través del campo Solution Link. # --instructions-- -Within `tests/1_unit-tests.js` under the test labelled `#1` in the `Basic Assertions` suite, change each `assert` to either `assert.isNull` or `assert.isNotNull` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts. +En `tests/1_unit-tests.js`, bajo el test etiquetado como `#1` en la suite `Basic Assertions`, cambia cada `assert` a `assert.isNull` o `assert.isNotNull` para que los tests se pasen (deben ser evaluados a `true`). No cambies los argumentos pasados a las aserciones. # --hints-- -All tests should pass. +Se deben pasar todos los tests. ```js (getUserInput) => @@ -42,7 +42,7 @@ All tests should pass. ); ``` -You should choose the correct method for the first assertion - `isNull` vs. `isNotNull`. +Debes elegir el método correcto para la primera aserción - `isNull` vs. `isNotNull`. ```js (getUserInput) => @@ -56,7 +56,7 @@ You should choose the correct method for the first assertion - `isNull` vs. `isN ); ``` -You should choose the correct method for the second assertion - `isNull` vs. `isNotNull`. +Debes elegir el método correcto para la segunda aserción - `isNull` vs. `isNotNull`. ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md index 05142a6c1bb..eb68d15b920 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/american-british-translator.md @@ -20,7 +20,7 @@ Si usas Replit, sigue estos pasos para configurar el proyecto: - Siguiente, verás una ventana `.replit`. - Selecciona `Use run command` y click en el botón `Done`. -Cuando este hecho, asegurate que una demo de trabajo de tu proyecto este hospedad en algún sitio público. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. +Cuando este hecho, asegurate que una demo de trabajo de tu proyecto este hospedad en algún sitio público. Luego envía la URL en el campo Solution Link. Opcionalmente, también envía para el código fuente de tu proyecto en el campo GitHub Link. # --instructions-- @@ -69,7 +69,7 @@ Escribe las siguientes pruebas en `tests/2_functional-tests.js`: # --hints-- -You should provide your own project, not the example URL. +Debes proporcionar tu propio proyecto, no la URL ejemplo. ```js (getUserInput) => { @@ -282,7 +282,7 @@ async (getUserInput) => { }; ``` -All 24 unit tests are complete and passing. +Todas las 24 pruebas unitarias están completas y pasan. ```js async (getUserInput) => { @@ -307,7 +307,7 @@ async (getUserInput) => { }; ``` -All 6 functional tests are complete and passing. +Todas las 6 pruebas funcionales están completas y pasan. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md index c22c87f7d63..44e2352286f 100644 --- a/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md +++ b/curriculum/challenges/espanol/06-quality-assurance/quality-assurance-projects/issue-tracker.md @@ -14,42 +14,42 @@ Crea una aplicación full stack de JavaScript que sea funcionalmente similar a e - Usa nuestro proyecto inicial de Replit para completar tu proyecto. - Usa un constructor de sitios de tu elección para completar el proyecto. Asegúrate de incorporar todos los archivos de nuestro repositorio de GitHub. -If you use Replit, follow these steps to set up the project: +Si usas Replit, sigue estos pasos para configurar el proyecto: -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Comienza importando el proyecto en Replit. +- A continuación, verás una ventana `.replit`. +- Selecciona `Use run command` y pulsa el botón `Done`. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. +Una vez terminado el proyecto, asegúrate de que una demo funcional del mismo esté alojada en algún sitio con acceso público. Envía entonces la URL a través del campo Solution Link. Opcionalmente, puedes remitir también un enlace al código fuente mediante el campo GitHub Link. # --instructions-- -- Complete the necessary routes in `/routes/api.js` -- Create all of the functional tests in `tests/2_functional-tests.js` -- Copy the `sample.env` file to `.env` and set the variables appropriately -- To run the tests uncomment `NODE_ENV=test` in your `.env` file -- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell" +- Complete las rutas necesarias en `/routes/api.js` +- Crea todas las pruebas funcionales en `tests/2_functional-tests.js` +- Copie el archivo `sample.env` a `.env` y establezca las variables apropiadamente +- Para ejecutar las pruebas, descomenta `NODE_ENV=test` en tu archivo `.env` +- Para ejecutar las pruebas en la consola, use el comando `npm run test`. Para abrir la consola Replit, presiona Ctrl+Shift+P (Cmd en Mac) y tipear "open shell" -Write the following tests in `tests/2_functional-tests.js`: +Escribir las siguientes pruebas en `tests/2_functional-tests.js`: -- Create an issue with every field: POST request to `/api/issues/{project}` -- Create an issue with only required fields: POST request to `/api/issues/{project}` -- Create an issue with missing required fields: POST request to `/api/issues/{project}` -- View issues on a project: GET request to `/api/issues/{project}` -- View issues on a project with one filter: GET request to `/api/issues/{project}` -- View issues on a project with multiple filters: GET request to `/api/issues/{project}` -- Update one field on an issue: PUT request to `/api/issues/{project}` -- Update multiple fields on an issue: PUT request to `/api/issues/{project}` -- Update an issue with missing `_id`: PUT request to `/api/issues/{project}` -- Update an issue with no fields to update: PUT request to `/api/issues/{project}` -- Update an issue with an invalid `_id`: PUT request to `/api/issues/{project}` -- Delete an issue: DELETE request to `/api/issues/{project}` -- Delete an issue with an invalid `_id`: DELETE request to `/api/issues/{project}` -- Delete an issue with missing `_id`: DELETE request to `/api/issues/{project}` +- Crea un problema con cada campo: solicitud POST a `/api/issues/{project}` +- Crea un problema con solo los campos requeridos: solicitud POST a `/api/issues/{project}` +- Crea un problema con los campos requeridos faltantes: solicitud POST a `/api/issues/{project}` +- Ver problemas en un proyecto: solicitud GET a `/api/issues/{project}` +- Ver problemas en un proyecto con un filtro: solicitud GET a `/api/issues/{project}` +- Ver problemas en un proyecto con múltiples filtros: solicitud GET a `/api/issues/{project}` +- Actualiza un campo en un problema: Solicitud PUT a `/api/issues/{project}` +- Actualiza mulltiples campos en un problema: solicitud PUT a `/api/issues/{project}` +- Actualizar un problema con el faltante `_id`: solicitud PUT a `/api/issues/{project}` +- Actualiza un problema sin campos para actualizar: solicitud PUT a `/api/issues/{project}` +- Actualiza un problema con un id inválido `_id`: solicitud PUT a `/api/issues/{project}` +- Elimina un problema: solicitud DELETE a `/api/issues/{project}` +- Elimina un problema con un id inválido `_id`: solicitud DELETE a `/api/issues/{project}` +- Elimina un problema con un faltante `_id`: solicitud DELETE a `/api/issues/{project}` # --hints-- -You can provide your own project, not the example URL. +Puedes proporcionar tu propio proyecto, no la URL de ejemplo. ```js (getUserInput) => { @@ -57,7 +57,7 @@ You can provide your own project, not the example URL. }; ``` -You can send a `POST` request to `/api/issues/{projectname}` with form data containing the required fields `issue_title`, `issue_text`, `created_by`, and optionally `assigned_to` and `status_text`. +Puedes enviar una solicitud `POST` a `/api/issues/{projectname}` con un formulario de datos conteniendo los campos requeridos `issue_title`, `issue_text`, `created_by`, y opcionalmente `assigned_to` y `status_text`. ```js async (getUserInput) => { @@ -79,7 +79,7 @@ async (getUserInput) => { }; ``` -The `POST` request to `/api/issues/{projectname}` will return the created object, and must include all of the submitted fields. Excluded optional fields will be returned as empty strings. Additionally, include `created_on` (date/time), `updated_on` (date/time), `open` (boolean, `true` for open - default value, `false` for closed), and `_id`. +La solicitud `POST` a `/api/issues/{projectname}` devolverá el objeto creado, y debe incluir todos los campos envíados. Los campos excluídos opcionales serán devueltos como cadenas vacías. Adicionalmente, incluye `created_on` (fecha/hora), `updated_on` (fecha/hora), `open` (booleano, `true` par abrir - valor, predeterminado `false` para cerrar), y `_id`. ```js async (getUserInput) => { @@ -113,7 +113,7 @@ async (getUserInput) => { }; ``` -If you send a `POST` request to `/api/issues/{projectname}` without the required fields, returned will be the error `{ error: 'required field(s) missing' }` +Si tu envías una solicitud `POST` a `/api/issues/{projectname}` sin los campos requeridos, será devuelto el error `{ error: 'required field(s) missing' }` ```js async (getUserInput) => { @@ -131,7 +131,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/issues/{projectname}` for an array of all issues for that specific `projectname`, with all the fields present for each issue. +Puedes enviar una solicitud `GET` a `/api/issues/{projectname}` para un arreglo de todos los problemas para ese específico `projectname`, con todos los campos presentes para cada problema. ```js async (getUserInput) => { @@ -178,7 +178,7 @@ async (getUserInput) => { }; ``` -You can send a `GET` request to `/api/issues/{projectname}` and filter the request by also passing along any field and value as a URL query (ie. `/api/issues/{project}?open=false`). You can pass one or more field/value pairs at once. +Puedes enviar una solicitud `GET` a `/api/issues/{projectname}` y filtrar la solicitud para también pasar a lo largo de cualquier cambio y valor como una consulta URL (p. ej. `/api/issues/{project}?open=false`). Puedes pasar uno o más pares campos/valor a la vez. ```js async (getUserInput) => { @@ -219,7 +219,7 @@ async (getUserInput) => { }; ``` -You can send a `PUT` request to `/api/issues/{projectname}` with an `_id` and one or more fields to update. On success, the `updated_on` field should be updated, and returned should be `{ result: 'successfully updated', '_id': _id }`. +Puedes enviar una solicitud `PUT` a `/api/issues/{projectname}` con un `_id` y uno o más campos para actualizar. En caso de éxito, el campo `updated_on` debería ser actualizado, y debería ser devuelto `{ result: 'successfully updated', '_id': _id }`. ```js async (getUserInput) => { @@ -254,7 +254,7 @@ async (getUserInput) => { }; ``` -When the `PUT` request sent to `/api/issues/{projectname}` does not include an `_id`, the return value is `{ error: 'missing _id' }`. +Cuando la solicitud `PUT` enviada a `/api/issues/{projectname}` no incluye un `_id`, el valor devuelto es `{ error: 'missing _id' }`. ```js async (getUserInput) => { @@ -270,7 +270,7 @@ async (getUserInput) => { }; ``` -When the `PUT` request sent to `/api/issues/{projectname}` does not include update fields, the return value is `{ error: 'no update field(s) sent', '_id': _id }`. On any other error, the return value is `{ error: 'could not update', '_id': _id }`. +Cuando la petición `PUT` enviada a `/api/issues/{projectname}` no incluye campos actualizados, el valor devuelto es `{ error: 'no update field(s) sent', '_id': _id }`. En cualquier otro error, el valor devuelto es `{ error: 'could not update', '_id': _id }`. ```js async (getUserInput) => { @@ -300,7 +300,7 @@ async (getUserInput) => { }; ``` -You can send a `DELETE` request to `/api/issues/{projectname}` with an `_id` to delete an issue. If no `_id` is sent, the return value is `{ error: 'missing _id' }`. On success, the return value is `{ result: 'successfully deleted', '_id': _id }`. On failure, the return value is `{ error: 'could not delete', '_id': _id }`. +Puedes enviar una solicitud `DELETE` a `/api/issues/{projectname}` con un `_id` para borrar un problema. Si `_id` no fue enviado, el valor devuelto es `{ error: 'missing _id' }`. En caso de éxito, el valor devuelto es `{ result: 'successfully deleted', '_id': _id }`. En caso de fallo, el valor devuelto es `{ error: 'could not delete', '_id': _id }`. ```js async (getUserInput) => { @@ -342,7 +342,7 @@ async (getUserInput) => { }; ``` -All 14 functional tests are complete and passing. +Todas las 14 pruebas funcionales están completas y pasaron. ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md index b8c85f5a93b..f5b3cdbe7b7 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md @@ -10,16 +10,16 @@ dashedName: demographic-data-analyzer Estarás trabajando en este proyecto con nuestro código inicial en Replit. -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Comienza importando el proyecto en Replit. +- Después verás una ventana `.replit`. +- Selecciona `Use run command` y presiona el botón `Done`. Todavía estamos desarrollando la parte interactiva del currículo de Python. Por el momento, aquí hay algunos videos en el canal de YouTube de freeCodeCamp.org que te enseñaran todo lo que necesitas saber para completar este proyecto: -- Python for Everybody Video Course (14 hours) +- Curso en video Python para todos (14 horas) -- How to Analyze Data with Python Pandas (10 hours) +- Como analizar datos con Python y Pandas (10 horas) # --instructions-- @@ -37,15 +37,15 @@ En este desafío debe analizar los datos demográficos usando Pandas. Se le da u Debes usar Pandas para responder a las siguientes preguntas: -- How many people of each race are represented in this dataset? This should be a Pandas series with race names as the index labels. (`race` column) -- What is the average age of men? -- What is the percentage of people who have a Bachelor's degree? -- What percentage of people with advanced education (`Bachelors`, `Masters`, or `Doctorate`) make more than 50K? -- What percentage of people without advanced education make more than 50K? -- What is the minimum number of hours a person works per week? -- What percentage of the people who work the minimum number of hours per week have a salary of more than 50K? -- What country has the highest percentage of people that earn >50K and what is that percentage? -- Identify the most popular occupation for those who earn >50K in India. +- ¿Cuántas personas de cada raza están representadas en este set de datos? This should be a Pandas series with race names as the index labels. (columna `race`) +- ¿Cuál es la edad promedio de los hombres? +- ¿Cuál es el porcentaje de personas que tienen un grado de licenciatura (Bachelor's degree)? +- ¿Qué porcentaje de personas con una educación avanzada (`Bachelors`, `Masters` o `Doctorate`) ganan más de 50k? +- ¿Qué porcentaje de personas sin una educación avanzada generan más de 50k? +- ¿Cuál es el mínimo número de horas que una persona trabaja por semana? +- ¿Qué porcentaje de personas que trabajan el mínimo de horas por semana tiene un salario de más de 50k? +- ¿Qué país tiene el porcentaje más alto de personas que ganan >50k y cuál es ese porcentaje? +- Identifica la ocupación más popular de aquellos que ganan >50k en India. Utilice el código de inicio en el archivo `demographic_data_analyzer`. Actualice el código para que todas las variables definidas como "None" se establezcan al cálculo o código apropiado. Redondea todos los decimales a la décima más cercana. diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md index c1bc596df0a..1787212af1e 100644 --- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md +++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md @@ -10,16 +10,16 @@ dashedName: page-view-time-series-visualizer Estarás trabajando en este proyecto con nuestro código de inicio Replit. -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Empieza importando el proyecto en Replit. +- Siguiente, verás una ventana `.replit`. +- Selecciona `Use run command` y click en el botón `Done`. Todavía estamos desarrollando la parte interactiva del currículo de Python. Por el momento, aquí hay algunos videos en el canal de YouTube de freeCodeCamp.org que te enseñaran todo lo que necesitas saber para completar este proyecto: -- Python for Everybody Video Course(14 hours) +- Python for Everybody Video Course(14 horas) -- How to Analyze Data with Python Pandas (10 hours) +- How to Analyze Data with Python Pandas (10 horas) # --instructions-- @@ -27,11 +27,11 @@ Para este proyecto, visualizarás los datos de las series temporales utilizando Utiliza los datos para completar las siguientes tareas: -- Use Pandas to import the data from "fcc-forum-pageviews.csv". Set the index to the `date` column. -- Clean the data by filtering out days when the page views were in the top 2.5% of the dataset or bottom 2.5% of the dataset. -- Create a `draw_line_plot` function that uses Matplotlib to draw a line chart similar to "examples/Figure_1.png". The title should be `Daily freeCodeCamp Forum Page Views 5/2016-12/2019`. The label on the x axis should be `Date` and the label on the y axis should be `Page Views`. -- Create a `draw_bar_plot` function that draws a bar chart similar to "examples/Figure_2.png". It should show average daily page views for each month grouped by year. The legend should show month labels and have a title of `Months`. On the chart, the label on the x axis should be `Years` and the label on the y axis should be `Average Page Views`. -- Create a `draw_box_plot` function that uses Seaborn to draw two adjacent box plots similar to "examples/Figure_3.png". These box plots should show how the values are distributed within a given year or month and how it compares over time. The title of the first chart should be `Year-wise Box Plot (Trend)` and the title of the second chart should be `Month-wise Box Plot (Seasonality)`. Make sure the month labels on bottom start at `Jan` and the x and y axis are labeled correctly. The boilerplate includes commands to prepare the data. +- Usa Pandas para importar los datos desde "fcc-forum-pageviews.csv". Establece el índice para la columna `date`. +- Limpia los datos filtrando los días en que las vistas de la página se encuentren en un alto de 2.5% del conjunto de datos o inferior de 2.5% del conjunto de datos. +- Crea una función `draw_line_plot` que use Matplotlib para dibujar un gráfico de línea similar a "examples/Figure_1.png". El título debería ser `Daily freeCodeCamp Forum Page Views 5/2016-12/2019`. La etiqueta en el eje x debería ser `Date` y la etiqueta en el eje y debería ser `Page Views`. +- Crea una función `draw_bar_plot` que dibuje un gráfico de barras similar a "examples/Figure_2.png". Debería mostrar el promedio diario de vistas a la página para cada mes agrupadas por año. La leyenda debería mostrar etiquetas mensuales y tener un título de `Months`. En la gráfica, la etiqueta en el eje x debería ser `Years` y la etiqueta en el eje y debería ser `Average Page Views`. +- Crea `draw_box_plot` una función que use Seaborn para dibujar dos puntos de caja adyacentes similar a "examples/Figure_3.png". Estos diagramas de caja deberían mostrar como los valores son distribuídos dentro de un año dado o mes y como se compara con el tiempo. El título del primer gráfico debería ser `Year-wise Box Plot (Trend)` y el título del segundo gráfico debería ser `Month-wise Box Plot (Seasonality)`. Asegurese que la etiqueta mes mes en la parte inferior empiece en `Jan` y los ejes x y y estén etiquetados correctamente. La plantilla incluye comandos para preparar los datos. Para cada gráfico, asegúrese de usar una copia de los datos. Las pruebas unitarias están escritas para en `test_module.py`. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/espanol/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md index 71cfa0f03b1..db89789c8b0 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md @@ -14,32 +14,32 @@ Desarrolla un juego multijugador en tiempo real en 2D utilizando HTML Canvas API - Usa nuestro proyecto inicial de Replit para completar tu proyecto. - Utiliza un constructor de sitios de tu elección para completar el proyecto. Asegúrate de incorporar todos los archivos de nuestro repositorio GitHub. -If you use Replit, follow these steps to set up the project: +Si usas Replit, sigue estos pasos para configurar el proyecto: -- Start by importing the project on Replit. -- Next, you will see a `.replit` window. -- Select `Use run command` and click the `Done` button. +- Empieza importando el proyecto en Replit. +- Siguiente, verás una ventana `.replit`. +- Seleccione `Use run command` y haga click en el botón `Done`. -When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field. +Cuando este hecho, asegurese que una demostración de trabajo de tu proyecto es alojado en algún lugar público. Luego envíe la URL esto en el campo Enlace Solution. Opcionalmente, también envía un enlace al código fuente de tu proyecto en el campo de enlace GitHub. # --instructions-- -Create a secure multiplayer game in which each player can move their avatar, there is at least one collectible item, and the rank of the players is calculated based on their score. +Crea un juego multijugador seguro en el cual cada jugador pueda mover su avatar, hay al menos un artículo coleccionable, y el rango de los jugadores es calculado basado en su puntuación. -For details consult the tests below. +Para detalles consulta las pruebas a continuación. -Make sure that your game is secure! Include these security measures: +Asegurate que tu juego es seguro! Incluya estas medidas de seguridad: -- The client should not be able to guess/sniff the MIME type -- Prevent XSS attacks -- Do not cache anything from the website in the client -- The headers say that the site is powered by `PHP 7.4.3` +- El cliente no debe ser capaz debe de acertar/escuchar el tipo MIME +- Prevenga ataques XSS +- No guarde la cache de nada desde el sitio web en el cliente +- Las cabeceras dicen el sitio es accionado por `PHP 7.4.3` -**Note**: `helmet@^3.21.3` is needed for the user stories. This means you will need to use the previous version of Helmet's docs, for information on how to achieve the user stories. +**Note**: `helmet@^3.21.3` es necesario para las historias de usuario. Esto significa que necesitarás usar la versión previa de la documentación de Helmet's, para información de como lograr las historias de usuario. # --hints-- -You can provide your own project, not the example URL. +Puedes proporcionar tu propio proyecto, no la URL de ejemplo. ```js (getUserInput) => { @@ -51,91 +51,91 @@ You can provide your own project, not the example URL. }; ``` -Multiple players can connect to a server and play. +Multiples jugadores pueden conectarse al servidor y jugar. ```js ``` -Each player has an avatar. +Cada jugador tiene un avatar. ```js ``` -Each player is represented by an object created by the `Player` class in `Player.mjs`. +Cada jugador es representado por un objeto creado por la clase `Player` en `Player.mjs`. ```js ``` -At a minimum, each player object should contain a unique `id`, a `score`, and `x` and `y` coordinates representing the player's current position. +Como mínimo, cada objeto jugador debería contener un único `id`, un `score`, y `x` y `y` coordenadas representando la posición actual del jugador. ```js ``` -The game has at least one type of collectible item. Complete the `Collectible` class in `Collectible.mjs` to implement this. +El juego tiene al menos un tipo de artículo coleccionable. Completa la clase `Collectible` en `Collectible.mjs` para implementar esto. ```js ``` -At a minimum, each collectible item object created by the `Collectible` class should contain a unique `id`, a `value`, and `x` and `y` coordinates representing the item's current position. +Como mínimo, cada artículo objeto coleccionable creado por la clase `Collectible` debería contener un único `id`, un `value`, y `x` y `y` coordenadas representando la posición actual del artículo. ```js ``` -Players can use the WASD and/or arrow keys to move their avatar. Complete the `movePlayer` method in `Player.mjs` to implement this. +Los jugadores pueden usar las teclas WASD y/o teclas flechas para mover su avatar. Completa el método `movePlayer` en `Player.mjs` para implementar esto. ```js ``` -The `movePlayer` method should accept two arguments: a string of "up", "down", "left", or "right", and a number for the amount of pixels the player's position should change. `movePlayer` should adjust the `x` and `y` coordinates of the player object it's called from. +El método `movePlayer` debería aceptar dos argumentos: una cadena de: "up", "down", "left", o "right", y un número para la cantidad de pixeles de la posición del jugador debería cambiar. `movePlayer` debería ajustar `x` y `y` coordenadas de el objeto jugador desde el cual es llamado. ```js ``` -The player's score should be used to calculate their rank among the other players. Complete the `calculateRank` method in the `Player` class to implement this. +El puntaje del jugador debe ser usado para calcular su posición entre los otros jugadores. Completa el método `calculateRank` en la clase `Player` para implementar esto. ```js ``` -The `calculateRank` method should accept an array of objects representing all connected players and return the string `Rank: currentRanking/totalPlayers`. For example, in a game with two players, if Player A has a score of 3 and Player B has a score of 5, `calculateRank` for Player A should return `Rank: 2/2`. +El método `calculateRank` debería aceptar un arreglo de objetos representando todos los jugadores conectados y devolver la cadena `Rank: currentRanking/totalPlayers`. Por ejemplo, en un juego con dos jugadores, si el Jugador A tiene un puntaje de 3 y Jugador B tiene un puntaje de 5, `calculateRank` para Jugador A debería devolver `Rank: 2/2`. ```js ``` -Players can collide with a collectible item. Complete the `collision` method in `Player.mjs` to implement this. +Jugadores pueden colisionar con un artículo coleccionable. Completa el método `collision` en `Player.mjs` para implementar esto. ```js ``` -The `collision` method should accept a collectible item's object as an argument. If the player's avatar intersects with the item, the `collision` method should return `true`. +El método `collision` debería aceptar un objeto de artículo coleccionable como un argumento. Si el avatar del jugador interseca con el artículo, el método `collision` debería devolver `true`. ```js ``` -All players are kept in sync. +Todos los jugadores se mantienen sincronizados. ```js ``` -Players can disconnect from the game at any time. +Los Jugadores pueden desconectarse del juego en cualquier momento. ```js ``` -Prevent the client from trying to guess / sniff the MIME type. +Previene al cliente de intentar escuchar/esnifar el tipo MIME. ```js async (getUserInput) => { @@ -145,7 +145,7 @@ async (getUserInput) => { }; ``` -Prevent cross-site scripting (XSS) attacks. +Prevenir ataques de secuencia de comandos de sitio cruzado 'cross-site scripting' (XSS). ```js async (getUserInput) => { @@ -155,7 +155,7 @@ async (getUserInput) => { }; ``` -Nothing from the website is cached in the client. +Nada desde el sitio web es guardado en cache en el cliente. ```js async (getUserInput) => { @@ -171,7 +171,7 @@ async (getUserInput) => { }; ``` -The headers say that the site is powered by "PHP 7.4.3" even though it isn't (as a security measure). +Las cabeceras dicen que el sitio es potenciado por "PHP 7.4.3" incluso cuado no es así (como una medida de seguridad). ```js async (getUserInput) => { diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md index e41d8a3d310..0a90ae55b6e 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md @@ -1,6 +1,6 @@ --- id: 587d8249367417b2b2512c3e -title: Disable Client-Side Caching with helmet.noCache() +title: Desactiva el cache del lado del cliente con helmet.noCache() challengeType: 2 forumTopicId: 301576 dashedName: disable-client-side-caching-with-helmet-nocache @@ -8,17 +8,17 @@ dashedName: disable-client-side-caching-with-helmet-nocache # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. +Como recordatorio, este proyecto está siendo construído en base al siguiente proyecto iniciado en Replit, o clonado desde GitHub. -If you are releasing an update for your website, and you want the users to always download the newer version, you can (try to) disable caching on client’s browser. It can be useful in development too. Caching has performance benefits, which you will lose, so only use this option when there is a real need. +Si esta lanzando una actualización para su sitio web, y quiere que los usuarios siempre descarguen la versión más reciente, puede (intentar) desactivar la cache en el navegador del cliente. Puede ser útil también en desarrollo. El almacenamiento de cache tiene beneficios de rendimiento, los cuales perderás, así que solo usa está opción cuando haya una necesidad real. # --instructions-- -Use the `helmet.noCache()` method on your server. +Usa el método `helmet.noCache()` en tu servidor. # --hints-- -helmet.noCache() middleware should be mounted correctly +helmet.noCache() middleware debe ser montado correctamente ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md index 39529606c74..501ebe000c1 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md @@ -1,6 +1,6 @@ --- id: 58a25bcff9fc0f352b528e7d -title: Hash and Compare Passwords Asynchronously +title: Hash y comparación de contraseñas asíncronicamente challengeType: 2 forumTopicId: 301578 dashedName: hash-and-compare-passwords-asynchronously @@ -8,9 +8,9 @@ dashedName: hash-and-compare-passwords-asynchronously # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. +Como recordatorio, este proyecto se ha construído en base al el siguiente proyecto en Replit, o clonado desde GitHub. -As hashing is designed to be computationally intensive, it is recommended to do so asynchronously on your server as to avoid blocking incoming connections while you hash. All you have to do to hash a password asynchronous is call +Como el As hashing esta diseñado para ser computacionalmente intensivo, es recomendado hacerlo de manera asyncrona en tu servidor para evitar conexiones entrantes mientras se efectúa el hash. Todo lo que debes hacer para hash una contraseña asíncrona es llamar ```js bcrypt.hash(myPlaintextPassword, saltRounds, (err, hash) => { @@ -20,9 +20,9 @@ bcrypt.hash(myPlaintextPassword, saltRounds, (err, hash) => { # --instructions-- -Add this hashing function to your server (we've already defined the variables used in the function for you to use) and log it to the console for you to see! At this point you would normally save the hash to your database. +Agrega esta función hashing a tu servidor (ya hemos definido las variables usadas en la función para tu uso) y registra en la consola para que las veas! En este punto tu normalmente guardarías el hash para tu base de datos. -Now when you need to figure out if a new input is the same data as the hash you would just use the compare function. +Ahora cuando tu necesites descubrir si una nueva entrada es la misma información que el hash simplemente usa la función de comparación. ```js bcrypt.compare(myPlaintextPassword, hash, (err, res) => { @@ -30,7 +30,7 @@ bcrypt.compare(myPlaintextPassword, hash, (err, res) => { }); ``` -Add this into your existing hash function (since you need to wait for the hash to complete before calling the compare function) after you log the completed hash and log 'res' to the console within the compare. You should see in the console a hash, and then 'true' is printed! If you change 'myPlaintextPassword' in the compare function to 'someOtherPlaintextPassword', then it should say false. +Añade esto dentro de tu función hash existente (ya que necesitas esperar por el hash se complete antes de llamar a la función compación) luego de registrar el hash completado y registrar 'res' a la consola dentro de la comparación. Deberías ver en la consola un hash, y luego se imprime 'true'! Si cambias 'myPlaintextPassword' en la función de comparación a 'someOtherPlaintextPassword', entonces este debería decir false. ```js bcrypt.hash('passw0rd!', 13, (err, hash) => { @@ -47,7 +47,7 @@ Envía tu página cuando creas que está correcto. # --hints-- -Async hash should be generated and correctly compared. +Hash asíncrono debería generarse y compararse correctamente. ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md index c1cd789591e..c3a6fc78242 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md @@ -1,6 +1,6 @@ --- id: 587d8247367417b2b2512c37 -title: Hide Potentially Dangerous Information Using helmet.hidePoweredBy() +title: Ocultar Información potencialmente Peligrosa usando helmet.hidePoweredBy() challengeType: 2 forumTopicId: 301580 dashedName: hide-potentially-dangerous-information-using-helmet-hidepoweredby @@ -8,13 +8,13 @@ dashedName: hide-potentially-dangerous-information-using-helmet-hidepoweredby # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. +Como recordatorio, este proyecto está siendo construído a base del proyecto iniciado en Replit, o clonado desde GitHub. -Hackers can exploit known vulnerabilities in Express/Node if they see that your site is powered by Express. `X-Powered-By: Express` is sent in every request coming from Express by default. Use the `helmet.hidePoweredBy()` middleware to remove the X-Powered-By header. +Los Hackers pueden aprovechar la vulnerabalidades conocidas en Express/Node, si ellos ven que tu sitio está siendo alimentado por Express. `X-Powered-By: Express` Se envía por defecto en cualquier solicitud proveniente de Express. Utilice el middleware de `helmet.hidePoweredBy()` para quitar la cabecera X-Powered-By. # --hints-- -helmet.hidePoweredBy() middleware should be mounted correctly +helmet.hidePoweredBy() middleware debería montarse correctamente ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md index a3716d673e8..ba4323b2213 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md @@ -20,7 +20,7 @@ Si usas Replit, sigue estos pasos para configurar el proyecto: - Siguiente, tu verás una ventana `.replit`. - Selecciona `Use run command`y cliquea el botón `Done`. -Cuando esté hecho, asegurate que una demo de tu trabajo este hospedado en un sitio público. Then submit the URL to it in the Solution Link field. +Cuando esté hecho, asegurate que una demo de tu trabajo este hospedado en un sitio público. Luego envía la URL en el campo Solution Link. Helmet ayuda asegurar tus aplicaciones Express apps configurando varios encabezados HTTP. diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md index 2ec2f36fb95..1ba0707afd8 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md @@ -1,7 +1,7 @@ --- id: 587d8247367417b2b2512c39 title: >- - Mitigate the Risk of Cross Site Scripting (XSS) Attacks with helmet.xssFilter() + Mitigar el Riesgo de Ataques de Secuencia de Comandos Cruzados de Sitio (XSS) con helmet.xssFilter() challengeType: 2 forumTopicId: 301583 dashedName: mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet-xssfilter @@ -9,23 +9,23 @@ dashedName: mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet-xs # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. +Como recordatorio, este proyectoesta siendo contruído al siguiente proyecto inicial en Replit, o clonado desde GitHub. -Cross-site scripting (XSS) is a frequent type of attack where malicious scripts are injected into vulnerable pages, with the purpose of stealing sensitive data like session cookies, or passwords. +Secuencias de Comando de Sitio-Cruzado (XSS) es un ataque de tipo frecuente donde instrucciones maliciosas son insertadas dentro de páginas vulnerables, con el propósito de robar información sensible como información almacenada de sesión (cookies), o contraseñas. -The basic rule to lower the risk of an XSS attack is simple: “Never trust user’s input”. As a developer you should always sanitize all the input coming from the outside. This includes data coming from forms, GET query urls, and even from POST bodies. Sanitizing means that you should find and encode the characters that may be dangerous e.g. <, >. +La regla básica para disminuir el riesgo de un ataque XSS es simple: “Nunca confie en la entrada del usuario”. Como desarrollador siempre deberías limpiar toda la información que provenga desde el exterior. Esto incluye datos provenientes de formularios, consultas urls GET, e incluso de cuerpos POST. Sanear significa que tu deberías encontrar y los caracteres que puedan ser peligrosos por ej.: <, >. -Modern browsers can help mitigating the risk by adopting better software strategies. Often these are configurable via http headers. +Navegadores actuales pueden ayudar a mitigar el riesgo mediante la adopción de mejores estrategias de software. A menudo esto es configurable via cabeceras http. -The X-XSS-Protection HTTP header is a basic protection. The browser detects a potential injected script using a heuristic filter. If the header is enabled, the browser changes the script code, neutralizing it. It still has limited support. +La cabecera X-XSS-Protection HTTP es una protección básica. El navegador detecta una pontencial sentencia maliciosa insertada usando un filtro heurístico. Si la cabecera esta habilitada, el navegador cambia el código de la sentencia maliciosa, neutralizándola. Todavía tiene un soporte limitado. # --instructions-- -Use `helmet.xssFilter()` to sanitize input sent to your server. +Usa `helmet.xssFilter()` para sanear la entrada envíada a su servidor. # --hints-- -helmet.xssFilter() middleware should be mounted correctly +helmet.xssFilter() middleware debe ser montado correctamente ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md index aaf3167793c..29ca234e0a3 100644 --- a/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md +++ b/curriculum/challenges/espanol/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md @@ -1,6 +1,6 @@ --- id: 587d8248367417b2b2512c3b -title: Prevent IE from Opening Untrusted HTML with helmet.ieNoOpen() +title: Evitar que IE abra HTML no confiable con helmet.ieNoOpen() challengeType: 2 forumTopicId: 301584 dashedName: prevent-ie-from-opening-untrusted-html-with-helmet-ienoopen @@ -8,17 +8,17 @@ dashedName: prevent-ie-from-opening-untrusted-html-with-helmet-ienoopen # --description-- -As a reminder, this project is being built upon the following starter project on Replit, or cloned from GitHub. +Como recordatorio, este proyecto está siendo construido a la base del proyecto iniciado con Replit, o clonado desde Github. -Some web applications will serve untrusted HTML for download. Some versions of Internet Explorer by default open those HTML files in the context of your site. This means that an untrusted HTML page could start doing bad things in the context of your pages. This middleware sets the X-Download-Options header to noopen. This will prevent IE users from executing downloads in the trusted site’s context. +Algunas aplicaciones web servirán HTML no confiable en la descarga. Algunas versiones de Internet Explorer por defecto abren estos archivos HTML en el contexto de tu sitio web. Esto significa que una página HTML no confiable podría haber empezado a hacer cosas malas en el contenido de tus páginas. Este middleware ajusta la cabecera X-Download-Options en noopen. Esto evitará que los usuarios IE ejecuten descargas en el contenido seguro del sitio web. # --instructions-- -Use the `helmet.ieNoOpen()` method on your server. +Usa el método `helmet.ieNoOpen()` en tu servidor. # --hints-- -helmet.ieNoOpen() middleware should be mounted correctly +helmet.ieNoOpen() middleware debería montarse correctamente ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/remove-an-element-from-a-max-heap.md b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/remove-an-element-from-a-max-heap.md index f1da0a28a1a..8ba5b8b11ec 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/remove-an-element-from-a-max-heap.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/data-structures/remove-an-element-from-a-max-heap.md @@ -1,6 +1,6 @@ --- id: 587d825b367417b2b2512c8b -title: Remove an Element from a Max Heap +title: Elimina un elemento de un montón máximo challengeType: 1 forumTopicId: 301710 dashedName: remove-an-element-from-a-max-heap @@ -8,21 +8,21 @@ dashedName: remove-an-element-from-a-max-heap # --description-- -Ahora que podemos añadir elementos a nuestra pila veamos cómo podemos eliminar los elementos. Quitar e insertar elementos requieren una lógica similar. En un montón máximo normalmente querrá eliminar el mayor valor, por lo que esto implica simplemente extraerlo de la raíz de nuestro árbol. This will break the heap property of our tree, so we must reestablish it in some way. Typically, for a max heap this is done in the following way: +Ahora que podemos añadir elementos a nuestra pila veamos cómo podemos eliminar los elementos. Quitar e insertar elementos requieren una lógica similar. En un montón máximo normalmente querrá eliminar el mayor valor, por lo que esto implica simplemente extraerlo de la raíz de nuestro árbol. Esto romperá la propiedad pila de nuestro árbol, entonces debemos reestablecerla en alguna manera. Normalmente, para un apilado máximo esto se hace de la siguiente manera:
    -
  1. Move the last element in the heap into the root position.
  2. +
  3. Mueve el último elemento en la pila en la posición raíz.
  4. Si cualquiera de los dos hijos de la raíz es mayor que ella, intercambia la raíz con el hijo de mayor valor.
  5. -
  6. Continue swapping until the parent is greater than both children or you reach the last level in the tree.
  7. +
  8. Continúe intercambiando hasta que el padre sea mayor que ambos hijos o alcance el último nivel en el árbol.
# --instructions-- -Instructions: Add a method to our max heap called `remove`. This method should return the greatest value that has been added to our max heap and remove it from the heap. It should also reorder the heap so the heap property is maintained. After removing an element, the next greatest element remaining in the heap should become the root. +Instrucciones: Agrega un método a nuestro apilado máximo llamado `remove`. Este método debe devolver el mayor valor que ha sido agregado a nuestra pila máxima y eliminarlo de la pila. También debería reordenar la pila para que la propiedad de la pila sea mantenida. Luego de remover un elemento, el siguiente elemento más grande que queda en la pila debe convertirse en la raíz. # --hints-- -The `MaxHeap` data structure should exist. +La estructura de datos `MaxHeap` debería existir. ```js assert( @@ -36,7 +36,7 @@ assert( ); ``` -`MaxHeap` should have a method called `print`. +`MaxHeap` debería tener un método llamado `print`. ```js assert( @@ -52,7 +52,7 @@ assert( ); ``` -`MaxHeap` should have a method called `insert`. +`MaxHeap` debería tener un método llamado `insert`. ```js assert( @@ -68,7 +68,7 @@ assert( ); ``` -`MaxHeap` should have a method called `remove`. +`MaxHeap` debería tener un método llamado `remove`. ```js assert( @@ -84,7 +84,7 @@ assert( ); ``` -The `remove` method should remove the greatest element from the max heap while maintaining the max heap property. +El método `remove` debería remover el mayor elemento de la pila máxima mientras se mantiene la propiedad máxima de la pila. ```js function isHeap(arr, i, n) { diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/amicable-pairs.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/amicable-pairs.md index 9b582130a18..bc91281adf1 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/amicable-pairs.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/amicable-pairs.md @@ -1,6 +1,6 @@ --- id: 5949b579404977fbaefcd737 -title: Amicable pairs +title: Pares amigables challengeType: 1 forumTopicId: 302225 dashedName: amicable-pairs @@ -8,18 +8,18 @@ dashedName: amicable-pairs # --description-- -Two integers $N$ and $M$ are said to be amicable pairs if $N \\neq M$ and the sum of the proper divisors of $N$ ($\\mathrm{sum}(\\mathrm{propDivs}(N))$) $= M$ as well as $\\mathrm{sum}(\\mathrm{propDivs}(M)) = N$. +Se dice que dos enteros $N$ y $M$ son pares amigables si $N \\neq M$ y la suma de los divisores apropiados de $N$ ($\\mathrm{sum}(\\mathrm{propDivs}(N))$) $= M$, así como $\\mathrm{sum}(\\mathrm{propDivs}(M)) = N$. **Por ejemplo:** -**1184** and **1210** are an amicable pair, with proper divisors: +**1184** y **1210** son un par amigable, con los divisores adecuados:
    -
  • 1, 2, 4, 8, 16, 32, 37, 74, 148, 296, 592 and
  • -
  • 1, 2, 5, 10, 11, 22, 55, 110, 121, 242, 605 respectively.
  • +
  • 1, 2, 4, 8, 16, 32, 37, 74, 148, 296, 592 y
  • +
  • 1, 2, 5, 10, 11, 22, 55, 110, 121, 242, 605 respectivamente.
-The sum of the divisors for the first value, **1184**, is **1210** and the sum of the divisors for the second value, **1210**, is **1184**. +La suma de los divisores para el primer valor, **1184**, es **1210** y la suma de los divisores para el segundo valor, **1210**, es **1184**. # --instructions-- diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/circles-of-given-radius-through-two-points.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/circles-of-given-radius-through-two-points.md index 2254ea4c44a..1d01438f696 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/circles-of-given-radius-through-two-points.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/circles-of-given-radius-through-two-points.md @@ -1,6 +1,6 @@ --- id: 5951815dd895584b06884620 -title: Circles of given radius through two points +title: Círculos del radio dado a través de dos puntos challengeType: 1 forumTopicId: 302231 dashedName: circles-of-given-radius-through-two-points @@ -8,30 +8,30 @@ dashedName: circles-of-given-radius-through-two-points # --description-- -Given two points on a plane and a radius, usually two circles of given radius can be drawn through the points. +Dados dos puntos sobre un plano y un radio, usualmente dos círculos de un radio dado pueden ser dibujados a través de puntos. -**Exceptions:** +**Excepciones:**
    -
  • A radius of zero should be treated as never describing circles (except in the case where the points are coincident).
  • -
  • If the points are coincident then an infinite number of circles with the point on their circumference can be drawn, unless the radius is equal to zero as well which then collapses the circles to a point.
  • -
  • If the points form a diameter then return a single circle.
  • -
  • If the points are too far apart then no circles can be drawn.
  • +
  • Un radio de cero debería ser tratado como como jamás describiendo círculos (excepto en el caso donde los puntos son coincidentes).
  • +
  • Si los puntos son coincidentes entonces un infinito número de círculos con el punto sobre su circunferencia puede ser dibujado, a menos que el radio sea igual a cero lo que tambíen luego colapsa los círculos a un punto.
  • +
  • Si los puntos forman un diámetro entonces devuelve un solo círculo.
  • +
  • Si los puntos están demasiado lejos entonces no se pueden dibujar círculos.
# --instructions-- -Implement a function that takes two points and a radius and returns the two circles through those points. For each resulting circle, provide the coordinates for the center of each circle rounded to four decimal digits. Return each coordinate as an array, and coordinates as an array of arrays. +Implementa una función que toma dos puntos y un radio y devuelve los dos círculos a través de dichos puntos. Para cada círculo resultante, proporciona las coordenadas para el centro de cada círculo redondeado a cuatro dígitos decimales. Devuelve cada coordenada como un arreglo, y coordenadas como un arreglo de arreglos. -**For edge cases, return the following:** +**Para casos de bordes, devuelve lo siguiente:**
    -
  • If points are on the diameter, return one point. If the radius is also zero however, return "Radius Zero".
  • -
  • If points are coincident, return "Coincident point. Infinite solutions".
  • -
  • If points are farther apart than the diameter, return "No intersection. Points further apart than circle diameter".
  • +
  • Si los puntos están en el diámetro, devuelve un punto. Sin embargo si el radio también es cero, devuelve "Radius Zero".
  • +
  • Si los puntos son coincidentes, devuelve "Coincident point. Infinite solutions".
  • +
  • Si los puntos estan demasiados separados que el diámetro, devuelve "No intersection. Points further apart than circle diameter".
-**Sample inputs:** +**Entradas de muestra:**
      p1                p2           r
 0.1234, 0.9876    0.8765, 0.2345    2.0
@@ -43,37 +43,37 @@ Implement a function that takes two points and a radius and returns the two circ
 
 # --hints--
 
-`getCircles` should be a function.
+`getCircles` debería ser una función.
 
 ```js
 assert(typeof getCircles === 'function');
 ```
 
-`getCircles([0.1234, 0.9876], [0.8765, 0.2345], 2.0)` should return `[[1.8631, 1.9742], [-0.8632, -0.7521]]`.
+`getCircles([0.1234, 0.9876], [0.8765, 0.2345], 2.0)` debería devolver `[[1.8631, 1.9742], [-0.8632, -0.7521]]`.
 
 ```js
 assert.deepEqual(getCircles(...testCases[0]), answers[0]);
 ```
 
-`getCircles([0.0000, 2.0000], [0.0000, 0.0000], 1.0)` should return `[0, 1]`
+`getCircles([0.0000, 2.0000], [0.0000, 0.0000], 1.0)` debería devolver `[0, 1]`
 
 ```js
 assert.deepEqual(getCircles(...testCases[1]), answers[1]);
 ```
 
-`getCircles([0.1234, 0.9876], [0.1234, 0.9876], 2.0)` should return `Coincident point. Infinite solutions`
+`getCircles([0.1234, 0.9876], [0.1234, 0.9876], 2.0)` debería devolver `Coincident point. Infinite solutions`
 
 ```js
 assert.deepEqual(getCircles(...testCases[2]), answers[2]);
 ```
 
-`getCircles([0.1234, 0.9876], [0.8765, 0.2345], 0.5)` should return `No intersection. Points further apart than circle diameter`
+`getCircles([0.1234, 0.9876], [0.8765, 0.2345], 0.5)` debería devolver `No intersection. Points further apart than circle diameter`
 
 ```js
 assert.deepEqual(getCircles(...testCases[3]), answers[3]);
 ```
 
-`getCircles([0.1234, 0.9876], [0.1234, 0.9876], 0.0)` should return `Radius Zero`
+`getCircles([0.1234, 0.9876], [0.1234, 0.9876], 0.0)` debería devolver `Radius Zero`
 
 ```js
 assert.deepEqual(getCircles(...testCases[4]), answers[4]);
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
index 83aaa94d7f3..6eca8fa1bd6 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -1,6 +1,6 @@
 ---
 id: 59694356a6e7011f7f1c5f4e
-title: Deal cards for FreeCell
+title: Reparte cartas para FreeCell
 challengeType: 1
 forumTopicId: 302246
 dashedName: deal-cards-for-freecell
@@ -8,11 +8,11 @@ dashedName: deal-cards-for-freecell
 
 # --description--
 
-*FreeCell* is the solitaire card game that Paul Alfille introduced to the PLATO system in 1978. Jim Horne, at Microsoft, changed the name to FreeCell and reimplemented the game for DOS, then Windows. This version introduced 32000 numbered deals.
+*FreeCell* es el juego de cartas solitario que Paul Alfille presentó para el sistema PLATO en 1978. Jim Horne, en Microsoft, cambió el nombre a FreeCell y reimplementó el juego para DOS, luego Windows. Esta version introdujo 32000 repartidas numeradas.
 
-As the game became popular, Jim Horne disclosed the algorithm, and other implementations of FreeCell began to reproduce the Microsoft deals. These deals are numbered from 1 to 32000. Newer versions from Microsoft have 1 million deals, numbered from 1 to 1000000; some implementations allow numbers outside that range.
+Como el juego se hizo popular, Jim Horne revelo el algoritmo, y otras implementaciones de FreeCell comenzaron a reproducir los turnos de Microsoft. Estos turnos son numerados desde 1 to 32000. Nuevas versiones de Microsoft tienen 1 million de turnos, numerados desde 1 a 1000000; algunas implementaciones permiten números fuera de ese rango.
 
-The algorithm uses this linear congruential generator from Microsoft C:
+El algoritmo usa este generador congruencial lineal de Microsoft C:
 
 
  • $state_{n + 1} \equiv 214013 \times state_n + 2531011 \pmod{2^{31}}$
  • @@ -23,21 +23,21 @@ The algorithm uses this linear congruential generator from Microsoft C: A continuación el algoritmo:
      -
    1. Seed the RNG with the number of the deal. -
    2. Create an array of 52 cards: Ace of Clubs, Ace of Diamonds, Ace of Hearts, Ace of Spades, 2 of Clubs, 2 of Diamonds, and so on through the ranks: Ace, 2, 3, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King. The array indexes are 0 to 51, with Ace of Clubs at 0, and King of Spades at 51.
    3. -
    4. Until the array is empty:
    5. -
    6. Choose a random card at index ≡ next random number (mod array length).
    7. +
    8. Sembrar la RNG con el número del turno. +
    9. Crea un arreglo de 52 cartas: As de Tréboles, As de Diamantes, As de Corazones, As de Espadas, 2 de Tréboles, 2 de Diamantes, y así sucesivamente por los rangos: As, 2, 3, 4, 5, 6, 7, 8, 9, 10, Sota, Reina, Rey. Los índices del arreglo son de 0 a 51, con As de Tréboles en 0, y Rey de Espadas al 51.
    10. +
    11. Hasta que el arreglo quede vacío:
    12. +
    13. Escoge una carta aleatoria al índice ≡ siguiente número aleatorio (mod array length).
      • -
      • Swap this random card with the last card of the array.
      • -
      • Remove this random card from the array. (Array length goes down by 1.)
      • -
      • Deal this random card.
      • +
      • Intercambia esta carta aleatoria con la última carta del arreglo.
      • +
      • Remueve esta carta aleatoria del arreglo. (Longitud del arreglo bajara en 1)
      • +
      • Reparte esta carta aleatoria.
      -
    14. Deal all 52 cards, face up, across 8 columns. The first 8 cards go in 8 columns, the next 8 cards go on the first 8 cards, and so on.
    15. +
    16. Reparte todas las 52 cartas, boca arriba, sobre 8 columnas. Las primeras 8 cartas van en 8 columnas, las siguientes 8 van sobre las primeras 8 cartas, y así sucesivamente.
    **Por ejemplo:** -**Order to deal cards** +**Ordena para repartir cartas**
     1  2  3  4  5  6  7  8
      9 10 11 12 13 14 15 16
    @@ -47,7 +47,7 @@ A continuación el algoritmo:
     41 42 43 44 45 46 47 48
     49 50 51 52
    -**Game #1** +**Juego #1** ```js [ @@ -77,35 +77,35 @@ A continuación el algoritmo: # --instructions-- -Write a function to take a deal number and deal cards in the same order as this algorithm. The function must return a two dimensional array representing the FreeCell board. +Escribe una función que tome un número de reparto y reparta las cartas en el mismo orden como este algoritmo. La función debe retornar un arreglo de dos dimensiones representando el tablero de FreeCell. # --hints-- -`dealFreeCell` should be a function. +`dealFreeCell` debe ser una función. ```js assert(typeof dealFreeCell === 'function'); ``` -`dealFreeCell(seed)` should return an object. +`dealFreeCell(seed)` debe devolver un objeto. ```js assert(typeof dealFreeCell(1) === 'object'); ``` -`dealFreeCell(seed)` should return an array of length 7. +`dealFreeCell(seed)` debe devolver un arreglo de tamaño 7. ```js assert(dealFreeCell(1).length === 7); ``` -`dealFreeCell(1)` should return an array identical to example "Game #1" +`dealFreeCell(1)` debería devolver un arreglo identico al ejemplo "Juego #1" ```js assert.deepEqual(dealFreeCell(1), game1); ``` -`dealFreeCell(617)` should return an array identical to example "Game #617" +`dealFreeCell(617)` debería devolver un arreglo identico al ejemplo "Juego #617" ```js assert.deepEqual(dealFreeCell(617), game617); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/factors-of-a-mersenne-number.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/factors-of-a-mersenne-number.md index 23502e37435..b22998364ea 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/factors-of-a-mersenne-number.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/factors-of-a-mersenne-number.md @@ -1,6 +1,6 @@ --- id: 598eea87e5cf4b116c3ff81a -title: Factors of a Mersenne number +title: Factores De Un Numero Mersenne challengeType: 1 forumTopicId: 302264 dashedName: factors-of-a-mersenne-number @@ -8,25 +8,25 @@ dashedName: factors-of-a-mersenne-number # --description-- -A Mersenne number is a number in the form of 2P-1. +Un número de Mersenne es un número en forma de 2P-1. -If `P` is prime, the Mersenne number may be a Mersenne prime. (If `P` is not prime, the Mersenne number is also not prime.) +Si `P` es primo, el número Mersenne puede ser un primo de Mersenne. (Si `P` no es primo, el número Mersenne tampoco es primo.) -In the search for Mersenne prime numbers it is advantageous to eliminate exponents by finding a small factor before starting a, potentially lengthy, Lucas-Lehmer test. +En la búsqueda de números primos de Mersenne es ventajoso eliminar exponentes encontrando un pequeño factor antes de comenzar a, potencialmente largo, Lucas-Lehmer test. -There are very efficient algorithms for determining if a number divides 2P-1 (or equivalently, if 2P mod (the number) = 1). +Hay algoritmos muy eficientes para determinar si un número divide 2P-1 (o equivalentemente, if 2P mod (el número) = 1). -Some languages already have built-in implementations of this exponent-and-mod operation (called modPow or similar). +Algunos lenguajes ya tienen implementaciones integradas de esta operación exponent-and-mod (denominada modPow o similar). -The following is how to implement this modPow yourself: +Lo siguiente es cómo implementar este modPow por ti mismo: -For example, let's compute 223 mod 47. +Por ejemplo, calculemos 223 mod 47. -Convert the exponent 23 to binary, you get 10111. Starting with square = 1, repeatedly square it. +Convierte el exponente 23 a binario, obtén 10111. Empieza con square = 1, repetidamente al cuadrado. -Remove the top bit of the exponent, and if it's 1 multiply `square` by the base of the exponentiation (2), then compute square modulo 47. +Elimina el pedazo superior del exponente, y si es 1 multiplicar `square` por la base de la exponenciación (2) luego calcula square modulo 47. -Use the result of the modulo from the last step as the initial value of `square` in the next step: +Usa el resultado del modulo desde el ultimo paso como el valor inicial de `square` en el proximo paso:
    Remove   Optional
     square        top bit  multiply by 2  mod 47
    diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/farey-sequence.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/farey-sequence.md
    index 71962b17362..129d6ac0c55 100644
    --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/farey-sequence.md
    +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/farey-sequence.md
    @@ -1,6 +1,6 @@
     ---
     id: 59c3ec9f15068017c96eb8a3
    -title: Farey sequence
    +title: Secuencia Farey
     challengeType: 1
     forumTopicId: 302266
     dashedName: farey-sequence
    @@ -8,18 +8,18 @@ dashedName: farey-sequence
     
     # --description--
     
    -The Farey sequence Fn of order `n` is the sequence of completely reduced fractions between `0` and `1` which, when in lowest terms, have denominators less than or equal to `n`, arranged in order of increasing size.
    +La secuencia Farey Fn de orden `n` es la secuencia de fracciones completamente reducidas entre `0` y `1` por lo cual, cuando está en términos más bajos, tiene denominadores menores o iguales a `n`, ordenados en orden de tamaño creciente.
     
    -The *Farey sequence* is sometimes incorrectly called a *Farey series*.
    +La *secuencia Farey * es a veces incorrectamente llamada *Farey series*.
     
    -Each Farey sequence:
    +Cada secuencia Farey:
     
     
      -
    • starts with the value 0, denoted by the fraction $ \frac{0}{1} $
    • -
    • ends with the value 1, denoted by the fraction $ \frac{1}{1}$.
    • +
    • inicia con el valor de 0, denotado por la fracción $ \frac{0}{1} $
    • +
    • termina con el valor de 1, denotado por la fracción $ \frac{1}{1}$.
    -The Farey sequences of orders `1` to `5` are: +Las secuencias de Farey de orden `1` a `5` son:
    • ${\bf\it{F}}_1 = \frac{0}{1}, \frac{1}{1}$
    • @@ -31,35 +31,35 @@ The Farey sequences of orders `1` to `5` are: # --instructions-- -Write a function that returns the Farey sequence of order `n`. The function should have one parameter that is `n`. It should return the sequence as an array. +Escribe una función que devuelve la secuencia Farey de orden `n`. La función debería tener un parámetro que es `n`. Este debería devolver la secuencia como un arreglo. # --hints-- -`farey` should be a function. +`farey` debería ser una función. ```js assert(typeof farey === 'function'); ``` -`farey(3)` should return an array +`farey(3)` debería devolver un arreglo ```js assert(Array.isArray(farey(3))); ``` -`farey(3)` should return `['0/1','1/3','1/2','2/3','1/1']` +`farey(3)` debería devolver `['0/1','1/3','1/2','2/3','1/1']` ```js assert.deepEqual(farey(3),['0/1', '1/3', '1/2', '2/3', '1/1']); ``` -`farey(4)` should return `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']` +`farey(4)` debería devolver `['0/1','1/4','1/3','1/2','2/3','3/4','1/1']` ```js assert.deepEqual(farey(4), ['0/1', '1/4', '1/3', '1/2', '2/3', '3/4', '1/1']); ``` -`farey(5)` should return `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']` +`farey(5)` debería devolver `['0/1','1/5','1/4','1/3','2/5','1/2','3/5','2/3','3/4','4/5','1/1']` ```js assert.deepEqual(farey(5), [ diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/gamma-function.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/gamma-function.md index 91b6b01786a..8a10751e8c6 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/gamma-function.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/gamma-function.md @@ -1,6 +1,6 @@ --- id: 5a23c84252665b21eecc7e76 -title: Gamma function +title: Función Gamma challengeType: 1 forumTopicId: 302271 dashedName: gamma-function @@ -8,51 +8,51 @@ dashedName: gamma-function # --description-- -Implement one algorithm (or more) to compute the Gamma function (in the real field only). +Implementar un algoritmo (o más) para calcular la función Gamma (en el campo real únicamente). -The Gamma function can be defined as: +La función Gamma puede ser definida como:
      $\Gamma(x) = \displaystyle\int_0^\infty t^{x-1}e^{-t} dt$
      # --hints-- -`gamma` should be a function. +`gamma` debería ser una función. ```js assert(typeof gamma == 'function'); ``` -`gamma(.1)` should return a number. +`gamma(.1)` debería devolver un número. ```js assert(typeof gamma(0.1) == 'number'); ``` -`gamma(.1)` should return `9.513507698668736`. +`gamma(.1)` debería devolver `9.513507698668736`. ```js assert.equal(round(gamma(0.1)), round(9.513507698668736)); ``` -`gamma(.2)` should return `4.590843711998803`. +`gamma(.2)` debería devolver `4.590843711998803`. ```js assert.equal(round(gamma(0.2)), round(4.590843711998803)); ``` -`gamma(.3)` should return `2.9915689876875904`. +`gamma(.3)` debería devolver `2.9915689876875904`. ```js assert.equal(round(gamma(0.3)), round(2.9915689876875904)); ``` -`gamma(.4)` should return `2.218159543757687`. +`gamma(.4)` debería devolver `2.218159543757687`. ```js assert.equal(round(gamma(0.4)), round(2.218159543757687)); ``` -`gamma(.5)` should return `1.7724538509055159`. +`gamma(.5)` debería devolver `1.7724538509055159`. ```js assert.equal(round(gamma(0.5)), round(1.7724538509055159)); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/knapsack-problem-0-1.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/knapsack-problem-0-1.md index ab84dea2631..68854e1a86b 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/knapsack-problem-0-1.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/knapsack-problem-0-1.md @@ -1,6 +1,6 @@ --- id: 5a23c84252665b21eecc7ed1 -title: Knapsack problem/0-1 +title: Problema de la mochila/0-1 challengeType: 1 forumTopicId: 323649 dashedName: knapsack-problem0-1 @@ -8,17 +8,17 @@ dashedName: knapsack-problem0-1 # --description-- -The 0-1 knapsack problem is defined as follows: +El problema de la mochila 0-1 se define de la siguiente manera: -You are given an array of objects representing items to be put in a knapsack. The objects have 3 attributes: name, weight, and value. The items need to be selected so that the total weight does not exceed the maximum weight and the value is maximized. +Se le da un arreglo de objetos representando elementos a ser puestos en una mochila. Los objetos tienen 3 atributos: nombre, peso, y valor. Los elementos requieren ser seleccionados para que el peso total no exceda el peso máximo y el valor sea maximizado. # --instructions-- -Write a function to solve the knapsack problem. The function is given the array of objects and the maximum weight as parameters. It should return the maximum total value possible. +Escribe una función para resolver el problema de la mochila. A la función se le da un arreglo de objetos y el peso máximo como parámetros. Debería devolver el valor total máximo posible. # --hints-- -`knapsack([{ name:'map', weight:9, value:150 }, { name:'compass', weight:13, value:35 }, { name:'water', weight:153, value:200 }, { name:'sandwich', weight:50, value:160 }, { name:'glucose', weight:15, value:60 }, { name:'tin', weight:68, value:45 }, { name:'banana', weight:27, value:60 }, { name:'apple', weight:39, value:40 }], 100)` should return `405`. +`knapsack([{ name:'map', weight:9, value:150 }, { name:'compass', weight:13, value:35 }, { name:'water', weight:153, value:200 }, { name:'sandwich', weight:50, value:160 }, { name:'glucose', weight:15, value:60 }, { name:'tin', weight:68, value:45 }, { name:'banana', weight:27, value:60 }, { name:'apple', weight:39, value:40 }], 100)` debería devolver `405`. ```js assert.equal( @@ -39,7 +39,7 @@ assert.equal( ); ``` -`knapsack([{ name:'map', weight:9, value:150 }, { name:'compass', weight:13, value:35 }, { name:'water', weight:153, value:200 }, { name:'sandwich', weight:50, value:160 }, { name:'glucose', weight:15, value:60 }, { name:'tin', weight:68, value:45 }, { name:'banana', weight:27, value:60 }, { name:'apple', weight:39, value:40 }], 200)` should return `510`. +`knapsack([{ name:'map', weight:9, value:150 }, { name:'compass', weight:13, value:35 }, { name:'water', weight:153, value:200 }, { name:'sandwich', weight:50, value:160 }, { name:'glucose', weight:15, value:60 }, { name:'tin', weight:68, value:45 }, { name:'banana', weight:27, value:60 }, { name:'apple', weight:39, value:40 }], 200)` debería devolver `510`. ```js assert.equal( @@ -60,7 +60,7 @@ assert.equal( ); ``` -`knapsack([{ name:'cheese', weight:23, value:30 }, { name:'beer', weight:52, value:10 }, { name:'suntan cream', weight:11, value:70 }, { name:'camera', weight:32, value:30 }, { name:'T-shirt', weight:24, value:15 }, { name:'trousers', weight:48, value:10 }, { name:'umbrella', weight:73, value:40 }], 100)` should return `145`. +`knapsack([{ name:'cheese', weight:23, value:30 }, { name:'beer', weight:52, value:10 }, { name:'suntan cream', weight:11, value:70 }, { name:'camera', weight:32, value:30 }, { name:'T-shirt', weight:24, value:15 }, { name:'trousers', weight:48, value:10 }, { name:'umbrella', weight:73, value:40 }], 100)` debería devolver `145`. ```js assert.equal( @@ -80,7 +80,7 @@ assert.equal( ); ``` -`knapsack([{ name:'cheese', weight:23, value:30 }, { name:'beer', weight:52, value:10 }, { name:'suntan cream', weight:11, value:70 }, { name:'camera', weight:32, value:30 }, { name:'T-shirt', weight:24, value:15 }, { name:'trousers', weight:48, value:10 }, { name:'umbrella', weight:73, value:40 }], 200)` should return `185`. +`knapsack([{ name:'cheese', weight:23, value:30 }, { name:'beer', weight:52, value:10 }, { name:'suntan cream', weight:11, value:70 }, { name:'camera', weight:32, value:30 }, { name:'T-shirt', weight:24, value:15 }, { name:'trousers', weight:48, value:10 }, { name:'umbrella', weight:73, value:40 }], 200)` debería devolver `185`. ```js assert.equal( @@ -100,7 +100,7 @@ assert.equal( ); ``` -`knapsack([{ name:'waterproof trousers', weight:42, value:70 }, { name:'waterproof overclothes', weight:43, value:75 }, { name:'note-case', weight:22, value:80 }, { name:'sunglasses', weight:7, value:20 }, { name:'towel', weight:18, value:12 }, { name:'socks', weight:4, value:50 }, { name:'book', weight:30, value:10 }], 100)` should return `237`. +`knapsack([{ name:'waterproof trousers', weight:42, value:70 }, { name:'waterproof overclothes', weight:43, value:75 }, { name:'note-case', weight:22, value:80 }, { name:'sunglasses', weight:7, value:20 }, { name:'towel', weight:18, value:12 }, { name:'socks', weight:4, value:50 }, { name:'book', weight:30, value:10 }], 100)` debería devolver `237`. ```js assert.equal( @@ -120,7 +120,7 @@ assert.equal( ); ``` -`knapsack([{ name:'waterproof trousers', weight:42, value:70 }, { name:'waterproof overclothes', weight:43, value:75 }, { name:'note-case', weight:22, value:80 }, { name:'sunglasses', weight:7, value:20 }, { name:'towel', weight:18, value:12 }, { name:'socks', weight:4, value:50 }, { name:'book', weight:30, value:10 }], 200)` should return `317`.' +`knapsack([{ name:'waterproof trousers', weight:42, value:70 }, { name:'waterproof overclothes', weight:43, value:75 }, { name:'note-case', weight:22, value:80 }, { name:'sunglasses', weight:7, value:20 }, { name:'towel', weight:18, value:12 }, { name:'socks', weight:4, value:50 }, { name:'book', weight:30, value:10 }], 200)` debería devolver `317`.' ```js assert.equal( diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/knapsack-problem-bounded.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/knapsack-problem-bounded.md index 2af68ccd123..d845381a7b6 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/knapsack-problem-bounded.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/knapsack-problem-bounded.md @@ -1,6 +1,6 @@ --- id: 5a23c84252665b21eecc7ed2 -title: Knapsack problem/Bounded +title: Problema de la mochila limitada challengeType: 1 forumTopicId: 323652 dashedName: knapsack-problembounded @@ -8,13 +8,13 @@ dashedName: knapsack-problembounded # --description-- -The bounded knapsack problem is defined as follows: +El problema de la mochila limitada se define de la siguiente manera: -You are given an array of objects representing items to be put in a knapsack. The objects have 4 attributes: name, pieces (the number of the particular item), weight, and value. The items need to be selected so that the total weight does not exceed the maximum weight and the value is maximized. Keep in mind that each item can appear between 0 and `pieces` times. +Se le da un arreglo de objetos representando elementos para ser puestos en una mochila. Los objetos tienen 4 atributos: nombre, piezas (el número de el elemento particular), peso, y valor. Los elementos deben ser seleccionados para que el peso total no exceda el peso máximo y el valor sea maximizado. Ten en cuenta que cada elemento puede aparecer entre 0 y `pieces` veces. # --instructions-- -Write a function to solve the knapsack problem. The function is given the array of objects and the maximum weight as parameters. It should return the maximum total value possible. +Escribe una función para resolver el problema de la mochila. A la función se le da un arreglo de objetos y el peso máximo como parámetros. Debería devolver el valor total máximo posible. # --hints-- @@ -44,7 +44,7 @@ assert.equal( ); ``` -`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 400)` should return `875`. +`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 400)` debería devolver `875`. ```js assert.equal( @@ -70,7 +70,7 @@ assert.equal( ); ``` -`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 500)` should return `1015`. +`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 500)` debería devolver `1015`. ```js assert.equal( @@ -96,7 +96,7 @@ assert.equal( ); ``` -`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 600)` should return `1120`. +`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 600)` debería devolver `1120`. ```js assert.equal( @@ -122,7 +122,7 @@ assert.equal( ); ``` -`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 700)` should return `1225`. +`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 700)` debería devolver `1225`. ```js assert.equal( diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/levenshtein-distance.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/levenshtein-distance.md index d38c45de8b8..afd3afe1df4 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/levenshtein-distance.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/levenshtein-distance.md @@ -1,6 +1,6 @@ --- id: 5e4ce2eaac708cc68c1df260 -title: Levenshtein distance +title: Distancia Levenshtein challengeType: 1 forumTopicId: 385264 dashedName: levenshtein-distance @@ -8,71 +8,71 @@ dashedName: levenshtein-distance # --description-- -In information theory and computer science, the **Levenshtein distance** is a metric for measuring the amount of difference between two sequences (i.e. an edit distance). The Levenshtein distance between two strings is defined as the minimum number of edits needed to transform one string into the other, with the allowable edit operations being insertion, deletion, or substitution of a single character. +En teoría de información ciencias de computación, la distancia **Levenshtein ** es una métrica para medir la cantidad de diferencia entre dos secuencias (p.ej. una distancia de edición). La distancia Levenshtein entre dos cadenas se define como el número mínimo de ediciones necesarias para transformar una cadena en la otra, con las operaciones de edición permitidas siendo inserción, borrado o sustitución de un solo carácter. Ejemplo: -The Levenshtein distance between "**kitten**" and "**sitting**" is 3, since the following three edits change one into the other, and there isn't a way to do it with fewer than three edits: +La distancia de Levenshtein entre "**gatito**" y "**sentado**" es 3, ya que las siguientes tres ediciones cambian una a otra, y no hay una manera de hacerlo con menos de tres ediciones:
        -
      • kitten   sitten    (substitution of 'k' with 's')
      • -
      • sitten   sittin    (substitution of 'e' with 'i')
      • -
      • sittin   sitting    (insert 'g' at the end).
      • +
      • kitten s (sustitución de 'k' por 's')
      • +
      • sitten sittin (sustitución de 'e' por 'i')
      • +
      • sittin sitting (insertar 'g' al final).
      -*The Levenshtein distance between "**rosettacode**", "**raisethysword**" is **8**.* +*La distancia de Levenshtein entre "**rosettacode**", "**raisethysword**" es **8**.* -*The distance between two strings is same as that when both strings are reversed.* +*La distancia entre dos cadenas es la misma que cuando ambas cadenas son invertidas.* # --instructions-- -Write a function that returns the Levenshtein distance between two strings given as parameters. +Escribe una función que retorne la distancia de Levenshtein entre dos cadenas dadas como parámetros. # --hints-- -`levenshtein` should be a function. +`levenshtein` debe ser una función. ```js assert(typeof levenshtein == 'function'); ``` -`levenshtein("mist", "dist")` should return a number. +`levenshtein("mist", "dist")` debería devolver un número. ```js assert(typeof levenshtein('mist', 'dist') == 'number'); ``` -`levenshtein("mist", "dist")` should return `1`. +`levenshtein("mist", "dist")` debería devolver `1`. ```js assert.equal(levenshtein('mist', 'dist'), 1); ``` -`levenshtein("tier", "tor")` should return `2`. +`levenshtein("tier", "tor")` debería devolver `2`. ```js assert.equal(levenshtein('tier', 'tor'), 2); ``` -`levenshtein("kitten", "sitting")` should return `3`. +`levenshtein("kitten", "sitting")` debería devolver `3`. ```js assert.equal(levenshtein('kitten', 'sitting'), 3); ``` -`levenshtein("stop", "tops")` should return `2`. +`levenshtein("stop", "tops")` debería devolver `2`. ```js assert.equal(levenshtein('stop', 'tops'), 2); ``` -`levenshtein("rosettacode", "raisethysword")` should return `8`. +`levenshtein("rosettacode", "raisethysword")` debería devolver `8`. ```js assert.equal(levenshtein('rosettacode', 'raisethysword'), 8); ``` -`levenshtein("mississippi", "swiss miss")` should return `8`. +`levenshtein("mississippi", "swiss miss")` debería devolver `8`. ```js assert.equal(levenshtein('mississippi', 'swiss miss'), 8); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/linear-congruential-generator.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/linear-congruential-generator.md index 9b7ff866168..c22673be8d3 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/linear-congruential-generator.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/linear-congruential-generator.md @@ -1,6 +1,6 @@ --- id: 5e4ce2f5ac708cc68c1df261 -title: Linear congruential generator +title: Generador lineal congruencial challengeType: 1 forumTopicId: 385266 dashedName: linear-congruential-generator @@ -8,65 +8,65 @@ dashedName: linear-congruential-generator # --description-- -A linear congruential generator (LCG) is an algorithm that yields a sequence of pseudo-randomized numbers calculated with a discontinuous piecewise linear equation. All linear congruential generators use this formula: +Un generador lineal congruencial (GLC) es un algoritmo que produce una secuencia de números pseudoaleatorios calculados con una función lineal definida a trozos discontinua. Todos los generadores lineales congruenciales usan la siguiente fórmula: $$r_{n + 1} = (a \times r_n + c) \bmod m$$ -Where: +Donde:
        -
      • $ r_0 $ is a seed.
      • -
      • $r_1$, $r_2$, $r_3$, ..., are the random numbers.
      • -
      • $a$, $c$, $m$ are constants.
      • +
      • $ r_0 $ es una semilla.
      • +
      • $r_1$, $r_2$, $r_3$, ..., son los números aleatorios.
      • +
      • $a$, $c$, $m$ son constantes.
      -If one chooses the values of $a$, $c$ and $m$ with care, then the generator produces a uniform distribution of integers from $0$ to $m - 1$. +Si uno elige los valores de $a$, $c$ y $m$ con cuidado, entonces el generador produce una distribución uniforme de enteros de $0$ a $m - 1$. -LCG numbers have poor quality. $r_n$ and $r\_{n + 1}$ are not independent, as true random numbers would be. Anyone who knows $r_n$ can predict $r\_{n + 1}$, therefore LCG is not cryptographically secure. The LCG is still good enough for simple tasks like Miller-Rabin primality test, or FreeCell deals. Among the benefits of the LCG, one can easily reproduce a sequence of numbers, from the same $r_0$. One can also reproduce such sequence with a different programming language, because the formula is so simple. +Los números del GLC tienen una calidad deficiente. $r_n$ y $r\_{n + 1}$ no son independientes, como lo serían los números aleatorios verdaderos. Cualquiera que conozca $r_n$ puede predecir $r\_{n + 1}$, por lo tanto GLC no es criptográficamente seguro. El GLC sigue siendo lo suficientemente bueno para tareas simples como el test de primalidad Miller-Rabin, o las cartas de FreeCell. Entre los beneficios del LCG, uno puede fácilmente reproducir una secuencia de números, de los mismos $r_0$. También se puede reproducir tal secuencia con un lenguaje de programación diferente, porque la fórmula es tan simple. # --instructions-- -Write a function that takes $r_0,a,c,m,n$ as parameters and returns $r_n$. +Escribe una función que tome $r_0,a,c,m,n$ como parámetros y devuelve $r_n$. # --hints-- -`linearCongGenerator` should be a function. +`linearCongGenerator` debería ser una función. ```js assert(typeof linearCongGenerator == 'function'); ``` -`linearCongGenerator(324, 1145, 177, 2148, 3)` should return a number. +`linearCongGenerator(324, 1145, 177, 2148, 3)` debe devolver un número. ```js assert(typeof linearCongGenerator(324, 1145, 177, 2148, 3) == 'number'); ``` -`linearCongGenerator(324, 1145, 177, 2148, 3)` should return `855`. +`linearCongGenerator(324, 1145, 177, 2148, 3)` debe devolver `855`. ```js assert.equal(linearCongGenerator(324, 1145, 177, 2148, 3), 855); ``` -`linearCongGenerator(234, 11245, 145, 83648, 4)` should return `1110`. +`linearCongGenerator(234, 11245, 145, 83648, 4)` debería devolver `1110`. ```js assert.equal(linearCongGenerator(234, 11245, 145, 83648, 4), 1110); ``` -`linearCongGenerator(85, 11, 1234, 214748, 5)` should return `62217`. +`linearCongGenerator(85, 11, 1234, 214748, 5)` debería devolver `62217`. ```js assert.equal(linearCongGenerator(85, 11, 1234, 214748, 5), 62217); ``` -`linearCongGenerator(0, 1103515245, 12345, 2147483648, 1)` should return `12345`. +`linearCongGenerator(0, 1103515245, 12345, 2147483648, 1)` debería devolver `12345`. ```js assert.equal(linearCongGenerator(0, 1103515245, 12345, 2147483648, 1), 12345); ``` -`linearCongGenerator(0, 1103515245, 12345, 2147483648, 2)` should return `1406932606`. +`linearCongGenerator(0, 1103515245, 12345, 2147483648, 2)` debería devolver `1406932606`. ```js assert.equal( diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/longest-common-subsequence.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/longest-common-subsequence.md index 5b4f0d4c1d3..9195afbbdc2 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/longest-common-subsequence.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/longest-common-subsequence.md @@ -1,6 +1,6 @@ --- id: 5e6dd1278e6ca105cde40ea9 -title: Longest common subsequence +title: Subsecuencia común más larga challengeType: 1 forumTopicId: 385271 dashedName: longest-common-subsequence @@ -8,59 +8,59 @@ dashedName: longest-common-subsequence # --description-- -The **longest common subsequence** (or **LCS**) of groups A and B is the longest group of elements from A and B that are common between the two groups and in the same order in each group. For example, the sequences `1234` and `1224533324` have an LCS of `1234`:1234 +La **longest common subsequence** (or **LCS**) de grupos A y B es el grupo de elementos más largos desde A y B que son comunes entre dos grupos y en el mismo orden que cada grupo. Por ejemplo, las secuencias `1234` y `1224533324` tienen un LCS de `1234`:1234 1224533324 -For a string example, consider the sequences `thisisatest` and `testing123testing`. An LCS would be `tsitest`: +Para una cadena ejemplo, considera las secuencias `thisisatest` y `testing123testing`. Un LCS sería `tsitest`: thisisatest testing123testing. -Your code only needs to deal with strings. +Tu código solo necesita tratar con cadenas. # --instructions-- -Write a case-sensitive function that returns the LCS of two strings. You don't need to show multiple LCS's. +Escribe una función case-sensitive que devuelva el LCS de dos cadenas. No se necesita mostrar multiples LCS's. # --hints-- -`lcs` should be a function. +`lcs` debe ser una función. ```js assert(typeof lcs == 'function'); ``` -`lcs("thisisatest", "testing123testing")` should return a string. +`lcs("thisisatest", "testing123testing")` debe devolver una cadena. ```js assert(typeof lcs('thisisatest', 'testing123testing') == 'string'); ``` -`lcs("thisisatest", "testing123testing")` should return `"tsitest"`. +`lcs("thisisatest", "testing123testing")` debe devolver `"tsitest"`. ```js assert.equal(lcs('thisisatest', 'testing123testing'), 'tsitest'); ``` -`lcs("ABCDGH", "AEDFHR")` should return `"ADH"`. +`lcs("ABCDGH", "AEDFHR")` debe devolver `"ADH"`. ```js assert.equal(lcs('ABCDGH', 'AEDFHR'), 'ADH'); ``` -`lcs("AGGTAB", "GXTXAYB")` should return `"GTAB"`. +`lcs("AGGTAB", "GXTXAYB")` debe devolver `"GTAB"`. ```js assert.equal(lcs('AGGTAB', 'GXTXAYB'), 'GTAB'); ``` -`lcs("BDACDB", "BDCB")` should return `"BDCB"`. +`lcs("BDACDB", "BDCB")` debe devolver `"BDCB"`. ```js assert.equal(lcs('BDACDB', 'BDCB'), 'BDCB'); ``` -`lcs("ABAZDC", "BACBAD")` should return `"ABAD"`. +`lcs("ABAZDC", "BACBAD")` debe devolver `"ABAD"`. ```js assert.equal(lcs('ABAZDC', 'BACBAD'), 'ABAD'); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/sailors-coconuts-and-a-monkey-problem.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/sailors-coconuts-and-a-monkey-problem.md index 8117215835e..eb46738967f 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/sailors-coconuts-and-a-monkey-problem.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/sailors-coconuts-and-a-monkey-problem.md @@ -1,6 +1,6 @@ --- id: 59da22823d04c95919d46269 -title: 'Sailors, coconuts and a monkey problem' +title: 'Marineros, cocos y un problema de monos' challengeType: 1 forumTopicId: 302304 dashedName: sailors-coconuts-and-a-monkey-problem @@ -8,39 +8,39 @@ dashedName: sailors-coconuts-and-a-monkey-problem # --description-- -Five sailors are shipwrecked on an island and collect a large pile of coconuts during the day. +Cinco marineros acabaron naufragos en una isla y colectan una larga pila de cocos durante el día. -That night the first sailor wakes up and decides to take his first share early so tries to divide the pile of coconuts equally into five piles but finds that there is one coconut left over, so he tosses it to a monkey and then hides "his" one of the five equally sized piles of coconuts and pushes the other four piles together to form a single visible pile of coconuts again and goes to bed. +Esa noche el primer marinero despertó y decidió tomar su primera compartida temprana para intentar dividir la pila de cocos igualmente en 5 pilas pero se encontró que sobrá un coco, entonces el lo lanzó a un mono y luego ocultó el "suyo" una de cinco pilas de igual tamaño de cocos y empujo las cuatro otras pilas juntas para formar una única pila visible de cocos nuevamente y fue a la cama. -To cut a long story short, each of the sailors in turn gets up once during the night and performs the same actions of dividing the coconut pile into five, finding that one coconut is left over and giving that single remainder coconut to the monkey, then push the other four piles together to form a single pile. +Para resumir una larga historia, cada uno de los marinos se levantan una vez durante la noche y realizan las mismas acciones dividir la pila de cocos en cinco, encontrandose que hay un coco sobrante y dando ese coco sobrante al mono, luego empujan las otras 4 pilas juntas para formar una única pila. -In the morning (after the surreptitious and separate action of each of the five sailors during the night), the remaining coconuts are divided into five equal piles for each of the sailors, whereupon it is found that the pile of coconuts divides equally amongst the sailors with no remainder. (Nothing for the monkey in the morning.) +En la mañana (luego de la acción suprepticia y separada durante la noche), los cocos restantes son divididos en cinco pilas iguales para cada uno de los marinos, donde quiera esta se encuentre la pila de cocos esta dividida en iguales cantidades a los marinos sin residuos. (Nada para el mono en la mañana.) # --instructions-- -Create a function that returns the minimum possible size of the initial pile of coconuts collected during the day for `N` sailors. **Note:** Of course the tale is told in a world where the collection of any number of coconuts in a day and multiple divisions of the pile, etc. can occur in time fitting the story line, so as not to affect mathematics. +Crea una función que devuelve el tamaño mínimo posible de la pila de cocos recolectados durante el día `N` para los marinos. **Note:** Por supuesto la historia esta dicha en un mundo donde la recolección de cualquier número de cocos en un día y multiples divisiones de la pila, etc. puede ocurrir a tiempo ajustando la línea de la historia, pero no afacta las matemáticas. # --hints-- -`splitCoconuts` should be a function. +`splitCoconuts` debería ser una función. ```js assert(typeof splitCoconuts === 'function'); ``` -`splitCoconuts(5)` should return 3121. +`splitCoconuts(5)` debería devolver 3121. ```js assert(splitCoconuts(5) === 3121); ``` -`splitCoconuts(6)` should return 233275. +`splitCoconuts(6)` debería devolver 233275. ```js assert(splitCoconuts(6) === 233275); ``` -`splitCoconuts(7)` should return 823537. +`splitCoconuts(7)` debería devolver 823537. ```js assert(splitCoconuts(7) === 823537); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/self-referential-sequence.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/self-referential-sequence.md index 086840b687f..0d191c1fc2f 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/self-referential-sequence.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/self-referential-sequence.md @@ -1,6 +1,6 @@ --- id: 5eb3e4a21f462f409d656c73 -title: Self-referential sequence +title: Secuencia auto-referencial challengeType: 1 forumTopicId: 385317 dashedName: self-referential-sequence @@ -8,41 +8,41 @@ dashedName: self-referential-sequence # --description-- -There are several ways to generate a self-referential sequence. One very common one (the Look-and-say sequence) is to start with a positive integer, then generate the next term by concatenating enumerated groups of adjacent alike digits: +Hay varias formas para generar una secuencia autoreferencial. Una muy común (la Look-and-say sequence) es iniciar con un entero positivo, luego generar el siguiente término concatenando grupos de dígitos similares adyacentes:
      0, 10, 1110, 3110, 132110, 1113122110, 311311222110 ...
      -The terms generated grow in length geometrically and never converge. +Los términos generados crecen en longitud geométricamente y nunca convergen. -Another way to generate a self-referential sequence is to summarize the previous term. +Otra forma para generar una secuencia autoreferencial es resumir el término anterior. -Count how many of each alike digit there is, then concatenate the sum and digit for each of the sorted enumerated digits. Note that the first five terms are the same as for the previous sequence. +Cuenta cuantos dígitos similares hay, luego concatena la sumatoria y dígitos para cada uno de los dígitos enumerados ordenados. Nota que los primeros cinco términos son los mismos que para la secuencia previa.
      0, 10, 1110, 3110, 132110, 13123110, 23124110 ...
      -Sort the digits largest to smallest. Do not include counts of digits that do not appear in the previous term. +Ordena los dígitos más grandes a más pequeños. No incluya contadores de dígitos que no aparecen en el término anterior. -Depending on the seed value, series generated this way always either converge to a stable value or to a short cyclical pattern. (For our purposes, converge means that an element matches a previously seen element.) The sequence shown, with a seed value of 0, converges to a stable value of 1433223110 after 11 iterations. The seed value that converges most quickly is 22. It goes stable after the first element. (The next element is 22, which has been seen before.) +Dependiendo del valor sermilla, series generadas de esta forma siempre convergen a un valor estable o a un patrón cíclico corto. (Para nuestros propósitos, converger significa que un elemento coincide con un elemento previamente visto.) La secuencia mostrada, con un valor semilla de 0, converge a un valor estable de 1433223110 después de 11 iteraciones. El valor semilla que converge más rapidamente es 22. Se estabiliza después del primer elemento. (El siguiente elemento es 22, cual ya se ha visto antes.) # --instructions-- -Write a function that takes the seed value as parameter, generates a self referential sequence until it converges, and returns it as an array. +Escribe una función que toma como parámetro el valor semilla, genera una secuencia autoreferencial hasta que converja, y la devuelve como un arreglo. # --hints-- -`selfReferential` should be a function. +`selfReferential` debería ser una función. ```js assert(typeof selfReferential === 'function'); ``` -`selfReferential(40)` should return a array. +`selfReferential(40)` debería devolver un arreglo. ```js assert(Array.isArray(selfReferential(40))); ``` -`selfReferential(40)` should return `["40", "1410", "142110", "14123110", "1413124110", "2413125110", "151413224110", "152413225110", "251413324110", "152423224110", "152413423110"]`. +`selfReferential(40)` debería devolver `["40", "1410", "142110", "14123110", "1413124110", "2413125110", "151413224110", "152413225110", "251413324110", "152423224110", "152413423110"]`. ```js assert.deepEqual(selfReferential(40), [ @@ -60,7 +60,7 @@ assert.deepEqual(selfReferential(40), [ ]); ``` -`selfReferential(132110)` should return `["132110", "13123110", "23124110", "1413223110", "1423224110", "2413323110", "1433223110"]`. +`selfReferential(132110)` debería devolver `["132110", "13123110", "23124110", "1413223110", "1423224110", "2413323110", "1433223110"]`. ```js assert.deepEqual(selfReferential(132110), [ @@ -74,7 +74,7 @@ assert.deepEqual(selfReferential(132110), [ ]); ``` -`selfReferential(132211)` should return `["132211", "132231", "232221", "134211", "14131231", "14231241", "24132231", "14233221"]`. +`selfReferential(132211)` debería devolver `["132211", "132231", "232221", "134211", "14131231", "14231241", "24132231", "14233221"]`. ```js assert.deepEqual(selfReferential(132211), [ @@ -89,7 +89,7 @@ assert.deepEqual(selfReferential(132211), [ ]); ``` -`selfReferential(1413223110)` should return `["1413223110", "1423224110", "2413323110", "1433223110"]`. +`selfReferential(1413223110)` debería devolver `["1413223110", "1423224110", "2413323110", "1433223110"]`. ```js assert.deepEqual(selfReferential(1413223110), [ @@ -100,7 +100,7 @@ assert.deepEqual(selfReferential(1413223110), [ ]); ``` -`selfReferential(251413126110)` should return `["251413126110", "16151413225110", "16251413226110", "26151413325110", "16251423225110", "16251413424110", "16153413225110"]`. +`selfReferential(251413126110)` debería devolver `["251413126110", "16151413225110", "16251413226110", "26151413325110", "16251423225110", "16251413424110", "16153413225110"]`. ```js assert.deepEqual(selfReferential(251413126110), [ diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/soundex.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/soundex.md index b33f48706b2..950ed6223eb 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/soundex.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/soundex.md @@ -67,37 +67,37 @@ assert.equal(soundex('Sownteks'), 'S532'); assert.equal(soundex('Ekzampul'), 'E251'); ``` -`soundex("Euler")` should return `"E460"`. +`soundex("Euler")` debe devolver `"E460"`. ```js assert.equal(soundex('Euler'), 'E460'); ``` -`soundex("Gauss")` should return `"G200"`. +`soundex("Gauss")` debe devolver `"G200"`. ```js assert.equal(soundex('Gauss'), 'G200'); ``` -`soundex("Hilbert")` should return `"H416"`. +`soundex("Hilbert")` debe devolver `"H416"`. ```js assert.equal(soundex('Hilbert'), 'H416'); ``` -`soundex("Knuth")` should return `"K530"`. +`soundex("Knuth")` debe devolver `"K530"`. ```js assert.equal(soundex('Knuth'), 'K530'); ``` -`soundex("Lloyd")` should return `"L300"`. +`soundex("Lloyd")` debe devolver `"L300"`. ```js assert.equal(soundex('Lloyd'), 'L300'); ``` -`soundex("Lukasiewicz")` should return `"L222"`. +`soundex("Lukasiewicz")` debe devolver `"L222"`. ```js assert.equal(soundex('Lukasiewicz'), 'L222'); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/spiral-matrix.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/spiral-matrix.md index fbdd024181b..03d8b108d1d 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/spiral-matrix.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/spiral-matrix.md @@ -1,6 +1,6 @@ --- id: 5a23c84252665b21eecc801c -title: Spiral matrix +title: Matriz espiral challengeType: 1 forumTopicId: 302321 dashedName: spiral-matrix @@ -8,7 +8,7 @@ dashedName: spiral-matrix # --description-- -Produce a spiral array. A *spiral array* is a square arrangement of the first N2 natural numbers, where the numbers increase sequentially as you go around the edges of the array spiraling inwards. For example, given **5**, produce this array: +Producir un arreglo espiral. Un *spiral array* es una disposición cuadrada de primer N2 números naturales, donde los números incrementan secuencialmente por todas las esquinas del arreglo espiral interno. Por ejemplo, dado **5**, produce este arreglo:
       0  1  2  3  4
      @@ -20,19 +20,19 @@ Produce a spiral array. A *spiral array* is a square arrangement of the first N<
       
       # --hints--
       
      -`spiralArray` should be a function.
      +`spiralArray` debería ser una función.
       
       ```js
       assert(typeof spiralArray == 'function');
       ```
       
      -`spiralArray(3)` should return an array.
      +`spiralArray(3)` debería devolver un arreglo.
       
       ```js
       assert(Array.isArray(spiralArray(3)));
       ```
       
      -`spiralArray(3)` should return `[[0, 1, 2],[7, 8, 3],[6, 5, 4]]`.
      +`spiralArray(3)` debería devolver `[[0, 1, 2],[7, 8, 3],[6, 5, 4]]`.
       
       ```js
       assert.deepEqual(spiralArray(3), [
      @@ -42,7 +42,7 @@ assert.deepEqual(spiralArray(3), [
       ]);
       ```
       
      -`spiralArray(4)` should return `[[0, 1, 2, 3],[11, 12, 13, 4],[10, 15, 14, 5],[9, 8, 7, 6]]`.
      +`spiralArray(4)` debería devolver `[[0, 1, 2, 3],[11, 12, 13, 4],[10, 15, 14, 5],[9, 8, 7, 6]]`.
       
       ```js
       assert.deepEqual(spiralArray(4), [
      @@ -53,7 +53,7 @@ assert.deepEqual(spiralArray(4), [
       ]);
       ```
       
      -`spiralArray(5)` should return `[[0, 1, 2, 3, 4],[15, 16, 17, 18, 5],[14, 23, 24, 19, 6],[13, 22, 21, 20, 7],[12, 11, 10, 9, 8]]`.
      +`spiralArray(5)` debería devolver `[[0, 1, 2, 3, 4],[15, 16, 17, 18, 5],[14, 23, 24, 19, 6],[13, 22, 21, 20, 7],[12, 11, 10, 9, 8]]`.
       
       ```js
       assert.deepEqual(spiralArray(5), [
      diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/sum-digits-of-an-integer.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/sum-digits-of-an-integer.md
      index 077d606d4c7..0f4f966681a 100644
      --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/sum-digits-of-an-integer.md
      +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/sum-digits-of-an-integer.md
      @@ -1,6 +1,6 @@
       ---
       id: 5a23c84252665b21eecc803f
      -title: Sum digits of an integer
      +title: Suma los dígitos de un número entero
       challengeType: 1
       forumTopicId: 302331
       dashedName: sum-digits-of-an-integer
      @@ -8,36 +8,36 @@ dashedName: sum-digits-of-an-integer
       
       # --description--
       
      -Write a function that takes a string as a parameter. This string represents a number that can be in any base (less than 37) and return the sum of its digits.
      +Escribe una funcion que toma una cadena de texto como parametro. Esta cadena de texto representa un número que puede estar un cualquier base (mejor que 37) y devolver la suma de sus digitos.
       
       
        -
      • 110 sums to 1
      • -
      • 123410 sums to 10
      • +
      • 110suma a 1
      • +
      • 123410 suma a 10
      • fe16 sums to 29
      • f0e16 sums to 29
      # --hints-- -`sumDigits` should be a function. +`sumDigits` debe de ser una función. ```js assert(typeof sumDigits == 'function'); ``` -`sumDigits("1")` should return a number. +`sumDigits("1")` debe devolver un número. ```js assert(typeof sumDigits('1') == 'number'); ``` -`sumDigits("1")` should return `1`. +`sumDigits("1")` debe devolver `1`. ```js assert.equal(sumDigits('1'), 1); ``` -`sumDigits("12345")` should return `15`. +`sumDigits("12345")` debe devolver `15`. ```js assert.equal(sumDigits('12345'), 15); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/taxicab-numbers.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/taxicab-numbers.md index e968d091577..38d319eec6a 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/taxicab-numbers.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/taxicab-numbers.md @@ -1,6 +1,6 @@ --- id: 594ecc0d9a8cf816e3340187 -title: Taxicab numbers +title: Números taxicab challengeType: 1 forumTopicId: 302337 dashedName: taxicab-numbers @@ -8,60 +8,60 @@ dashedName: taxicab-numbers # --description-- -A taxicab number (the definition that is being used here) is a positive integer that can be expressed as the sum of two positive cubes in more than one way. +Un número taxicab (la definición que está utilizándose aquí) es un entero positivo que puede estar expresado como la suma de dos cubos positivos en más de una manera. -The first taxicab number is `1729`, which is: +El primer número taxicab es `1729`, el cuál es: -13 + 123 and +13 + 123 y 93 + 103. -Taxicab numbers are also known as: +Números Taxicabs son también conocidos como:
        -
      • taxi numbers
      • -
      • taxi-cab numbers
      • -
      • taxi cab numbers
      • -
      • Hardy-Ramanujan numbers
      • +
      • números taxi
      • +
      • números taxi-cab
      • +
      • números taxi cab
      • +
      • Números Hardy-Ramanujan
      # --instructions-- -Write a function that returns the lowest `n` taxicab numbers. For each of the taxicab numbers, show the number as well as its constituent cubes. +Escribe una funció que devuelve el número más bajo `n` de taxicab. Por cada uno de los números taxicab, mostrar el número así como sus cubos constituyentes. # --hints-- -`taxicabNumbers` should be a function. +`taxicabNumbers` debería devolver una función. ```js assert(typeof taxicabNumbers === 'function'); ``` -`taxicabNumbers` should return an array. +`taxicabNumbers` debería devolver un arreglo. ```js assert(typeof taxicabNumbers(2) === 'object'); ``` -`taxicabNumbers` should return an array of numbers. +`taxicabNumbers` debería devolver un arreglo de números. ```js assert(typeof taxicabNumbers(100)[0] === 'number'); ``` -`taxicabNumbers(4)` should return [1729, 4104, 13832, 20683]. +`taxicabNumbers(4)` debería devolver [1729, 4104, 13832, 20683]. ```js assert.deepEqual(taxicabNumbers(4), res4); ``` -`taxicabNumbers(25)` should return [1729, 4104, 13832, 20683, 32832, 39312, 40033, 46683, 64232, 65728, 110656, 110808, 134379, 149389, 165464, 171288, 195841, 216027, 216125, 262656, 314496, 320264, 327763, 373464, 402597] +`taxicabNumbers(25)` debería devolver [1729, 4104, 13832, 20683, 32832, 39312, 40033, 46683, 64232, 65728, 110656, 110808, 134379, 149389, 165464, 171288, 195841, 216027, 216125, 262656, 314496, 320264, 327763, 373464, 402597] ```js assert.deepEqual(taxicabNumbers(25), res25); ``` -`taxicabNumbers(39)` resulting numbers from 20 - 29 should be [314496,320264,327763,373464,402597,439101,443889,513000,513856]. +`taxicabNumbers(39)` los números resultantes desde 20 - 29 deberían ser [314496,320264,327763,373464,402597,439101,443889,513000,513856]. ```js assert.deepEqual(taxicabNumbers(39).slice(20, 29), res39From20To29); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/y-combinator.md b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/y-combinator.md index 0c867176bc4..bca73189472 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/y-combinator.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/rosetta-code/y-combinator.md @@ -1,6 +1,6 @@ --- id: 594810f028c0303b75339ad5 -title: Y combinator +title: Combinator Y challengeType: 1 forumTopicId: 302345 dashedName: y-combinator @@ -8,47 +8,47 @@ dashedName: y-combinator # --description-- -In strict functional programming and the lambda calculus, functions (lambda expressions) don't have state and are only allowed to refer to arguments of enclosing functions. This rules out the usual definition of a recursive function wherein a function is associated with the state of a variable and this variable's state is used in the body of the function. +En estricta functional programming y el cálculo lambda, funciones (expresiones lambda) no tiene estados y son solo permitidos a referirse a argumentos que encierran funciones. Estas reglas excluyen la definición de una función recursiva donde una función es asociada con el estado de una variable y estos estados de variables son usados en el cuerpo de la función. -The Y combinator is itself a stateless function that, when applied to another stateless function, returns a recursive version of the function. The Y combinator is the simplest of the class of such functions, called fixed-point combinators. +El combinador Y es pos sí mismo una función sin estado que, cuando se aplica a otra función, devuelve una versión recursiva de la función. El combinador Y es el más simple de la clase de tales funciones, llamados combinadores de punto fijo. # --instructions-- -Define the stateless Y combinator function and use it to compute the factorials. The `factorial(N)` function is already given to you. +Define la función Y combinador sin estado y la usa para computar los factoriales. La función `factorial(N)` ya se te fue dada. # --hints-- -Y should return a function. +Y debe devolver una función. ```js assert.equal(typeof Y((f) => (n) => n), 'function'); ``` -factorial(1) should return 1. +factorial(1) debe devolver 1. ```js assert.equal(factorial(1), 1); ``` -factorial(2) should return 2. +factorial(2) debe devolver 2. ```js assert.equal(factorial(2), 2); ``` -factorial(3) should return 6. +factorial(3) debe devolver 6. ```js assert.equal(factorial(3), 6); ``` -factorial(4) should return 24. +factorial(4) debe devolver 24. ```js assert.equal(factorial(4), 24); ``` -factorial(10) should return 3628800. +factorial(10) debe devolver 3628800. ```js assert.equal(factorial(10), 3628800); diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/take-home-projects/build-a-camper-leaderboard.md b/curriculum/challenges/espanol/10-coding-interview-prep/take-home-projects/build-a-camper-leaderboard.md index 7c44114d20e..048e10f211d 100644 --- a/curriculum/challenges/espanol/10-coding-interview-prep/take-home-projects/build-a-camper-leaderboard.md +++ b/curriculum/challenges/espanol/10-coding-interview-prep/take-home-projects/build-a-camper-leaderboard.md @@ -8,9 +8,9 @@ dashedName: build-a-freecodecamp-forum-homepage # --description-- -**Objective:** Build an app that is functionally similar to this: . +**Objective:** Crea una aplicación functionalmente similar a esta: . -Fulfill the below user stories and get all of the tests to pass. Utilice las librerías o APIs que necesites. Dale tu estilo personal. +Completa las siguientes historias de usuario y consigue que todas las pruebas pasen. Utilice las librerías o APIs que necesites. Dale tu estilo personal. **Historia de usuario:** Puedo ver una lista de las publicaciones más recientes en el foro de freeCodeCamp. @@ -22,7 +22,7 @@ Fulfill the below user stories and get all of the tests to pass. Utilice las lib Cuando hayas terminado, incluye un enlace a tu proyecto en CodePen y haz clic en el botón "He completado este desafío". -You can get feedback on your project by sharing it on the freeCodeCamp forum. +Puedes obtener opiniones de tu proyecto compartiéndolo en la freeCodeCamp forum. # --solutions-- diff --git a/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md b/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md index 90a27f4eff1..3b85027fa14 100644 --- a/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md +++ b/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md @@ -1,6 +1,6 @@ --- id: 5e8f2f13c4cdbe86b5c72d8e -title: 'Core Learning Algorithms: Building the Model' +title: 'Algoritmos de Aprendizaje Básico: Construyendo el Modelo' challengeType: 11 videoId: 5wHw8BTd2ZQ bilibiliIds: @@ -14,7 +14,7 @@ dashedName: core-learning-algorithms-building-the-model ## --text-- -What kind of estimator/model does TensorFlow recommend using for classification? +Qué tipo de estimador/modelo recomienda TensorFlow usar para la clasificación? ## --answers-- diff --git a/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md b/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md index bc70767fc9b..0346f62c6e2 100644 --- a/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md +++ b/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md @@ -1,6 +1,6 @@ --- id: 5e8f2f13c4cdbe86b5c72d8b -title: 'Core Learning Algorithms: Training and Testing Data' +title: 'Algoritmos de Aprendizaje Central: Entrenamiento y Prueba de Datos' challengeType: 11 videoId: wz9J1slsi7I bilibiliIds: @@ -14,19 +14,19 @@ dashedName: core-learning-algorithms-training-and-testing-data ## --text-- -What is categorical data? +¿Qué son los datos categóricos? ## --answers-- -Another term for one-hot encoding. +Otro término para la codificación de one-hot. --- -Any data that is not numeric. +Cualquier dato no númerico. --- -Any data that is represented numerically. +Cualquier dato representado numericamente. ## --video-solution-- diff --git a/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md b/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md index 64e8ec9e96b..c2922fa1b35 100644 --- a/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md +++ b/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md @@ -1,6 +1,6 @@ --- id: 5e8f2f13c4cdbe86b5c72d9d -title: 'Natural Language Processing With RNNs: Recurring Neural Networks' +title: 'Procesamiento de Lenguaje Natural con RNNs: Redes Neuronales Recurrentes' challengeType: 11 videoId: bX5681NPOcA bilibiliIds: @@ -14,23 +14,23 @@ dashedName: natural-language-processing-with-rnns-recurring-neural-networks ## --text-- -What is true about Recurrent Neural Networks? +¿Qué es cierto acerca de las Redes Neuronales Recurrentes? ## --answers-- -1: They are a type of feed-forward neural network. +1: Son un tipo de red neuronal de alimentación hacia delante. --- -2: They maintain an internal memory/state of the input that was already processed. +2: Mantienen un estado de memoria interna de la entrada que ya fue procesada. --- -3: RNN's contain a loop and process one piece of input at a time. +3: RNN's contienen un bucle y procesa una pieza de entrada a la vez. --- -4: Both 2 and 3. +4: Ambos 2 y 3. ## --video-solution-- diff --git a/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md b/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md index 92b267520c6..952686cdbd3 100644 --- a/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md +++ b/curriculum/challenges/espanol/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md @@ -1,6 +1,6 @@ --- id: 5e8f2f13c4cdbe86b5c72d93 -title: 'Neural Networks: Activation Functions' +title: 'Redes Neurales: Funciones de Activación' challengeType: 11 videoId: S45tqW6BqRs bilibiliIds: @@ -14,19 +14,19 @@ dashedName: neural-networks-activation-functions ## --text-- -Which activation function squishes values between -1 and 1? +Cuál función activación recorta valores entre -1 and 1? ## --answers-- -ReLU (Rectified Linear Unit) +ReLU (Unidad Lineal Rectificada) --- -Tanh (Hyperbolic Tangent) +Tanh (Tangente Hiperbólica) --- -Sigmoid +Sigmoide ## --video-solution-- diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md new file mode 100644 index 00000000000..46b4f675589 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -0,0 +1,278 @@ +--- +id: 63c620161fc2b49ac340ffc4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +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`. + +Remember, you can use the `getElementById` method for this. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#team` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +You should use `const` to declare the variable called `teamName` and assign it the `#team` element. + +```js +assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md new file mode 100644 index 00000000000..513b3c3ed99 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md @@ -0,0 +1,287 @@ +--- +id: 63cf7e324c1831f8d936b3ae +title: Step 2 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#sport` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element. + +```js +assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#year` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element. + +```js +assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md new file mode 100644 index 00000000000..080e5e186a1 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md @@ -0,0 +1,289 @@ +--- +id: 63cf7f97e7f99af9348f5068 +title: Step 3 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#head-coach` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element. + +```js +assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#player-cards` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element. + +```js +assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md new file mode 100644 index 00000000000..6afeaf034bf --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md @@ -0,0 +1,279 @@ +--- +id: 63cf812bb8ecd4f9cf749b8f +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#players` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element. + +```js +assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md new file mode 100644 index 00000000000..e306a5ea676 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md @@ -0,0 +1,276 @@ +--- +id: 63cf83fdbb51d9fa54654ae6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now it is time to build out the data structure that will hold all of the information for your football team. + +Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object. + +# --hints-- + +You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object. + +```js +assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md new file mode 100644 index 00000000000..e0b502ce27e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md @@ -0,0 +1,283 @@ +--- +id: 63cf8ec006a776ff5f6e3c68 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`. + + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `team` property. + +```js +assert.property(myFavoriteFootballTeam, 'team'); +``` + +Your `team` property should be set to `Argentina`. + +```js +assert.equal(myFavoriteFootballTeam.team, 'Argentina'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md new file mode 100644 index 00000000000..ed41bc54c71 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md @@ -0,0 +1,283 @@ +--- +id: 63cf90d4696d8f00851873a4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `sport` property. + +```js +assert.property(myFavoriteFootballTeam, 'sport'); +``` + +Your `team` property should be set to `Football`. + +```js +assert.equal(myFavoriteFootballTeam.sport, 'Football'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md new file mode 100644 index 00000000000..14594da8b08 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md @@ -0,0 +1,290 @@ +--- +id: 63cf91b0ff6e9300ead140cc +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `year` property. + +```js +assert.property(myFavoriteFootballTeam, 'year'); +``` + +Your `year` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.year); +``` + +Your `year` property should be set to `1986`. + +```js +assert.equal(myFavoriteFootballTeam.year, 1986); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md new file mode 100644 index 00000000000..1502bc6914d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md @@ -0,0 +1,291 @@ +--- +id: 63cf920228531a0145abd0b3 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property. + +```js +assert.property(myFavoriteFootballTeam, 'isWorldCupWinner'); +``` + +Your `isWorldCupWinner` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner); +``` + +Your `isWorldCupWinner` property should be set to `true`. + +```js +assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md new file mode 100644 index 00000000000..33ba5e855e9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md @@ -0,0 +1,316 @@ +--- +id: 63cf93472de77d01bf8474bf +title: Step 10 +challengeType: 0 +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. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `headCoach` property. + +```js +assert.property(myFavoriteFootballTeam, 'headCoach'); +``` + +Your `headCoach` value should be an object. + +```js +assert.isObject(myFavoriteFootballTeam.headCoach) +``` + +Your `headCoach` object should have a `coachName` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'coachName'); +``` + +Your `coachName` property should be set to `Carlos Bilardo`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo'); +``` + +Your `headCoach` object should have a `matches` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'matches'); +``` + +Your `matches` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.headCoach.matches); +``` + +Your `matches` property should be set to `7`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.matches, 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md new file mode 100644 index 00000000000..6dbedd38e9f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md @@ -0,0 +1,296 @@ +--- +id: 63d120a05ee93f38353b84c0 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `players` property. + +```js +assert.property(myFavoriteFootballTeam, 'players'); +``` + +Your `players` value should be an array. + +```js +assert.isArray(myFavoriteFootballTeam.players) +``` + +Your `players` array should be empty. + +```js +assert.deepEqual(myFavoriteFootballTeam.players, []) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md new file mode 100644 index 00000000000..c5569d06c04 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md @@ -0,0 +1,369 @@ +--- +id: 63d1214a0ac7a9389793269b +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `players` array, create a new object with the following properties: + + +```md + +name: "Sergio Almirón" +position: "forward" +number: 1 +isCaptain: false +nickname: null + +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have the value of an object. + +```js +assert.isObject(myFavoriteFootballTeam.players[0]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'name'); +``` + +Your `name` property should be set to `Sergio Almirón`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'position'); +``` + +Your `position` property should be set to `forward`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[0]?.number); +``` + +Your `number` property should be set to `1`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.number, 1); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[0]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md new file mode 100644 index 00000000000..7bb2e78b95d --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md @@ -0,0 +1,380 @@ +--- +id: 63d128eaedcc773d2ded2128 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Below that object, create a new object with the following properties: + +```md +name: "Sergio Batista" +position: "midfielder" +number: 2 +isCaptain: false +nickname: null +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have two values. + +```js +// Have to assert at least, because we pre-populate data in the next step. +assert.isAtLeast(myFavoriteFootballTeam.players.length, 2); +``` + +Your `myFavoriteFootballTeam.players` array should have an object as the second value. + +```js +assert.isObject(myFavoriteFootballTeam.players[1]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'name'); +``` + +Your `name` property should be set to `Sergio Batista`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'position'); +``` + +Your `position` property should be set to `midfielder`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[1]?.number); +``` + +Your `number` property should be set to `2`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.number, 2); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[1]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md new file mode 100644 index 00000000000..e117f81605f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md @@ -0,0 +1,446 @@ +--- +id: 63d12b9c7aaee43de1ba265d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you. + +The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it. + +Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + + +# --hints-- + +You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + +```js +assert.isFrozen(myFavoriteFootballTeam); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md new file mode 100644 index 00000000000..6e03cf91edf --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md @@ -0,0 +1,458 @@ +--- +id: 63d12fe2a595263e8f5084f7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties. + +Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`. + +When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value. + +# --hints-- + +You should assign the `USA` string to `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); + +``` + +You should add a `console.log` for `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md new file mode 100644 index 00000000000..c9a4a2ad0f4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md @@ -0,0 +1,470 @@ +--- +id: 63e02a333354343b595d64ca +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson. + +The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`. + +Remember you can use dot notation for this. + +# --hints-- + +You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); +``` + +You should remove your `console.log` for `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); +``` + +You should use `const` to declare a `sport` variable. + +```js +assert.match(code, /const\s+sport\s*=/); +``` + +You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable. + +```js +assert.equal(sport, myFavoriteFootballTeam.sport); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +myFavoriteFootballTeam.team = "USA"; +console.log(myFavoriteFootballTeam.team); + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md new file mode 100644 index 00000000000..f95ca095c29 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md @@ -0,0 +1,454 @@ +--- +id: 63e0334b7a24bd3c96aca4de +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`. + +# --hints-- + +You should use `const` to declare a `team` variable. + +```js +assert.match(code, /const\s+team\s*=/); +``` + +You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable. + +```js +assert.equal(team, myFavoriteFootballTeam.team); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md new file mode 100644 index 00000000000..ce0835fa4d9 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md @@ -0,0 +1,464 @@ +--- +id: 63e036373fc9173d284e165a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal. + +The object destructuring syntax allows you to unpack values from arrays and objects: + +```js +const developerObj = { + name: "Jessica Wilkins", + isDeveloper: true +}; + +// Object destructuring +const { name, isDeveloper } = developerObj; +``` + +Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code. + +# --hints-- + +Use object destructuring to access the `sport` and `team` values. + +```js + +assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; +const team = myFavoriteFootballTeam.team; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md new file mode 100644 index 00000000000..de3439a814b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md @@ -0,0 +1,449 @@ +--- +id: 63e03b86008bbb3e1c3de846 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Next, add the `year` and `players` to your destructuring assignment. + +# --hints-- + +You should add the `year` and `players` values to your destructuring assignment. + +```js +assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const { sport, team } = myFavoriteFootballTeam; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md new file mode 100644 index 00000000000..95eda5017a7 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md @@ -0,0 +1,448 @@ +--- +id: 63e042661ad2663f0d468740 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax. + +# --hints-- + +Use object destructuring to access the `coachName` value. + +```js + +assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md new file mode 100644 index 00000000000..8179fd09158 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md @@ -0,0 +1,453 @@ +--- +id: 63e050bf935ac341b88326d6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now you need to start displaying the team's information on the screen. + +Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element. + +Once you complete that task, you should see the result in the preview window. + +# --hints-- + +You should assign the `sport` variable to `typeOfSport.innerHTML`. + +```js + +assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md new file mode 100644 index 00000000000..587342d8d66 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md @@ -0,0 +1,451 @@ +--- +id: 63e05557016dfd45ea49152c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`. + +# --hints-- + +You should assign the `team` variable to `teamName.innerHTML`. + +```js + +assert.match(code, /teamName.innerHTML\s*=\s*team\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md new file mode 100644 index 00000000000..fd77bba607c --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md @@ -0,0 +1,462 @@ +--- +id: 63e05c00b615bb46ac87273a +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`. + +You should now see all of that information displayed on the screen below `Team stats`. + +# --hints-- + +You should assign the `year` variable to `worldCupYear.innerHTML`. + +```js + +assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/) + +``` + +You should assign the `coachName` variable to `headCoach.innerHTML`. + +```js + +assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md new file mode 100644 index 00000000000..64e5e01482a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md @@ -0,0 +1,479 @@ +--- +id: 63e060df21bca347b2d2b374 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu. + +Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step. + + +# --hints-- + +You should use `const` to declare a `setPlayerCards` variable. + +```js +assert.match(code, /const\s+setPlayerCards\s*=/); +``` + +Your `setPlayerCards` variable should be a function. + +```js +assert.isFunction(setPlayerCards); +``` + +Your `setPlayerCards` function should use arrow syntax. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/); +``` + +Your `setPlayerCards` function should not take a parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/); +``` + +Your `setPlayerCards` function should be empty. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md new file mode 100644 index 00000000000..e2fd95b4278 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md @@ -0,0 +1,470 @@ +--- +id: 63e062d6090ebb486a4eda3a +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used: + +```js +const greeting = (name = "Anonymous") => { + return "Hello " + name; +} + +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + +Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. + +# --hints-- + +Your `setPlayerCards` function should take an `arr` parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/); +``` + +Your `arr` parameter should have a default value of `players`. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + +const setPlayerCards = () => {}; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md new file mode 100644 index 00000000000..c5f10540ae0 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md @@ -0,0 +1,478 @@ +--- +id: 63e949b8327aa2aca2ca8eac +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The next step is to create a new array that will be responsible for adding the player card information to the page. + +Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`. + +Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element. + +# --hints-- + +You should call the `.map()` method on your `arr` parameter. + +```js +assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/); +``` + +Your `.map()` method should take an empty callback function. + +```js +assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); +``` + +You should use the `+=` operator on `playerCards.innerHTML`. + +```js +assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/); +``` + +You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator. + +```js +assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md new file mode 100644 index 00000000000..10556005822 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md @@ -0,0 +1,472 @@ +--- +id: 63e94dae6dcedbad73f2f6ee +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables. + +Here is an example: + +```js +function myExampleFunction({ name, age, job, city }) { + +} +``` + +Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring. + +# --hints-- + +You should unpack all 5 object properties from objects in `arr` using object destructuring. + +```js + +assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/) + + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map(() => { + + }) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md new file mode 100644 index 00000000000..564fb6bb8e0 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md @@ -0,0 +1,467 @@ +--- +id: 63e954321b0a77ae4f6d9650 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +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`. + +# --hints-- + +You should use template literals to add an empty `div` with a class of `player-card`. + + +```js + +assert.match(code, /`\s*\s*<\/div>\s*`\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md new file mode 100644 index 00000000000..b9c104fb55a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md @@ -0,0 +1,475 @@ +--- +id: 63e95a45dce95baf41dd4f78 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter: + +```js +${expression goes here} +``` + +# --hints-- + +You should add an `h2` element with the `name` parameter. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/) +``` + +Your `h2` should be nested in your `div`. + +```js +assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md new file mode 100644 index 00000000000..53646c4fff0 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md @@ -0,0 +1,467 @@ +--- +id: 63e95e39860dc5b01ebe9be0 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team. + +Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string. + +# --hints-- + +You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md new file mode 100644 index 00000000000..f41577b8e76 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md @@ -0,0 +1,472 @@ +--- +id: 63e9667c881b61b1e338d276 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Position:` followed by the `position` variable. + +```js +assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md new file mode 100644 index 00000000000..edceac6fe11 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md @@ -0,0 +1,472 @@ +--- +id: 63e96938d2a347b2734a1587 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Number:` followed by the `number` variable. + +```js +assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after your existing `p` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md new file mode 100644 index 00000000000..4bb4a4f5aa6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md @@ -0,0 +1,473 @@ +--- +id: 63e96eb94c97b6b31ee50f63 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Below your existing paragraph elements, add another paragraph element with the text `Nickname:`. + +# --hints-- + +You should add a new paragraph element with the text `Nickname:`. + +```js +assert.match(code, /\s*\s*Nickname:\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md new file mode 100644 index 00000000000..46379d93380 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md @@ -0,0 +1,482 @@ +--- +id: 63e9718d7d490bb3940d5a0a +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next to the `Nickname:` text, add an embedded expression that will show the player's nickname if they have one. + +Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`. + +# --hints-- + +You should use a ternary operator to check if `nickname` is not `null`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/) +``` + +If your ternary is truthy, it should display the player's `nickname`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/) +``` + +If your ternary is falsy, it should display the string `N/A`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname:

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md new file mode 100644 index 00000000000..b4b4d23626a --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md @@ -0,0 +1,477 @@ +--- +id: 63e9737f686c76b4078a60f4 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `.map()` method will return a new array of `player-card` items separated by commas. + +To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method. + + +# --hints-- + +You should chain the `.join()` method to the `.map()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s); +``` + +You should pass an empty string to the `.join()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + `; + } + ) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md new file mode 100644 index 00000000000..e5c273332f2 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md @@ -0,0 +1,485 @@ +--- +id: 63f28972973504e7bb58b0b3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +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. + +# --hints-- + +You should call the `.addEventListener()` method on the `playersDropdownList` variable. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(/); +``` + +Your event listener should listen for the `change` event. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/); +``` + +Your event listener should have an empty callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md new file mode 100644 index 00000000000..8aeee3d3efa --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md @@ -0,0 +1,475 @@ +--- +id: 63f28ef082d771e8bf71f94a +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +For the callback function, pass in `e` as a parameter. + +`e` represents an object which contains the information for that event. + +# --hints-- + +You should pass in `e` as a parameter to your callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + +playersDropdownList.addEventListener("change", () => { + +}); + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md new file mode 100644 index 00000000000..f8bad487511 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -0,0 +1,477 @@ +--- +id: 63f293c804d6f9e9a83ca4c5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Inside the callback function, add a `console.log` with the value of `e.target.value`. + +Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. + +`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. + +# --hints-- + +You should add a `console.log` with the value of `e.target.value`. + +```js +assert.match(code, /console.log\s*\(e.target.value\)\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md new file mode 100644 index 00000000000..a15fd647b37 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md @@ -0,0 +1,489 @@ +--- +id: 63f29804e3ec00ea6fab1ec4 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Remove the `console.log` statement you created in the previous step. + +The next step would be to reset the content for the `playerCards` element. + +Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string. + +# --hints-- + +You should not have the `console.log` statement in your code. + +```js +assert.notMatch(code, /\s*console.log\(e.target.value\)/); +``` + +You should access the `innerHTML` property of the `playerCards` element. + +```js +assert.match(code, /playerCards\.innerHTML\s*=/); +``` + +You should set the `innerHTML` property to an empty string. + +```js +assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + +console.log(e.target.value) + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md new file mode 100644 index 00000000000..1657ba65473 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md @@ -0,0 +1,508 @@ +--- +id: 63f29ce62aea65eb041758c8 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions. + +A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause. + +This is the basic syntax for a `switch` statement: + +```js +switch (expression) { + case 1: + /* + this code will execute + if the case matches the expression + */ + break; + default: + /* + the default will execute if none + of the other cases match the expression + */ +} +``` + +Add a `switch` statement and use `e.target.value` for the expression. + +# --hints-- + +You should use a `switch` statement. + +```js +assert.match(code, /switch/); +``` + +Your `switch` statement should use `e.target.value` for the expression. + +```js +assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/); +``` + +Your `switch` statement should be empty. + +```js +assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md new file mode 100644 index 00000000000..9188483c345 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md @@ -0,0 +1,478 @@ +--- +id: 63f2a0a860790eebe61bf908 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +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. + +# --hints-- + +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*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md new file mode 100644 index 00000000000..cabfe408ca5 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md @@ -0,0 +1,521 @@ +--- +id: 63f2a4a8087e6dec8ec47f16 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +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`. + +Lastly, add a `break` statement below the `setPlayerCards` function call. + +# --hints-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md new file mode 100644 index 00000000000..fbf9f1cb1b8 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md @@ -0,0 +1,517 @@ +--- +id: 63f2a5f09a785aed155c0a56 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/) +``` + +In your `midfielder` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md new file mode 100644 index 00000000000..8666f5ab42e --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md @@ -0,0 +1,521 @@ +--- +id: 63f2a8e14fb388edd3242527 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/) +``` + +In your `defender` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards(players.filter((player) => player.position === "midfielder")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md new file mode 100644 index 00000000000..c41768c86d6 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md @@ -0,0 +1,527 @@ +--- +id: 63f2aa36fcdc63ee4e18fc37 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/) +``` + +In your `goalkeeper` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md new file mode 100644 index 00000000000..6c919ef5e37 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md @@ -0,0 +1,790 @@ +--- +id: 63f2ab4f6c52c5eec6d68de4 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The final step is to add a `default` clause if none of the other `case` clauses match the user selection. + +For the `default` clause, call the `setPlayerCards` function without any arguments passed in. + +Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname. + +Congratulations on completing the football team cards project! + +# --hints-- + +You should add a `default` clause to your `switch` statement. + +```js +assert.match(code, /default\s*:\s*/) +``` + +In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in. + +```js +assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + case "goalkeeper": + setPlayerCards( + players.filter((player) => player.position === "goalkeeper") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` + +# --solutions-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [ + { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, }, + { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, }, + { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", }, + { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", }, + { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", }, + { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", }, + { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", }, + { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, }, + { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", }, + { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", }, + { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", }, + { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, }, + { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, }, + { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, }, + { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", }, + { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, }, + { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, }, + { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, }, + { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", }, + { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, }, + { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", }, + { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], }; + +Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      ` ) .join(""); }; + +playersDropdownList.addEventListener("change", (e) => { playerCards.innerHTML = ""; + + switch (e.target.value) { case "nickname": setPlayerCards(players.filter((player) => player.nickname !== null)); break; case "forward": setPlayerCards(players.filter((player) => player.position === "forward")); break; case "midfielder": setPlayerCards( players.filter((player) => player.position === "midfielder") ); break; case "defender": setPlayerCards( players.filter((player) => player.position === "defender") ); break; case "goalkeeper": setPlayerCards( players.filter((player) => player.position === "goalkeeper") ); break; default: setPlayerCards(); } }); diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md new file mode 100644 index 00000000000..03ddbef793f --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md @@ -0,0 +1,504 @@ +--- +id: 641fc88d8fa7127f76e0324f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + + +Call the `setPlayerCards` function with an argument of `players.filter()`. + +Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`. + +# --hints-- + +In your `nickname` case, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md new file mode 100644 index 00000000000..e084de31fa4 --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md @@ -0,0 +1,488 @@ +--- +id: 641fcfd468185384ac218b7d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Before you can move onto the next case, you will need to add a `break` statement: + +```js + case "example": + // code goes here + break; +``` + +The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement. + +Below your `setPlayerCards` call, add a `break` statement. + +# --hints-- + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md b/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md index 6c7262cb089..10067040fdc 100644 --- a/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md +++ b/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md @@ -15,26 +15,26 @@ El sitio web constará de una página de índice principal que tendrá enlaces a 1. Tu página de receta debe incluir un elemento `html` con un elemento `head` y `body` como hijos. 1. Debes tener un elemento `title` dentro del elemento `head` con el texto . 1. Deberías ver un elemento `h1` que tiene el texto `Creamy Chocolate Fudge`. -1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text. -1. There should be an `h2` element with the text `Description` under the image. +1. Deberías ver una imagen con la url `*placeholder-fcc-cdn*` con un texto `alt` apropiado. +1. Debes tener un elemento `h2` con el texto `Description` debajo de la imagen. 1. Debes ver algunos párrafos debajo de,`Description` que describan la receta. -1. There should be an `h2` element with the text `Ingredients` -1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe. -1. Under the list of ingredients add another heading called `Steps`. -1. You should see an ordered list with a couple of steps needed to complete the recipe. -1. Under the steps there should be an `h2` element with the text `More Recipes` -1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within. -1. These anchor elements should have `href` attribute with the value set to `#` +1. Debes tener un elemento `h2` con el texto `Ingredients` +1. Debajo del título `Ingredients` debe haber una lista desordenada con los ingredientes necesarios para la receta. +1. Debajo de la lista de ingredientes añade otro título llamado `Steps`. +1. Deberías ver una lista ordenada con algunos de los pasos necesarios para completar la receta. +1. Debajo de los pasos, debería haber un elemento `h2` con el texto `More Recipes` +1. Deberías ver algunos enlaces a otras recetas, dentro de una lista desordenada que con elementos anchor dentro de los elementos de lista. +1. Estos elementos anchor deberían tener un atributo `href` con el valor`#` # --hints-- -You should have a `DOCTYPE` tag. +Deberías tener una etiqueta `DOCTYPE`. ```js assert(code.match(//gi)); ``` -You should have a `html` element with `head` and `body` element. +Deberías tener un elemento `html` con los elementos `head` y `body`. ```js const html = document.querySelectorAll('html')[0]; @@ -44,19 +44,19 @@ const body = document.querySelectorAll('html > body')[0]; assert(html && head && body); ``` -You should have a `title` element within the `head` element that contains the text `The Odin Recipes`. +Deberías tener un elemento `title` dentro del elemento `head` con el texto `The Odin Recipes`. ```js assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes'); ``` -You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`. +Deberías tener un elemento `h1` dentro del elemento `body` con el texto `Creamy Chocolate Fudge`. ```js assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge'); ``` -You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text. +Deberías tener una imagen con la url `*placeholder-fcc-cdn*` con un atributo `alt` y un texto apropiado. ```js const img = document.querySelectorAll('IMG')[0]; diff --git a/curriculum/challenges/german/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/german/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index 82718297a9e..27bbd6d12aa 100644 --- a/curriculum/challenges/german/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/german/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery Jedes HTML-Element hat ein Eltern(`parent`)-element, von dem es Eigenschaften erbt (`inherits`). -Zum Beispiel hat dein `jQuery Playground` `h3`-Element das Elternelement von `
      `, das wiederum das Elternelement `body` hat. +For example, the `h3` element in your `jQuery Playground` has the parent element of `
      `, which itself has the parent element of `body`. jQuery hat eine Funktion namens `parent()`, mit der du auf das Elternelement des von dir ausgewählten Elements zugreifen kannst. diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 76c96a70ced..96405139ef4 100644 --- a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -522,6 +522,7 @@ async(getUserInput) => { date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" + }).replaceAll(',', '') }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md new file mode 100644 index 00000000000..46b4f675589 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -0,0 +1,278 @@ +--- +id: 63c620161fc2b49ac340ffc4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +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`. + +Remember, you can use the `getElementById` method for this. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#team` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +You should use `const` to declare the variable called `teamName` and assign it the `#team` element. + +```js +assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md new file mode 100644 index 00000000000..513b3c3ed99 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md @@ -0,0 +1,287 @@ +--- +id: 63cf7e324c1831f8d936b3ae +title: Step 2 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#sport` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element. + +```js +assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#year` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element. + +```js +assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md new file mode 100644 index 00000000000..080e5e186a1 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md @@ -0,0 +1,289 @@ +--- +id: 63cf7f97e7f99af9348f5068 +title: Step 3 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#head-coach` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element. + +```js +assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#player-cards` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element. + +```js +assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md new file mode 100644 index 00000000000..6afeaf034bf --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md @@ -0,0 +1,279 @@ +--- +id: 63cf812bb8ecd4f9cf749b8f +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#players` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element. + +```js +assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md new file mode 100644 index 00000000000..e306a5ea676 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md @@ -0,0 +1,276 @@ +--- +id: 63cf83fdbb51d9fa54654ae6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now it is time to build out the data structure that will hold all of the information for your football team. + +Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object. + +# --hints-- + +You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object. + +```js +assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md new file mode 100644 index 00000000000..e0b502ce27e --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md @@ -0,0 +1,283 @@ +--- +id: 63cf8ec006a776ff5f6e3c68 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`. + + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `team` property. + +```js +assert.property(myFavoriteFootballTeam, 'team'); +``` + +Your `team` property should be set to `Argentina`. + +```js +assert.equal(myFavoriteFootballTeam.team, 'Argentina'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md new file mode 100644 index 00000000000..ed41bc54c71 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md @@ -0,0 +1,283 @@ +--- +id: 63cf90d4696d8f00851873a4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `sport` property. + +```js +assert.property(myFavoriteFootballTeam, 'sport'); +``` + +Your `team` property should be set to `Football`. + +```js +assert.equal(myFavoriteFootballTeam.sport, 'Football'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md new file mode 100644 index 00000000000..14594da8b08 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md @@ -0,0 +1,290 @@ +--- +id: 63cf91b0ff6e9300ead140cc +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `year` property. + +```js +assert.property(myFavoriteFootballTeam, 'year'); +``` + +Your `year` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.year); +``` + +Your `year` property should be set to `1986`. + +```js +assert.equal(myFavoriteFootballTeam.year, 1986); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md new file mode 100644 index 00000000000..1502bc6914d --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md @@ -0,0 +1,291 @@ +--- +id: 63cf920228531a0145abd0b3 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property. + +```js +assert.property(myFavoriteFootballTeam, 'isWorldCupWinner'); +``` + +Your `isWorldCupWinner` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner); +``` + +Your `isWorldCupWinner` property should be set to `true`. + +```js +assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md new file mode 100644 index 00000000000..33ba5e855e9 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md @@ -0,0 +1,316 @@ +--- +id: 63cf93472de77d01bf8474bf +title: Step 10 +challengeType: 0 +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. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `headCoach` property. + +```js +assert.property(myFavoriteFootballTeam, 'headCoach'); +``` + +Your `headCoach` value should be an object. + +```js +assert.isObject(myFavoriteFootballTeam.headCoach) +``` + +Your `headCoach` object should have a `coachName` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'coachName'); +``` + +Your `coachName` property should be set to `Carlos Bilardo`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo'); +``` + +Your `headCoach` object should have a `matches` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'matches'); +``` + +Your `matches` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.headCoach.matches); +``` + +Your `matches` property should be set to `7`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.matches, 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md new file mode 100644 index 00000000000..6dbedd38e9f --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md @@ -0,0 +1,296 @@ +--- +id: 63d120a05ee93f38353b84c0 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `players` property. + +```js +assert.property(myFavoriteFootballTeam, 'players'); +``` + +Your `players` value should be an array. + +```js +assert.isArray(myFavoriteFootballTeam.players) +``` + +Your `players` array should be empty. + +```js +assert.deepEqual(myFavoriteFootballTeam.players, []) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md new file mode 100644 index 00000000000..c5569d06c04 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md @@ -0,0 +1,369 @@ +--- +id: 63d1214a0ac7a9389793269b +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `players` array, create a new object with the following properties: + + +```md + +name: "Sergio Almirón" +position: "forward" +number: 1 +isCaptain: false +nickname: null + +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have the value of an object. + +```js +assert.isObject(myFavoriteFootballTeam.players[0]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'name'); +``` + +Your `name` property should be set to `Sergio Almirón`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'position'); +``` + +Your `position` property should be set to `forward`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[0]?.number); +``` + +Your `number` property should be set to `1`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.number, 1); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[0]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md new file mode 100644 index 00000000000..7bb2e78b95d --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md @@ -0,0 +1,380 @@ +--- +id: 63d128eaedcc773d2ded2128 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Below that object, create a new object with the following properties: + +```md +name: "Sergio Batista" +position: "midfielder" +number: 2 +isCaptain: false +nickname: null +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have two values. + +```js +// Have to assert at least, because we pre-populate data in the next step. +assert.isAtLeast(myFavoriteFootballTeam.players.length, 2); +``` + +Your `myFavoriteFootballTeam.players` array should have an object as the second value. + +```js +assert.isObject(myFavoriteFootballTeam.players[1]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'name'); +``` + +Your `name` property should be set to `Sergio Batista`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'position'); +``` + +Your `position` property should be set to `midfielder`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[1]?.number); +``` + +Your `number` property should be set to `2`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.number, 2); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[1]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md new file mode 100644 index 00000000000..e117f81605f --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md @@ -0,0 +1,446 @@ +--- +id: 63d12b9c7aaee43de1ba265d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you. + +The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it. + +Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + + +# --hints-- + +You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + +```js +assert.isFrozen(myFavoriteFootballTeam); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md new file mode 100644 index 00000000000..6e03cf91edf --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md @@ -0,0 +1,458 @@ +--- +id: 63d12fe2a595263e8f5084f7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties. + +Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`. + +When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value. + +# --hints-- + +You should assign the `USA` string to `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); + +``` + +You should add a `console.log` for `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md new file mode 100644 index 00000000000..c9a4a2ad0f4 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md @@ -0,0 +1,470 @@ +--- +id: 63e02a333354343b595d64ca +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson. + +The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`. + +Remember you can use dot notation for this. + +# --hints-- + +You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); +``` + +You should remove your `console.log` for `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); +``` + +You should use `const` to declare a `sport` variable. + +```js +assert.match(code, /const\s+sport\s*=/); +``` + +You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable. + +```js +assert.equal(sport, myFavoriteFootballTeam.sport); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +myFavoriteFootballTeam.team = "USA"; +console.log(myFavoriteFootballTeam.team); + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md new file mode 100644 index 00000000000..f95ca095c29 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md @@ -0,0 +1,454 @@ +--- +id: 63e0334b7a24bd3c96aca4de +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`. + +# --hints-- + +You should use `const` to declare a `team` variable. + +```js +assert.match(code, /const\s+team\s*=/); +``` + +You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable. + +```js +assert.equal(team, myFavoriteFootballTeam.team); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md new file mode 100644 index 00000000000..ce0835fa4d9 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md @@ -0,0 +1,464 @@ +--- +id: 63e036373fc9173d284e165a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal. + +The object destructuring syntax allows you to unpack values from arrays and objects: + +```js +const developerObj = { + name: "Jessica Wilkins", + isDeveloper: true +}; + +// Object destructuring +const { name, isDeveloper } = developerObj; +``` + +Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code. + +# --hints-- + +Use object destructuring to access the `sport` and `team` values. + +```js + +assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; +const team = myFavoriteFootballTeam.team; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md new file mode 100644 index 00000000000..de3439a814b --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md @@ -0,0 +1,449 @@ +--- +id: 63e03b86008bbb3e1c3de846 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Next, add the `year` and `players` to your destructuring assignment. + +# --hints-- + +You should add the `year` and `players` values to your destructuring assignment. + +```js +assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const { sport, team } = myFavoriteFootballTeam; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md new file mode 100644 index 00000000000..95eda5017a7 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md @@ -0,0 +1,448 @@ +--- +id: 63e042661ad2663f0d468740 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax. + +# --hints-- + +Use object destructuring to access the `coachName` value. + +```js + +assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md new file mode 100644 index 00000000000..8179fd09158 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md @@ -0,0 +1,453 @@ +--- +id: 63e050bf935ac341b88326d6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now you need to start displaying the team's information on the screen. + +Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element. + +Once you complete that task, you should see the result in the preview window. + +# --hints-- + +You should assign the `sport` variable to `typeOfSport.innerHTML`. + +```js + +assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md new file mode 100644 index 00000000000..587342d8d66 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md @@ -0,0 +1,451 @@ +--- +id: 63e05557016dfd45ea49152c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`. + +# --hints-- + +You should assign the `team` variable to `teamName.innerHTML`. + +```js + +assert.match(code, /teamName.innerHTML\s*=\s*team\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md new file mode 100644 index 00000000000..fd77bba607c --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md @@ -0,0 +1,462 @@ +--- +id: 63e05c00b615bb46ac87273a +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`. + +You should now see all of that information displayed on the screen below `Team stats`. + +# --hints-- + +You should assign the `year` variable to `worldCupYear.innerHTML`. + +```js + +assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/) + +``` + +You should assign the `coachName` variable to `headCoach.innerHTML`. + +```js + +assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md new file mode 100644 index 00000000000..64e5e01482a --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md @@ -0,0 +1,479 @@ +--- +id: 63e060df21bca347b2d2b374 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu. + +Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step. + + +# --hints-- + +You should use `const` to declare a `setPlayerCards` variable. + +```js +assert.match(code, /const\s+setPlayerCards\s*=/); +``` + +Your `setPlayerCards` variable should be a function. + +```js +assert.isFunction(setPlayerCards); +``` + +Your `setPlayerCards` function should use arrow syntax. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/); +``` + +Your `setPlayerCards` function should not take a parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/); +``` + +Your `setPlayerCards` function should be empty. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md new file mode 100644 index 00000000000..e2fd95b4278 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md @@ -0,0 +1,470 @@ +--- +id: 63e062d6090ebb486a4eda3a +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used: + +```js +const greeting = (name = "Anonymous") => { + return "Hello " + name; +} + +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + +Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. + +# --hints-- + +Your `setPlayerCards` function should take an `arr` parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/); +``` + +Your `arr` parameter should have a default value of `players`. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + +const setPlayerCards = () => {}; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md new file mode 100644 index 00000000000..c5f10540ae0 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md @@ -0,0 +1,478 @@ +--- +id: 63e949b8327aa2aca2ca8eac +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The next step is to create a new array that will be responsible for adding the player card information to the page. + +Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`. + +Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element. + +# --hints-- + +You should call the `.map()` method on your `arr` parameter. + +```js +assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/); +``` + +Your `.map()` method should take an empty callback function. + +```js +assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); +``` + +You should use the `+=` operator on `playerCards.innerHTML`. + +```js +assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/); +``` + +You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator. + +```js +assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md new file mode 100644 index 00000000000..10556005822 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md @@ -0,0 +1,472 @@ +--- +id: 63e94dae6dcedbad73f2f6ee +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables. + +Here is an example: + +```js +function myExampleFunction({ name, age, job, city }) { + +} +``` + +Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring. + +# --hints-- + +You should unpack all 5 object properties from objects in `arr` using object destructuring. + +```js + +assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/) + + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map(() => { + + }) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md new file mode 100644 index 00000000000..564fb6bb8e0 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md @@ -0,0 +1,467 @@ +--- +id: 63e954321b0a77ae4f6d9650 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +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`. + +# --hints-- + +You should use template literals to add an empty `div` with a class of `player-card`. + + +```js + +assert.match(code, /`\s*\s*<\/div>\s*`\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md new file mode 100644 index 00000000000..b9c104fb55a --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md @@ -0,0 +1,475 @@ +--- +id: 63e95a45dce95baf41dd4f78 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter: + +```js +${expression goes here} +``` + +# --hints-- + +You should add an `h2` element with the `name` parameter. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/) +``` + +Your `h2` should be nested in your `div`. + +```js +assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md new file mode 100644 index 00000000000..53646c4fff0 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md @@ -0,0 +1,467 @@ +--- +id: 63e95e39860dc5b01ebe9be0 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team. + +Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string. + +# --hints-- + +You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md new file mode 100644 index 00000000000..f41577b8e76 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md @@ -0,0 +1,472 @@ +--- +id: 63e9667c881b61b1e338d276 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Position:` followed by the `position` variable. + +```js +assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md new file mode 100644 index 00000000000..edceac6fe11 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md @@ -0,0 +1,472 @@ +--- +id: 63e96938d2a347b2734a1587 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Number:` followed by the `number` variable. + +```js +assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after your existing `p` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md new file mode 100644 index 00000000000..4bb4a4f5aa6 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md @@ -0,0 +1,473 @@ +--- +id: 63e96eb94c97b6b31ee50f63 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Below your existing paragraph elements, add another paragraph element with the text `Nickname:`. + +# --hints-- + +You should add a new paragraph element with the text `Nickname:`. + +```js +assert.match(code, /\s*\s*Nickname:\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md new file mode 100644 index 00000000000..46379d93380 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md @@ -0,0 +1,482 @@ +--- +id: 63e9718d7d490bb3940d5a0a +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next to the `Nickname:` text, add an embedded expression that will show the player's nickname if they have one. + +Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`. + +# --hints-- + +You should use a ternary operator to check if `nickname` is not `null`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/) +``` + +If your ternary is truthy, it should display the player's `nickname`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/) +``` + +If your ternary is falsy, it should display the string `N/A`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname:

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md new file mode 100644 index 00000000000..b4b4d23626a --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md @@ -0,0 +1,477 @@ +--- +id: 63e9737f686c76b4078a60f4 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `.map()` method will return a new array of `player-card` items separated by commas. + +To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method. + + +# --hints-- + +You should chain the `.join()` method to the `.map()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s); +``` + +You should pass an empty string to the `.join()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + `; + } + ) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md new file mode 100644 index 00000000000..e5c273332f2 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md @@ -0,0 +1,485 @@ +--- +id: 63f28972973504e7bb58b0b3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +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. + +# --hints-- + +You should call the `.addEventListener()` method on the `playersDropdownList` variable. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(/); +``` + +Your event listener should listen for the `change` event. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/); +``` + +Your event listener should have an empty callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md new file mode 100644 index 00000000000..8aeee3d3efa --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md @@ -0,0 +1,475 @@ +--- +id: 63f28ef082d771e8bf71f94a +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +For the callback function, pass in `e` as a parameter. + +`e` represents an object which contains the information for that event. + +# --hints-- + +You should pass in `e` as a parameter to your callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + +playersDropdownList.addEventListener("change", () => { + +}); + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md new file mode 100644 index 00000000000..f8bad487511 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -0,0 +1,477 @@ +--- +id: 63f293c804d6f9e9a83ca4c5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Inside the callback function, add a `console.log` with the value of `e.target.value`. + +Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. + +`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. + +# --hints-- + +You should add a `console.log` with the value of `e.target.value`. + +```js +assert.match(code, /console.log\s*\(e.target.value\)\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md new file mode 100644 index 00000000000..a15fd647b37 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md @@ -0,0 +1,489 @@ +--- +id: 63f29804e3ec00ea6fab1ec4 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Remove the `console.log` statement you created in the previous step. + +The next step would be to reset the content for the `playerCards` element. + +Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string. + +# --hints-- + +You should not have the `console.log` statement in your code. + +```js +assert.notMatch(code, /\s*console.log\(e.target.value\)/); +``` + +You should access the `innerHTML` property of the `playerCards` element. + +```js +assert.match(code, /playerCards\.innerHTML\s*=/); +``` + +You should set the `innerHTML` property to an empty string. + +```js +assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + +console.log(e.target.value) + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md new file mode 100644 index 00000000000..1657ba65473 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md @@ -0,0 +1,508 @@ +--- +id: 63f29ce62aea65eb041758c8 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions. + +A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause. + +This is the basic syntax for a `switch` statement: + +```js +switch (expression) { + case 1: + /* + this code will execute + if the case matches the expression + */ + break; + default: + /* + the default will execute if none + of the other cases match the expression + */ +} +``` + +Add a `switch` statement and use `e.target.value` for the expression. + +# --hints-- + +You should use a `switch` statement. + +```js +assert.match(code, /switch/); +``` + +Your `switch` statement should use `e.target.value` for the expression. + +```js +assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/); +``` + +Your `switch` statement should be empty. + +```js +assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md new file mode 100644 index 00000000000..9188483c345 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md @@ -0,0 +1,478 @@ +--- +id: 63f2a0a860790eebe61bf908 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +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. + +# --hints-- + +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*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md new file mode 100644 index 00000000000..cabfe408ca5 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md @@ -0,0 +1,521 @@ +--- +id: 63f2a4a8087e6dec8ec47f16 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +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`. + +Lastly, add a `break` statement below the `setPlayerCards` function call. + +# --hints-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md new file mode 100644 index 00000000000..fbf9f1cb1b8 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md @@ -0,0 +1,517 @@ +--- +id: 63f2a5f09a785aed155c0a56 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/) +``` + +In your `midfielder` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md new file mode 100644 index 00000000000..8666f5ab42e --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md @@ -0,0 +1,521 @@ +--- +id: 63f2a8e14fb388edd3242527 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/) +``` + +In your `defender` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards(players.filter((player) => player.position === "midfielder")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md new file mode 100644 index 00000000000..c41768c86d6 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md @@ -0,0 +1,527 @@ +--- +id: 63f2aa36fcdc63ee4e18fc37 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/) +``` + +In your `goalkeeper` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md new file mode 100644 index 00000000000..6c919ef5e37 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md @@ -0,0 +1,790 @@ +--- +id: 63f2ab4f6c52c5eec6d68de4 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The final step is to add a `default` clause if none of the other `case` clauses match the user selection. + +For the `default` clause, call the `setPlayerCards` function without any arguments passed in. + +Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname. + +Congratulations on completing the football team cards project! + +# --hints-- + +You should add a `default` clause to your `switch` statement. + +```js +assert.match(code, /default\s*:\s*/) +``` + +In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in. + +```js +assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + case "goalkeeper": + setPlayerCards( + players.filter((player) => player.position === "goalkeeper") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` + +# --solutions-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [ + { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, }, + { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, }, + { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", }, + { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", }, + { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", }, + { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", }, + { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", }, + { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, }, + { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", }, + { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", }, + { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", }, + { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, }, + { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, }, + { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, }, + { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", }, + { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, }, + { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, }, + { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, }, + { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", }, + { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, }, + { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", }, + { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], }; + +Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      ` ) .join(""); }; + +playersDropdownList.addEventListener("change", (e) => { playerCards.innerHTML = ""; + + switch (e.target.value) { case "nickname": setPlayerCards(players.filter((player) => player.nickname !== null)); break; case "forward": setPlayerCards(players.filter((player) => player.position === "forward")); break; case "midfielder": setPlayerCards( players.filter((player) => player.position === "midfielder") ); break; case "defender": setPlayerCards( players.filter((player) => player.position === "defender") ); break; case "goalkeeper": setPlayerCards( players.filter((player) => player.position === "goalkeeper") ); break; default: setPlayerCards(); } }); diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md new file mode 100644 index 00000000000..03ddbef793f --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md @@ -0,0 +1,504 @@ +--- +id: 641fc88d8fa7127f76e0324f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + + +Call the `setPlayerCards` function with an argument of `players.filter()`. + +Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`. + +# --hints-- + +In your `nickname` case, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md new file mode 100644 index 00000000000..e084de31fa4 --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md @@ -0,0 +1,488 @@ +--- +id: 641fcfd468185384ac218b7d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Before you can move onto the next case, you will need to add a `break` statement: + +```js + case "example": + // code goes here + break; +``` + +The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement. + +Below your `setPlayerCards` call, add a `break` statement. + +# --hints-- + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md index bfff9dcca8b..306b0083fe7 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md @@ -9,25 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript # --description-- -You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`: +Puoi generare numeri decimali casuali con `Math.random()`, ma a volte devi generare numeri interi casuali. Il seguente processo ti darà un numero intero casuale inferiore a `20`: -1. Use `Math.random()` to generate a random decimal number. -2. Multiply that random decimal number by `20`. -3. Use `Math.floor()` to round this number down to its nearest whole number. +1. Utilizza `Math.random()` per generare un numero decimale casuale. +2. Moltiplica quel numero decimale casuale per `20`. +3. Usa `Math.floor()` per arrotondare il numero per difetto al numero intero più vicino. -Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`. +Ricorda che `Math.random()` non può mai restituire `1`, quindi non è possibile ottenere `20` dato che stai arrotondando con `Math.floor()`. Questo procedimento ti darà un numero intero casuale nell'intervallo da `0` a `19`. -Putting everything together, this is what your code looks like: +Mettendo tutto insieme, questo è il codice: ```js Math.floor(Math.random() * 20); ``` -You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number. +Stai chiamando `Math.random()`, moltiplicando il risultato per 20, quindi passando il valore a `Math.floor()` per arrotondare il valore per difetto al numero intero più vicino. # --instructions-- -Use this technique to generate and return a random whole number in the range from `0` to `9`. +Usa questa tecnica per generare e restituire un numero intero casuale nell'intervallo tra `0` e `9`. # --hints-- @@ -49,7 +49,7 @@ Dovresti usare `Math.random` per generare un numero casuale. assert(code.match(/Math.random/g).length >= 1); ``` -You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine. +Dovresti moltiplicare il risultato di `Math.random` per 10 per ottenere un numero nell'intervallo tra zero e nove. ```js assert( diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md index 672ed55e112..7d3cc854dd0 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md @@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range # --description-- -You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range. +Puoi generare un numero intero casuale nell'intervallo da zero a un dato numero. Puoi anche scegliere un numero inferiore diverso per questo intervallo. -You'll call your minimum number `min` and your maximum number `max`. +Chiamerai il numero minimo `min` e il numero massimo `max`. -This formula gives a random whole number in the range from `min` to `max`. Prenditi un momento per leggerlo e prova a capire cosa sta facendo questo codice: +Questa formula dà un numero intero casuale nell'intervallo da `min` a `max`. Prenditi un momento per leggerlo e prova a capire cosa sta facendo questo codice: ```js Math.floor(Math.random() * (max - min + 1)) + min @@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min # --instructions-- -Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`. +Crea una funzione `randomRange` che prende un intervallo `myMin` e `myMax` e restituisce un numero intero casuale maggiore o uguale di `myMin` e minore o uguale di `myMax`. # --hints-- diff --git a/curriculum/challenges/italian/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/italian/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index 40f5db3a8f7..71e41f27464 100644 --- a/curriculum/challenges/italian/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/italian/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery Ogni elemento HTML ha un elemento `parent` (genitore) dal quale eredita (`inherits`) delle proprietà. -Ad esempio, il tuo elemento `jQuery Playground` di tipo `h3` ha l'elemento genitore di `
      `, che a sua volta ha il genitore `body`. +For example, the `h3` element in your `jQuery Playground` has the parent element of `
      `, which itself has the parent element of `body`. jQuery ha una funzione chiamata `parent()` che consente di accedere al genitore di qualsiasi elemento selezionato. diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/italian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index ea027752999..81af435f362 100644 --- a/curriculum/challenges/italian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/italian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -522,6 +522,7 @@ async(getUserInput) => { date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" + }).replaceAll(',', '') }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352f179bdca23221298a5ba.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352f179bdca23221298a5ba.md index 38a4342ba19..fee48ed138d 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352f179bdca23221298a5ba.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-advanced-array-methods-by-building-a-statistics-calculator/6352f179bdca23221298a5ba.md @@ -37,13 +37,13 @@ La funzione `getRange` dovrebbe usare l'operatore spread sul parametro `array`. assert.match(code.split("getRange")[1], /\.\.\.array/); ``` -Your `getRange` function should use `Math.max` on the spread `array` parameter. +La funzione `getRange` dovrebbe utilizzare `Math.max` sul parametro spread `array`. ```js assert.match(code.split("getRange")[1], /Math\.max\(\s*\.\.\.array\s*\)/); ``` -Your `getRange` function should use `Math.min` on the spread `array` parameter. +La funzione `getRange` dovrebbe utilizzare `Math.min` sul parametro spread `array`. ```js assert.match(code.split("getRange")[1], /Math\.min\(\s*\.\.\.array\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md index cd921506559..490670beb2d 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md @@ -7,7 +7,7 @@ dashedName: step-3 # --description-- -Next is to get your totals. Ottieni gli elementi `#total-items`, `#subtotal`, `#taxes` e `#total`. Salvali in variabili chiamate rispettivamente `totalNumberOfItems`, `cartSubTotal`, `cartTaxes` e `cartTotal`. +Il prossimo passo è ottenere i totali. Ottieni gli elementi `#total-items`, `#subtotal`, `#taxes` e `#total`. Salvali in variabili chiamate rispettivamente `totalNumberOfItems`, `cartSubTotal`, `cartTaxes` e `cartTotal`. # --hints-- diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md index d5f0f000e3f..66953afefa2 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md @@ -7,7 +7,7 @@ dashedName: step-17 # --description-- -La classe `ShoppingCart` ha bisogno della possibilità di aggiungere elementi. Crea un metodo `addItem` vuoto che prende due parametri: `id` e `products`. Creating a method might look like this: +La classe `ShoppingCart` ha bisogno della possibilità di aggiungere elementi. Crea un metodo `addItem` vuoto che prende due parametri: `id` e `products`. La creazione di un metodo ha quest'aspetto: ```js class Computer { diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md index ff1381975a1..f66e95eb38f 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md @@ -7,7 +7,7 @@ dashedName: step-21 # --description-- -You now need a total count of each product that the user has in the cart. Dichiara una variabile `totalCountPerProduct` e assegnale un oggetto vuoto. +Ora hai bisogno del totale di ogni prodotto che l'utente ha nel carrello. Dichiara una variabile `totalCountPerProduct` e assegnale un oggetto vuoto. # --hints-- diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md index 82f9ba77d3f..855aad48a18 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md @@ -7,7 +7,7 @@ dashedName: step-44 # --description-- -Part of the total cost will include the tax, so you need to calculate that as well. Crea un metodo `calculateTaxes` nella classe `ShoppingCart`. Questo metodo dovrebbe prendere un parametro `amount`. +Parte del costo totale è costituito da una tassa, quindi è necessario calcolare anche quest'ultima. Crea un metodo `calculateTaxes` nella classe `ShoppingCart`. Questo metodo dovrebbe prendere un parametro `amount`. # --hints-- diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md index 4d75b73bb85..e00ead578e2 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md @@ -7,7 +7,7 @@ dashedName: step-42 # --description-- -Ogni voce avrà un input di testo per il nome dell'elemento e un input numerico per le calorie. To get a count of the number of entries, you can query by text inputs. Note that you cannot query by number inputs, as you have an extra number input for the user's calorie budget. +Ogni voce avrà un input di testo per il nome dell'elemento e un input numerico per le calorie. Per ottenere il conteggio del numero di voci, è possibile valutare gli input di testo. Nota che non puoi valutare gli input numerici, dato che ci sono input numerici extra per il bilancio di calorie dell'utente. Passa la stringa `input[type="text"]` al metodo `querySelectorAll()`. Ricorda che devi usare le virgolette singole per la stringa, in modo da poter usare le virgolette doppie all'interno. diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md new file mode 100644 index 00000000000..46b4f675589 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -0,0 +1,278 @@ +--- +id: 63c620161fc2b49ac340ffc4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +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`. + +Remember, you can use the `getElementById` method for this. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#team` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +You should use `const` to declare the variable called `teamName` and assign it the `#team` element. + +```js +assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md new file mode 100644 index 00000000000..513b3c3ed99 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md @@ -0,0 +1,287 @@ +--- +id: 63cf7e324c1831f8d936b3ae +title: Step 2 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#sport` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element. + +```js +assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#year` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element. + +```js +assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md new file mode 100644 index 00000000000..080e5e186a1 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md @@ -0,0 +1,289 @@ +--- +id: 63cf7f97e7f99af9348f5068 +title: Step 3 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#head-coach` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element. + +```js +assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#player-cards` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element. + +```js +assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md new file mode 100644 index 00000000000..6afeaf034bf --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md @@ -0,0 +1,279 @@ +--- +id: 63cf812bb8ecd4f9cf749b8f +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#players` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element. + +```js +assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md new file mode 100644 index 00000000000..e306a5ea676 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md @@ -0,0 +1,276 @@ +--- +id: 63cf83fdbb51d9fa54654ae6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now it is time to build out the data structure that will hold all of the information for your football team. + +Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object. + +# --hints-- + +You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object. + +```js +assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md new file mode 100644 index 00000000000..e0b502ce27e --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md @@ -0,0 +1,283 @@ +--- +id: 63cf8ec006a776ff5f6e3c68 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`. + + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `team` property. + +```js +assert.property(myFavoriteFootballTeam, 'team'); +``` + +Your `team` property should be set to `Argentina`. + +```js +assert.equal(myFavoriteFootballTeam.team, 'Argentina'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md new file mode 100644 index 00000000000..ed41bc54c71 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md @@ -0,0 +1,283 @@ +--- +id: 63cf90d4696d8f00851873a4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `sport` property. + +```js +assert.property(myFavoriteFootballTeam, 'sport'); +``` + +Your `team` property should be set to `Football`. + +```js +assert.equal(myFavoriteFootballTeam.sport, 'Football'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md new file mode 100644 index 00000000000..14594da8b08 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md @@ -0,0 +1,290 @@ +--- +id: 63cf91b0ff6e9300ead140cc +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `year` property. + +```js +assert.property(myFavoriteFootballTeam, 'year'); +``` + +Your `year` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.year); +``` + +Your `year` property should be set to `1986`. + +```js +assert.equal(myFavoriteFootballTeam.year, 1986); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md new file mode 100644 index 00000000000..1502bc6914d --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md @@ -0,0 +1,291 @@ +--- +id: 63cf920228531a0145abd0b3 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property. + +```js +assert.property(myFavoriteFootballTeam, 'isWorldCupWinner'); +``` + +Your `isWorldCupWinner` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner); +``` + +Your `isWorldCupWinner` property should be set to `true`. + +```js +assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md new file mode 100644 index 00000000000..33ba5e855e9 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md @@ -0,0 +1,316 @@ +--- +id: 63cf93472de77d01bf8474bf +title: Step 10 +challengeType: 0 +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. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `headCoach` property. + +```js +assert.property(myFavoriteFootballTeam, 'headCoach'); +``` + +Your `headCoach` value should be an object. + +```js +assert.isObject(myFavoriteFootballTeam.headCoach) +``` + +Your `headCoach` object should have a `coachName` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'coachName'); +``` + +Your `coachName` property should be set to `Carlos Bilardo`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo'); +``` + +Your `headCoach` object should have a `matches` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'matches'); +``` + +Your `matches` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.headCoach.matches); +``` + +Your `matches` property should be set to `7`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.matches, 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md new file mode 100644 index 00000000000..6dbedd38e9f --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md @@ -0,0 +1,296 @@ +--- +id: 63d120a05ee93f38353b84c0 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `players` property. + +```js +assert.property(myFavoriteFootballTeam, 'players'); +``` + +Your `players` value should be an array. + +```js +assert.isArray(myFavoriteFootballTeam.players) +``` + +Your `players` array should be empty. + +```js +assert.deepEqual(myFavoriteFootballTeam.players, []) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md new file mode 100644 index 00000000000..c5569d06c04 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md @@ -0,0 +1,369 @@ +--- +id: 63d1214a0ac7a9389793269b +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `players` array, create a new object with the following properties: + + +```md + +name: "Sergio Almirón" +position: "forward" +number: 1 +isCaptain: false +nickname: null + +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have the value of an object. + +```js +assert.isObject(myFavoriteFootballTeam.players[0]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'name'); +``` + +Your `name` property should be set to `Sergio Almirón`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'position'); +``` + +Your `position` property should be set to `forward`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[0]?.number); +``` + +Your `number` property should be set to `1`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.number, 1); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[0]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md new file mode 100644 index 00000000000..7bb2e78b95d --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md @@ -0,0 +1,380 @@ +--- +id: 63d128eaedcc773d2ded2128 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Below that object, create a new object with the following properties: + +```md +name: "Sergio Batista" +position: "midfielder" +number: 2 +isCaptain: false +nickname: null +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have two values. + +```js +// Have to assert at least, because we pre-populate data in the next step. +assert.isAtLeast(myFavoriteFootballTeam.players.length, 2); +``` + +Your `myFavoriteFootballTeam.players` array should have an object as the second value. + +```js +assert.isObject(myFavoriteFootballTeam.players[1]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'name'); +``` + +Your `name` property should be set to `Sergio Batista`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'position'); +``` + +Your `position` property should be set to `midfielder`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[1]?.number); +``` + +Your `number` property should be set to `2`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.number, 2); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[1]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md new file mode 100644 index 00000000000..e117f81605f --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md @@ -0,0 +1,446 @@ +--- +id: 63d12b9c7aaee43de1ba265d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you. + +The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it. + +Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + + +# --hints-- + +You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + +```js +assert.isFrozen(myFavoriteFootballTeam); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md new file mode 100644 index 00000000000..6e03cf91edf --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md @@ -0,0 +1,458 @@ +--- +id: 63d12fe2a595263e8f5084f7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties. + +Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`. + +When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value. + +# --hints-- + +You should assign the `USA` string to `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); + +``` + +You should add a `console.log` for `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md new file mode 100644 index 00000000000..c9a4a2ad0f4 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md @@ -0,0 +1,470 @@ +--- +id: 63e02a333354343b595d64ca +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson. + +The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`. + +Remember you can use dot notation for this. + +# --hints-- + +You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); +``` + +You should remove your `console.log` for `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); +``` + +You should use `const` to declare a `sport` variable. + +```js +assert.match(code, /const\s+sport\s*=/); +``` + +You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable. + +```js +assert.equal(sport, myFavoriteFootballTeam.sport); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +myFavoriteFootballTeam.team = "USA"; +console.log(myFavoriteFootballTeam.team); + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md new file mode 100644 index 00000000000..f95ca095c29 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md @@ -0,0 +1,454 @@ +--- +id: 63e0334b7a24bd3c96aca4de +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`. + +# --hints-- + +You should use `const` to declare a `team` variable. + +```js +assert.match(code, /const\s+team\s*=/); +``` + +You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable. + +```js +assert.equal(team, myFavoriteFootballTeam.team); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md new file mode 100644 index 00000000000..ce0835fa4d9 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md @@ -0,0 +1,464 @@ +--- +id: 63e036373fc9173d284e165a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal. + +The object destructuring syntax allows you to unpack values from arrays and objects: + +```js +const developerObj = { + name: "Jessica Wilkins", + isDeveloper: true +}; + +// Object destructuring +const { name, isDeveloper } = developerObj; +``` + +Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code. + +# --hints-- + +Use object destructuring to access the `sport` and `team` values. + +```js + +assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; +const team = myFavoriteFootballTeam.team; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md new file mode 100644 index 00000000000..de3439a814b --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md @@ -0,0 +1,449 @@ +--- +id: 63e03b86008bbb3e1c3de846 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Next, add the `year` and `players` to your destructuring assignment. + +# --hints-- + +You should add the `year` and `players` values to your destructuring assignment. + +```js +assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const { sport, team } = myFavoriteFootballTeam; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md new file mode 100644 index 00000000000..95eda5017a7 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md @@ -0,0 +1,448 @@ +--- +id: 63e042661ad2663f0d468740 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax. + +# --hints-- + +Use object destructuring to access the `coachName` value. + +```js + +assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md new file mode 100644 index 00000000000..8179fd09158 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md @@ -0,0 +1,453 @@ +--- +id: 63e050bf935ac341b88326d6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now you need to start displaying the team's information on the screen. + +Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element. + +Once you complete that task, you should see the result in the preview window. + +# --hints-- + +You should assign the `sport` variable to `typeOfSport.innerHTML`. + +```js + +assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md new file mode 100644 index 00000000000..587342d8d66 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md @@ -0,0 +1,451 @@ +--- +id: 63e05557016dfd45ea49152c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`. + +# --hints-- + +You should assign the `team` variable to `teamName.innerHTML`. + +```js + +assert.match(code, /teamName.innerHTML\s*=\s*team\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md new file mode 100644 index 00000000000..fd77bba607c --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md @@ -0,0 +1,462 @@ +--- +id: 63e05c00b615bb46ac87273a +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`. + +You should now see all of that information displayed on the screen below `Team stats`. + +# --hints-- + +You should assign the `year` variable to `worldCupYear.innerHTML`. + +```js + +assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/) + +``` + +You should assign the `coachName` variable to `headCoach.innerHTML`. + +```js + +assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md new file mode 100644 index 00000000000..64e5e01482a --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md @@ -0,0 +1,479 @@ +--- +id: 63e060df21bca347b2d2b374 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu. + +Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step. + + +# --hints-- + +You should use `const` to declare a `setPlayerCards` variable. + +```js +assert.match(code, /const\s+setPlayerCards\s*=/); +``` + +Your `setPlayerCards` variable should be a function. + +```js +assert.isFunction(setPlayerCards); +``` + +Your `setPlayerCards` function should use arrow syntax. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/); +``` + +Your `setPlayerCards` function should not take a parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/); +``` + +Your `setPlayerCards` function should be empty. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md new file mode 100644 index 00000000000..e2fd95b4278 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md @@ -0,0 +1,470 @@ +--- +id: 63e062d6090ebb486a4eda3a +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used: + +```js +const greeting = (name = "Anonymous") => { + return "Hello " + name; +} + +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + +Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. + +# --hints-- + +Your `setPlayerCards` function should take an `arr` parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/); +``` + +Your `arr` parameter should have a default value of `players`. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + +const setPlayerCards = () => {}; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md new file mode 100644 index 00000000000..c5f10540ae0 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md @@ -0,0 +1,478 @@ +--- +id: 63e949b8327aa2aca2ca8eac +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The next step is to create a new array that will be responsible for adding the player card information to the page. + +Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`. + +Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element. + +# --hints-- + +You should call the `.map()` method on your `arr` parameter. + +```js +assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/); +``` + +Your `.map()` method should take an empty callback function. + +```js +assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); +``` + +You should use the `+=` operator on `playerCards.innerHTML`. + +```js +assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/); +``` + +You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator. + +```js +assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md new file mode 100644 index 00000000000..10556005822 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md @@ -0,0 +1,472 @@ +--- +id: 63e94dae6dcedbad73f2f6ee +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables. + +Here is an example: + +```js +function myExampleFunction({ name, age, job, city }) { + +} +``` + +Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring. + +# --hints-- + +You should unpack all 5 object properties from objects in `arr` using object destructuring. + +```js + +assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/) + + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map(() => { + + }) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md new file mode 100644 index 00000000000..564fb6bb8e0 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md @@ -0,0 +1,467 @@ +--- +id: 63e954321b0a77ae4f6d9650 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +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`. + +# --hints-- + +You should use template literals to add an empty `div` with a class of `player-card`. + + +```js + +assert.match(code, /`\s*\s*<\/div>\s*`\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md new file mode 100644 index 00000000000..b9c104fb55a --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md @@ -0,0 +1,475 @@ +--- +id: 63e95a45dce95baf41dd4f78 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter: + +```js +${expression goes here} +``` + +# --hints-- + +You should add an `h2` element with the `name` parameter. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/) +``` + +Your `h2` should be nested in your `div`. + +```js +assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md new file mode 100644 index 00000000000..53646c4fff0 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md @@ -0,0 +1,467 @@ +--- +id: 63e95e39860dc5b01ebe9be0 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team. + +Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string. + +# --hints-- + +You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md new file mode 100644 index 00000000000..f41577b8e76 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md @@ -0,0 +1,472 @@ +--- +id: 63e9667c881b61b1e338d276 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Position:` followed by the `position` variable. + +```js +assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md new file mode 100644 index 00000000000..edceac6fe11 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md @@ -0,0 +1,472 @@ +--- +id: 63e96938d2a347b2734a1587 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Number:` followed by the `number` variable. + +```js +assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after your existing `p` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md new file mode 100644 index 00000000000..4bb4a4f5aa6 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md @@ -0,0 +1,473 @@ +--- +id: 63e96eb94c97b6b31ee50f63 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Below your existing paragraph elements, add another paragraph element with the text `Nickname:`. + +# --hints-- + +You should add a new paragraph element with the text `Nickname:`. + +```js +assert.match(code, /\s*\s*Nickname:\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md new file mode 100644 index 00000000000..46379d93380 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md @@ -0,0 +1,482 @@ +--- +id: 63e9718d7d490bb3940d5a0a +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next to the `Nickname:` text, add an embedded expression that will show the player's nickname if they have one. + +Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`. + +# --hints-- + +You should use a ternary operator to check if `nickname` is not `null`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/) +``` + +If your ternary is truthy, it should display the player's `nickname`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/) +``` + +If your ternary is falsy, it should display the string `N/A`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname:

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md new file mode 100644 index 00000000000..b4b4d23626a --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md @@ -0,0 +1,477 @@ +--- +id: 63e9737f686c76b4078a60f4 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `.map()` method will return a new array of `player-card` items separated by commas. + +To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method. + + +# --hints-- + +You should chain the `.join()` method to the `.map()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s); +``` + +You should pass an empty string to the `.join()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + `; + } + ) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md new file mode 100644 index 00000000000..e5c273332f2 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md @@ -0,0 +1,485 @@ +--- +id: 63f28972973504e7bb58b0b3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +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. + +# --hints-- + +You should call the `.addEventListener()` method on the `playersDropdownList` variable. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(/); +``` + +Your event listener should listen for the `change` event. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/); +``` + +Your event listener should have an empty callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md new file mode 100644 index 00000000000..8aeee3d3efa --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md @@ -0,0 +1,475 @@ +--- +id: 63f28ef082d771e8bf71f94a +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +For the callback function, pass in `e` as a parameter. + +`e` represents an object which contains the information for that event. + +# --hints-- + +You should pass in `e` as a parameter to your callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + +playersDropdownList.addEventListener("change", () => { + +}); + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md new file mode 100644 index 00000000000..f8bad487511 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -0,0 +1,477 @@ +--- +id: 63f293c804d6f9e9a83ca4c5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Inside the callback function, add a `console.log` with the value of `e.target.value`. + +Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. + +`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. + +# --hints-- + +You should add a `console.log` with the value of `e.target.value`. + +```js +assert.match(code, /console.log\s*\(e.target.value\)\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md new file mode 100644 index 00000000000..a15fd647b37 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md @@ -0,0 +1,489 @@ +--- +id: 63f29804e3ec00ea6fab1ec4 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Remove the `console.log` statement you created in the previous step. + +The next step would be to reset the content for the `playerCards` element. + +Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string. + +# --hints-- + +You should not have the `console.log` statement in your code. + +```js +assert.notMatch(code, /\s*console.log\(e.target.value\)/); +``` + +You should access the `innerHTML` property of the `playerCards` element. + +```js +assert.match(code, /playerCards\.innerHTML\s*=/); +``` + +You should set the `innerHTML` property to an empty string. + +```js +assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + +console.log(e.target.value) + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md new file mode 100644 index 00000000000..1657ba65473 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md @@ -0,0 +1,508 @@ +--- +id: 63f29ce62aea65eb041758c8 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions. + +A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause. + +This is the basic syntax for a `switch` statement: + +```js +switch (expression) { + case 1: + /* + this code will execute + if the case matches the expression + */ + break; + default: + /* + the default will execute if none + of the other cases match the expression + */ +} +``` + +Add a `switch` statement and use `e.target.value` for the expression. + +# --hints-- + +You should use a `switch` statement. + +```js +assert.match(code, /switch/); +``` + +Your `switch` statement should use `e.target.value` for the expression. + +```js +assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/); +``` + +Your `switch` statement should be empty. + +```js +assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md new file mode 100644 index 00000000000..9188483c345 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md @@ -0,0 +1,478 @@ +--- +id: 63f2a0a860790eebe61bf908 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +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. + +# --hints-- + +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*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md new file mode 100644 index 00000000000..cabfe408ca5 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md @@ -0,0 +1,521 @@ +--- +id: 63f2a4a8087e6dec8ec47f16 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +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`. + +Lastly, add a `break` statement below the `setPlayerCards` function call. + +# --hints-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md new file mode 100644 index 00000000000..fbf9f1cb1b8 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md @@ -0,0 +1,517 @@ +--- +id: 63f2a5f09a785aed155c0a56 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/) +``` + +In your `midfielder` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md new file mode 100644 index 00000000000..8666f5ab42e --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md @@ -0,0 +1,521 @@ +--- +id: 63f2a8e14fb388edd3242527 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/) +``` + +In your `defender` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards(players.filter((player) => player.position === "midfielder")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md new file mode 100644 index 00000000000..c41768c86d6 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md @@ -0,0 +1,527 @@ +--- +id: 63f2aa36fcdc63ee4e18fc37 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/) +``` + +In your `goalkeeper` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md new file mode 100644 index 00000000000..6c919ef5e37 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md @@ -0,0 +1,790 @@ +--- +id: 63f2ab4f6c52c5eec6d68de4 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The final step is to add a `default` clause if none of the other `case` clauses match the user selection. + +For the `default` clause, call the `setPlayerCards` function without any arguments passed in. + +Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname. + +Congratulations on completing the football team cards project! + +# --hints-- + +You should add a `default` clause to your `switch` statement. + +```js +assert.match(code, /default\s*:\s*/) +``` + +In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in. + +```js +assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + case "goalkeeper": + setPlayerCards( + players.filter((player) => player.position === "goalkeeper") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` + +# --solutions-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [ + { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, }, + { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, }, + { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", }, + { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", }, + { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", }, + { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", }, + { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", }, + { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, }, + { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", }, + { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", }, + { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", }, + { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, }, + { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, }, + { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, }, + { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", }, + { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, }, + { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, }, + { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, }, + { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", }, + { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, }, + { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", }, + { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], }; + +Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      ` ) .join(""); }; + +playersDropdownList.addEventListener("change", (e) => { playerCards.innerHTML = ""; + + switch (e.target.value) { case "nickname": setPlayerCards(players.filter((player) => player.nickname !== null)); break; case "forward": setPlayerCards(players.filter((player) => player.position === "forward")); break; case "midfielder": setPlayerCards( players.filter((player) => player.position === "midfielder") ); break; case "defender": setPlayerCards( players.filter((player) => player.position === "defender") ); break; case "goalkeeper": setPlayerCards( players.filter((player) => player.position === "goalkeeper") ); break; default: setPlayerCards(); } }); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md new file mode 100644 index 00000000000..03ddbef793f --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md @@ -0,0 +1,504 @@ +--- +id: 641fc88d8fa7127f76e0324f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + + +Call the `setPlayerCards` function with an argument of `players.filter()`. + +Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`. + +# --hints-- + +In your `nickname` case, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md new file mode 100644 index 00000000000..e084de31fa4 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md @@ -0,0 +1,488 @@ +--- +id: 641fcfd468185384ac218b7d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Before you can move onto the next case, you will need to add a `break` statement: + +```js + case "example": + // code goes here + break; +``` + +The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement. + +Below your `setPlayerCards` call, add a `break` statement. + +# --hints-- + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md index 9afdde2368a..c40d9f27039 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md @@ -7,41 +7,41 @@ dashedName: step-1 # --description-- -To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively. +Per iniziare il progetto, usa il metodo `.getElementById()` per recuperare dal documento HTML gli elementi `#message-input`, `#result` e `#check-message-btn` e assegnali rispettivamente alle variabili `messageInput`, `result` e `checkMessageButton`. # --hints-- -You should use `const` to declare a `messageInput` variable. +Dovresti usare `const` per dichiarare la variabile `messageInput`. ```js assert.match(code, /const\s+messageInput\s*=/); ``` -Your `messageInput` variable should have the value of `document.getElementById('message-input')`. +La variabile `messageInput` dovrebbe avere il valore di `document.getElementById('message-input')`. ```js assert.deepEqual(messageInput, document.getElementById('message-input')); ``` -You should use `const` to declare a `result` variable. +Dovresti usare `const` per dichiarare la variabile `result`. ```js assert.match(code, /const\s+result\s*=/); ``` -Your `result` variable should have the value of `document.getElementById('result')`. +La variabile `result` dovrebbe avere il valore di `document.getElementById('result')`. ```js assert.deepEqual(result, document.getElementById('result')); ``` -You should use `const` to declare a `checkMessageButton` variable. +Dovresti usare `const` per dichiarare la variabile `checkMessageButton`. ```js assert.match(code, /const\s+checkMessageButton\s*=/); ``` -Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`. +La variabile `checkMessageButton` dovrebbe avere il valore di `document.getElementById('check-message-btn')`. ```js assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn')); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd91d28bebe226f765d86.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd91d28bebe226f765d86.md index fe80d09027d..dc536355641 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd91d28bebe226f765d86.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd91d28bebe226f765d86.md @@ -7,23 +7,23 @@ dashedName: step-2 # --description-- -Attach an event listener to your `checkMessageButton`, listening for the `click` event. Give it an empty callback function. +Collega un event listener a `checkMessageButton`, in ascolto per l'evento `click`. Dagli una funzione callback vuota. # --hints-- -You should call `.addEventListener()` on your `checkMessageButton` element. +Dovresti chiamare `.addEventListener()` sull'elemento `checkMessageButton`. ```js assert.match(code, /checkMessageButton\.addEventListener\(/); ``` -Your `.addEventListener()` method should have a `click` event type. +Il metodo `.addEventListener()` dovrebbe avere un evento di tipo `click`. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,/); ``` -Your `.addEventListener()` method should have an empty callback function. +Il metodo `.addEventListener()` dovrebbe avere una funzione callback vuota. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md index e030b927fe8..86d303b9af0 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md @@ -7,31 +7,31 @@ dashedName: step-3 # --description-- -If the `messageInput` is empty, display an alert to the user with the message `Please enter a message.`. +Se `messageInput` è vuoto, mostra un avviso all'utente con il messaggio `Please enter a message.`. -Then, exit the function execution. +Poi, esci dall'esecuzione della funzione. # --hints-- -Your callback function should have an `if` statement. +La funzione callback dovrebbe avere un'istruzione `if`. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(/) ``` -Your `if` statement should check if the `value` of `messageInput` is an empty string. +L'istruzione `if` dovrebbe controllare se il `value` di `messageInput` è una stringa vuota. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)/) ``` -Your `if` statement should display an alert to the user with the message `Please enter a message.`. +L'istruzione `if` dovrebbe mostrare un avviso all'utente con il messaggio `Please enter a message.`. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\)/) ``` -Your `if` statement should exit the function execution. +L'istruzione `if` dovrebbe terminare l'esecuzione della funzione. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*\}/) diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md index a4040bef0ab..27167ffaf26 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md @@ -7,29 +7,29 @@ dashedName: step-4 # --description-- -Create an `isSpam` function using the `const` keyword and arrow syntax. The function should take a single parameter `msg` and implicitly return `false` for now. +Crea una funzione `isSpam` usando la parola chiave `const` e la sintassi freccia. La funzione dovrebbe prendere un singolo parametro `msg` e restituire implicitamente `false` per ora. # --hints-- -You should use `const` to delcare an `isSpam` variable. +Dovresti usare `const` per dichiarare la variabile `isSpam`. ```js assert.match(code, /const\s+isSpam\s*=/); ``` -You should use arrow syntax to assign `isSpam` a function. +Dovresti usare la sintassi freccia per assegnare a `isSpam` una funzione. ```js assert.match(code, /const\s+isSpam\s*=\s*\(?.*\)?\s*=>/); ``` -Your `isSpam` function should have a single `msg` parameter. +La funzione `isSpam` dovrebbe avere un singolo parametro `msg`. ```js assert.match(code, /const\s+isSpam\s*=\s*\(?\s*msg\s*\)?/); ``` -Your `isSpam` function should implicitly return `false`. +La funzione `isSpam` dovrebbe restituire implicitamente `false`. ```js assert.match(code, /const\s+isSpam\s*=\s*\(?\s*msg\s*\)?\s*=>\s*false;?/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md index 269cc030d8f..eab142c8799 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md @@ -7,27 +7,27 @@ dashedName: step-5 # --description-- -Back in your event listener, you need to update the text of the `result` element. +Tornando all'event listener, devi aggiornare il testo dell'elemento `result`. -Use a ternary operator to update the text of the `result` element after the `if` statement. Check the truthiness of calling `isSpam()` on the value of the `messageInput` element. If true, set the text to `Oh no! This looks like a spam message.`. Otherwise, set the text to `This message does not seem to contain any spam.` +Usa un operatore ternario per aggiornare il testo dell'elemento `result` dopo l'istruzione `if`. Controlla la veridicità della chiamata `isSpam()` sull'attributo value dell'elemento `messageInput`. If true, set the text to `Oh no! This looks like a spam message.`. Altrimenti, imposta il testo su `This message does not seem to contain any spam.` -Then set the `messageInput` element's value to an empty string. +Quindi imposta l'attributo value dell'elemento `messageInput` su una stringa vuota. # --hints-- -You should use the assignment operator to set the `textContent` property of the `result` element. +Dovresti usare l'operatore di assegnazione per impostare la proprietà `textContent` dell'elemento `result`. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*/) ``` -You should assign the `isSpam()` function call to `result.textContent`. +Dovresti assegnare la chiamata della funzione `isSpam()` a `result.textContent`. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)/) ``` -You should use ternary syntax to check the truthiness of `isSpam(messageInput.value)`. +Dovresti usare la sintassi ternaria per controllare la veridicità di `isSpam(messageInput.value)`. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)\s*\?/) @@ -39,13 +39,13 @@ The truthy expression of your ternary should set the `textContent` property of t assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)\s*\?\s*('|"|`)Oh no! This looks like a spam message.\4\s*:/); ``` -The falsy expression of your ternary should set the `textContent` property of the `result` element to `This message does not seem to contain any spam.`. +L'espressione falsy dell'operatore ternario dovrebbe impostare la proprietà `textContent` dell'elemento `result` su `This message does not seem to contain any spam.`. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)\s*\?\s*('|"|`)Oh no! This looks like a spam message.\4\s*:\s*('|"|`)This message does not seem to contain any spam.\5;?\s*/); ``` -After your ternary, set the `value` of `messageInput` to an empty string. +Dopo l'operatore ternario, imposta il `value` di `messageInput` su una stringa vuota. ```js assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)\s*\?\s*('|"|`)Oh no! This looks like a spam message.\4\s*:\s*('|"|`)This message does not seem to contain any spam.\5;?\s*messageInput\.value\s*=\s*('|"|`)\6;?\s*\}/) diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md index 4b9ba9bc1af..8cef732c124 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md @@ -7,9 +7,9 @@ dashedName: step-6 # --description-- -Your first regular expression will be used to catch help requests. Declare a `helpRegex` variable, and assign it a regular expression that matches the string `please help`. +La tua prima espressione regolare sarà usata per intercettare le richieste di aiuto. Dichiara una variabile `helpRegex` e assegnale un'espressione regolare che corrisponde alla stringa `please help`. -As a refresher, here is a regular expression to match the string `hello world`: +Come promemoria, ecco un'espressione regolare che corrisponde alla stringa `hello world`: ```js const regex = /hello world/; @@ -17,19 +17,19 @@ const regex = /hello world/; # --hints-- -You should use `const` to declare a `helpRegex` variable. +Dovresti usare `const` per dichiarare la variabile `helpRegex`. ```js assert.match(code, /const\s+helpRegex\s*=/); ``` -Your `helpRegex` variable should be a regular expression. +La variabile `helpRegex` dovrebbe essere un'espressione regolare. ```js assert.instanceOf(helpRegex, RegExp); ``` -Your `helpRegex` variable should match the string `please help`. +La variabile `helpRegex` dovrebbe corrispondere alla stringa `please help`. ```js assert.match('please help', helpRegex); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md index c0028fec254..c84cf33b33d 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md @@ -7,13 +7,13 @@ dashedName: step-7 # --description-- -Regular expressions can take flags to modify their behavior. For instance, the `i` flag can be used to make the expression ignore case, causing it to match `hello`, `HELLO`, and `Hello` for the expression `/hello/`. +Le espressioni regolari possono prendere dei flag per modificare il loro comportamento. Per esempio, il flag `i` può essere usato fare in modo che l'espressione ignori maiuscole e minuscole, trovando corrispondenza con `hello`, `HELLO` e `Hello` per l'espressione `/hello/`. -Flags are added after the trailing backslash. Add the `i` flag to your `helpRegex`. +I flag vengono aggiunti dopo la barra obliqua finale. Aggiungi il flag `i` a `helpRegex`. # --hints-- -Your `helpRegex` should have the case-insensitive `i` flag. +L'espressione regolare `helpRegex` dovrebbe utilizzare il flag `i` per la sensibilità a maiuscole e minuscole. ```js assert.include(helpRegex.flags, 'i'); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md index aa5f5c1bb48..f96aa4641c8 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md @@ -7,15 +7,15 @@ dashedName: step-8 # --description-- -Strings have a `.match()` method, which accepts a regular expression as an argument and determines if the string matches that expression. +Le stringhe hanno un metodo `.match()`, che accetta un'espressione regolare come argomento e determina se una stringa corrisponde a quella espressione. -Update your `isSpam()` function to implicitly return the result of calling the `.match()` method on `msg`, passing `helpRegex` as the argument. +Aggiorna la funzione `isSpam()` per restituire implicitamente il risultato della chiamata del metodo `.match()` su `msg`, passando `helpRegex` come argomento. -Then, try entering some messages on your page and see the result. +Quindi, prova a inserire alcuni messaggi sulla pagina e vedere il risultato. # --hints-- -Your `isSpam()` function should implicitly return the result of `msg.match(helpRegex)`. +La funzione `isSpam()` dovrebbe restituire implicitamente il risultato di `msg.match(helpRegex)`. ```js assert.match(code, /const\s*isSpam\s*=\s*\(msg\)\s*=>\s*msg\.match\(helpRegex\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md index 318d7db7662..9c1c7d69d9f 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md @@ -7,15 +7,15 @@ dashedName: step-9 # --description-- -Instead of using the `.match()` method, you can use the `.test()` method of a regular expression to test if a string matches the pattern. Unlike `.match()`, `.test()` returns a boolean value indicating whether or not the string matches the pattern. +Invece di utilizzare il metodo `.match()`, puoi utilizzare il metodo `.test()` di un'espressione regolare per verificare se una stringa corrisponde al pattern. A differenza di `.match()`, `.test()` restituisce un valore booleano che indica se la stringa corrisponde o meno al pattern. -Update your `isSpam()` function to use the `.test()` method of `helpRegex` to test if `msg` is a match. +Aggiorna la funzione `isSpam()` per utilizzare il metodo `.test()` su `helpRegex` per testare se c'è un riscontro con `msg`. -Then, try entering some messages on your page and see the result. +Quindi, prova a inserire alcuni messaggi sulla pagina e vedere il risultato. # --hints-- -Your `isSpam()` function should implicitly return the result of `helpRegex.test(msg)`. +La funzione `isSpam()` dovrebbe restituire implicitamente il risultato di `helpRegex.test(msg)`. ```js assert.match(code, /const\s*isSpam\s*=\s*\(msg\)\s*=>\s*helpRegex\.test\(msg\)/); diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md index db22a7b6b2f..8a6882f6b96 100644 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md @@ -7,9 +7,9 @@ dashedName: step-10 # --description-- -The alternate sequence `|` can be used to match either the text on the left or the text on the right of the `|`. For example, the regular expression `/yes|no/` will match either `yes` or `no`. +The alternate sequence `|` can be used to match either the text on the left or the text on the right of the `|`. Ad esempio, l'espressione regolare `/yes|no/` corrisponderà a `yes` o `no`. -Update your `helpRegex` to match either `please help` or `assist me`. +Aggiorna `helpRegex` per trovare corrispondenza con `please help` o `assist me`. # --hints-- @@ -19,13 +19,13 @@ Your `helpRegex` should use the `|` alternate sequence. assert.match(helpRegex.toString(), /\|/); ``` -Your `helpRegex` should match the string `please help`. +`helpRegex` dovrebbe corrispondere alla stringa `please help`. ```js assert.match('please help', helpRegex); ``` -Your `helpRegex` should match the string `assist me`. +`helpRegex` dovrebbe corrispondere alla stringa `assist me`. ```js assert.match('assist me', helpRegex); diff --git a/curriculum/challenges/italian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/italian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md index 2c7996cf13c..ee767489e56 100644 --- a/curriculum/challenges/italian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md +++ b/curriculum/challenges/italian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md @@ -9,7 +9,7 @@ dashedName: build-a-data-graph-explorer Lavorerai a questo progetto con Google Colaboratory. -Once you complete the project, submit your project link below. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione del link per "anyone with the link" +Una volta completato il progetto, invia il link del progetto qui sotto. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione del link per "anyone with the link" # --instructions-- diff --git a/curriculum/challenges/italian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/italian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md index ca81cb9619a..7fc78cf73fd 100644 --- a/curriculum/challenges/italian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md +++ b/curriculum/challenges/italian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md @@ -9,7 +9,7 @@ dashedName: build-three-math-games Lavorerai a questo progetto con Google Colaboratory. -Once you complete the project, submit your project link below. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione del link per "anyone with the link" +Una volta completato il progetto, invia il link del progetto qui sotto. Se stai inviando un link di Google Colaboratory, assicurati di attivare la condivisione del link per "anyone with the link" # --instructions-- diff --git a/curriculum/challenges/japanese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/japanese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index df3d16c4978..e118128ab88 100644 --- a/curriculum/challenges/japanese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/japanese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery すべての HTML 要素には `parent` (親) 要素があり、そこからプロパティを `inherits` (継承) します。 -たとえば、`jQuery Playground` の `h3` 要素は `
      ` という親要素を持ち、それ自身は親の `body` を持ちます。 +For example, the `h3` element in your `jQuery Playground` has the parent element of `
      `, which itself has the parent element of `body`. jQuery には `parent()` という関数があり、選択した要素の親要素にアクセスすることができます。 diff --git a/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 39ad53a5eb6..ea371d84236 100644 --- a/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -522,6 +522,7 @@ async(getUserInput) => { date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" + }).replaceAll(',', '') }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md new file mode 100644 index 00000000000..46b4f675589 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -0,0 +1,278 @@ +--- +id: 63c620161fc2b49ac340ffc4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +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`. + +Remember, you can use the `getElementById` method for this. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#team` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +You should use `const` to declare the variable called `teamName` and assign it the `#team` element. + +```js +assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md new file mode 100644 index 00000000000..513b3c3ed99 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md @@ -0,0 +1,287 @@ +--- +id: 63cf7e324c1831f8d936b3ae +title: Step 2 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#sport` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element. + +```js +assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#year` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element. + +```js +assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md new file mode 100644 index 00000000000..080e5e186a1 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md @@ -0,0 +1,289 @@ +--- +id: 63cf7f97e7f99af9348f5068 +title: Step 3 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#head-coach` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element. + +```js +assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#player-cards` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element. + +```js +assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md new file mode 100644 index 00000000000..6afeaf034bf --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md @@ -0,0 +1,279 @@ +--- +id: 63cf812bb8ecd4f9cf749b8f +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#players` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element. + +```js +assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md new file mode 100644 index 00000000000..e306a5ea676 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md @@ -0,0 +1,276 @@ +--- +id: 63cf83fdbb51d9fa54654ae6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now it is time to build out the data structure that will hold all of the information for your football team. + +Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object. + +# --hints-- + +You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object. + +```js +assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md new file mode 100644 index 00000000000..e0b502ce27e --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md @@ -0,0 +1,283 @@ +--- +id: 63cf8ec006a776ff5f6e3c68 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`. + + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `team` property. + +```js +assert.property(myFavoriteFootballTeam, 'team'); +``` + +Your `team` property should be set to `Argentina`. + +```js +assert.equal(myFavoriteFootballTeam.team, 'Argentina'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md new file mode 100644 index 00000000000..ed41bc54c71 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md @@ -0,0 +1,283 @@ +--- +id: 63cf90d4696d8f00851873a4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `sport` property. + +```js +assert.property(myFavoriteFootballTeam, 'sport'); +``` + +Your `team` property should be set to `Football`. + +```js +assert.equal(myFavoriteFootballTeam.sport, 'Football'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md new file mode 100644 index 00000000000..14594da8b08 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md @@ -0,0 +1,290 @@ +--- +id: 63cf91b0ff6e9300ead140cc +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `year` property. + +```js +assert.property(myFavoriteFootballTeam, 'year'); +``` + +Your `year` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.year); +``` + +Your `year` property should be set to `1986`. + +```js +assert.equal(myFavoriteFootballTeam.year, 1986); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md new file mode 100644 index 00000000000..1502bc6914d --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md @@ -0,0 +1,291 @@ +--- +id: 63cf920228531a0145abd0b3 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property. + +```js +assert.property(myFavoriteFootballTeam, 'isWorldCupWinner'); +``` + +Your `isWorldCupWinner` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner); +``` + +Your `isWorldCupWinner` property should be set to `true`. + +```js +assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md new file mode 100644 index 00000000000..33ba5e855e9 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md @@ -0,0 +1,316 @@ +--- +id: 63cf93472de77d01bf8474bf +title: Step 10 +challengeType: 0 +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. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `headCoach` property. + +```js +assert.property(myFavoriteFootballTeam, 'headCoach'); +``` + +Your `headCoach` value should be an object. + +```js +assert.isObject(myFavoriteFootballTeam.headCoach) +``` + +Your `headCoach` object should have a `coachName` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'coachName'); +``` + +Your `coachName` property should be set to `Carlos Bilardo`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo'); +``` + +Your `headCoach` object should have a `matches` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'matches'); +``` + +Your `matches` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.headCoach.matches); +``` + +Your `matches` property should be set to `7`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.matches, 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md new file mode 100644 index 00000000000..6dbedd38e9f --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md @@ -0,0 +1,296 @@ +--- +id: 63d120a05ee93f38353b84c0 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `players` property. + +```js +assert.property(myFavoriteFootballTeam, 'players'); +``` + +Your `players` value should be an array. + +```js +assert.isArray(myFavoriteFootballTeam.players) +``` + +Your `players` array should be empty. + +```js +assert.deepEqual(myFavoriteFootballTeam.players, []) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md new file mode 100644 index 00000000000..c5569d06c04 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md @@ -0,0 +1,369 @@ +--- +id: 63d1214a0ac7a9389793269b +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `players` array, create a new object with the following properties: + + +```md + +name: "Sergio Almirón" +position: "forward" +number: 1 +isCaptain: false +nickname: null + +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have the value of an object. + +```js +assert.isObject(myFavoriteFootballTeam.players[0]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'name'); +``` + +Your `name` property should be set to `Sergio Almirón`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'position'); +``` + +Your `position` property should be set to `forward`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[0]?.number); +``` + +Your `number` property should be set to `1`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.number, 1); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[0]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md new file mode 100644 index 00000000000..7bb2e78b95d --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md @@ -0,0 +1,380 @@ +--- +id: 63d128eaedcc773d2ded2128 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Below that object, create a new object with the following properties: + +```md +name: "Sergio Batista" +position: "midfielder" +number: 2 +isCaptain: false +nickname: null +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have two values. + +```js +// Have to assert at least, because we pre-populate data in the next step. +assert.isAtLeast(myFavoriteFootballTeam.players.length, 2); +``` + +Your `myFavoriteFootballTeam.players` array should have an object as the second value. + +```js +assert.isObject(myFavoriteFootballTeam.players[1]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'name'); +``` + +Your `name` property should be set to `Sergio Batista`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'position'); +``` + +Your `position` property should be set to `midfielder`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[1]?.number); +``` + +Your `number` property should be set to `2`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.number, 2); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[1]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md new file mode 100644 index 00000000000..e117f81605f --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md @@ -0,0 +1,446 @@ +--- +id: 63d12b9c7aaee43de1ba265d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you. + +The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it. + +Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + + +# --hints-- + +You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + +```js +assert.isFrozen(myFavoriteFootballTeam); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md new file mode 100644 index 00000000000..6e03cf91edf --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md @@ -0,0 +1,458 @@ +--- +id: 63d12fe2a595263e8f5084f7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties. + +Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`. + +When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value. + +# --hints-- + +You should assign the `USA` string to `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); + +``` + +You should add a `console.log` for `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md new file mode 100644 index 00000000000..c9a4a2ad0f4 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md @@ -0,0 +1,470 @@ +--- +id: 63e02a333354343b595d64ca +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson. + +The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`. + +Remember you can use dot notation for this. + +# --hints-- + +You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); +``` + +You should remove your `console.log` for `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); +``` + +You should use `const` to declare a `sport` variable. + +```js +assert.match(code, /const\s+sport\s*=/); +``` + +You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable. + +```js +assert.equal(sport, myFavoriteFootballTeam.sport); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +myFavoriteFootballTeam.team = "USA"; +console.log(myFavoriteFootballTeam.team); + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md new file mode 100644 index 00000000000..f95ca095c29 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md @@ -0,0 +1,454 @@ +--- +id: 63e0334b7a24bd3c96aca4de +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`. + +# --hints-- + +You should use `const` to declare a `team` variable. + +```js +assert.match(code, /const\s+team\s*=/); +``` + +You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable. + +```js +assert.equal(team, myFavoriteFootballTeam.team); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md new file mode 100644 index 00000000000..ce0835fa4d9 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md @@ -0,0 +1,464 @@ +--- +id: 63e036373fc9173d284e165a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal. + +The object destructuring syntax allows you to unpack values from arrays and objects: + +```js +const developerObj = { + name: "Jessica Wilkins", + isDeveloper: true +}; + +// Object destructuring +const { name, isDeveloper } = developerObj; +``` + +Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code. + +# --hints-- + +Use object destructuring to access the `sport` and `team` values. + +```js + +assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; +const team = myFavoriteFootballTeam.team; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md new file mode 100644 index 00000000000..de3439a814b --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md @@ -0,0 +1,449 @@ +--- +id: 63e03b86008bbb3e1c3de846 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Next, add the `year` and `players` to your destructuring assignment. + +# --hints-- + +You should add the `year` and `players` values to your destructuring assignment. + +```js +assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const { sport, team } = myFavoriteFootballTeam; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md new file mode 100644 index 00000000000..95eda5017a7 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md @@ -0,0 +1,448 @@ +--- +id: 63e042661ad2663f0d468740 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax. + +# --hints-- + +Use object destructuring to access the `coachName` value. + +```js + +assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md new file mode 100644 index 00000000000..8179fd09158 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md @@ -0,0 +1,453 @@ +--- +id: 63e050bf935ac341b88326d6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now you need to start displaying the team's information on the screen. + +Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element. + +Once you complete that task, you should see the result in the preview window. + +# --hints-- + +You should assign the `sport` variable to `typeOfSport.innerHTML`. + +```js + +assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md new file mode 100644 index 00000000000..587342d8d66 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md @@ -0,0 +1,451 @@ +--- +id: 63e05557016dfd45ea49152c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`. + +# --hints-- + +You should assign the `team` variable to `teamName.innerHTML`. + +```js + +assert.match(code, /teamName.innerHTML\s*=\s*team\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md new file mode 100644 index 00000000000..fd77bba607c --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md @@ -0,0 +1,462 @@ +--- +id: 63e05c00b615bb46ac87273a +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`. + +You should now see all of that information displayed on the screen below `Team stats`. + +# --hints-- + +You should assign the `year` variable to `worldCupYear.innerHTML`. + +```js + +assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/) + +``` + +You should assign the `coachName` variable to `headCoach.innerHTML`. + +```js + +assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md new file mode 100644 index 00000000000..64e5e01482a --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md @@ -0,0 +1,479 @@ +--- +id: 63e060df21bca347b2d2b374 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu. + +Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step. + + +# --hints-- + +You should use `const` to declare a `setPlayerCards` variable. + +```js +assert.match(code, /const\s+setPlayerCards\s*=/); +``` + +Your `setPlayerCards` variable should be a function. + +```js +assert.isFunction(setPlayerCards); +``` + +Your `setPlayerCards` function should use arrow syntax. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/); +``` + +Your `setPlayerCards` function should not take a parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/); +``` + +Your `setPlayerCards` function should be empty. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md new file mode 100644 index 00000000000..e2fd95b4278 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md @@ -0,0 +1,470 @@ +--- +id: 63e062d6090ebb486a4eda3a +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used: + +```js +const greeting = (name = "Anonymous") => { + return "Hello " + name; +} + +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + +Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. + +# --hints-- + +Your `setPlayerCards` function should take an `arr` parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/); +``` + +Your `arr` parameter should have a default value of `players`. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + +const setPlayerCards = () => {}; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md new file mode 100644 index 00000000000..c5f10540ae0 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md @@ -0,0 +1,478 @@ +--- +id: 63e949b8327aa2aca2ca8eac +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The next step is to create a new array that will be responsible for adding the player card information to the page. + +Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`. + +Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element. + +# --hints-- + +You should call the `.map()` method on your `arr` parameter. + +```js +assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/); +``` + +Your `.map()` method should take an empty callback function. + +```js +assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); +``` + +You should use the `+=` operator on `playerCards.innerHTML`. + +```js +assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/); +``` + +You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator. + +```js +assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md new file mode 100644 index 00000000000..10556005822 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md @@ -0,0 +1,472 @@ +--- +id: 63e94dae6dcedbad73f2f6ee +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables. + +Here is an example: + +```js +function myExampleFunction({ name, age, job, city }) { + +} +``` + +Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring. + +# --hints-- + +You should unpack all 5 object properties from objects in `arr` using object destructuring. + +```js + +assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/) + + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map(() => { + + }) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md new file mode 100644 index 00000000000..564fb6bb8e0 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md @@ -0,0 +1,467 @@ +--- +id: 63e954321b0a77ae4f6d9650 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +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`. + +# --hints-- + +You should use template literals to add an empty `div` with a class of `player-card`. + + +```js + +assert.match(code, /`\s*\s*<\/div>\s*`\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md new file mode 100644 index 00000000000..b9c104fb55a --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md @@ -0,0 +1,475 @@ +--- +id: 63e95a45dce95baf41dd4f78 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter: + +```js +${expression goes here} +``` + +# --hints-- + +You should add an `h2` element with the `name` parameter. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/) +``` + +Your `h2` should be nested in your `div`. + +```js +assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md new file mode 100644 index 00000000000..53646c4fff0 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md @@ -0,0 +1,467 @@ +--- +id: 63e95e39860dc5b01ebe9be0 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team. + +Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string. + +# --hints-- + +You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md new file mode 100644 index 00000000000..f41577b8e76 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md @@ -0,0 +1,472 @@ +--- +id: 63e9667c881b61b1e338d276 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Position:` followed by the `position` variable. + +```js +assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md new file mode 100644 index 00000000000..edceac6fe11 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md @@ -0,0 +1,472 @@ +--- +id: 63e96938d2a347b2734a1587 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Number:` followed by the `number` variable. + +```js +assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after your existing `p` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md new file mode 100644 index 00000000000..4bb4a4f5aa6 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md @@ -0,0 +1,473 @@ +--- +id: 63e96eb94c97b6b31ee50f63 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Below your existing paragraph elements, add another paragraph element with the text `Nickname:`. + +# --hints-- + +You should add a new paragraph element with the text `Nickname:`. + +```js +assert.match(code, /\s*\s*Nickname:\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md new file mode 100644 index 00000000000..46379d93380 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md @@ -0,0 +1,482 @@ +--- +id: 63e9718d7d490bb3940d5a0a +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next to the `Nickname:` text, add an embedded expression that will show the player's nickname if they have one. + +Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`. + +# --hints-- + +You should use a ternary operator to check if `nickname` is not `null`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/) +``` + +If your ternary is truthy, it should display the player's `nickname`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/) +``` + +If your ternary is falsy, it should display the string `N/A`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname:

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md new file mode 100644 index 00000000000..b4b4d23626a --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md @@ -0,0 +1,477 @@ +--- +id: 63e9737f686c76b4078a60f4 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `.map()` method will return a new array of `player-card` items separated by commas. + +To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method. + + +# --hints-- + +You should chain the `.join()` method to the `.map()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s); +``` + +You should pass an empty string to the `.join()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + `; + } + ) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md new file mode 100644 index 00000000000..e5c273332f2 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md @@ -0,0 +1,485 @@ +--- +id: 63f28972973504e7bb58b0b3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +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. + +# --hints-- + +You should call the `.addEventListener()` method on the `playersDropdownList` variable. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(/); +``` + +Your event listener should listen for the `change` event. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/); +``` + +Your event listener should have an empty callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md new file mode 100644 index 00000000000..8aeee3d3efa --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md @@ -0,0 +1,475 @@ +--- +id: 63f28ef082d771e8bf71f94a +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +For the callback function, pass in `e` as a parameter. + +`e` represents an object which contains the information for that event. + +# --hints-- + +You should pass in `e` as a parameter to your callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + +playersDropdownList.addEventListener("change", () => { + +}); + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md new file mode 100644 index 00000000000..f8bad487511 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -0,0 +1,477 @@ +--- +id: 63f293c804d6f9e9a83ca4c5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Inside the callback function, add a `console.log` with the value of `e.target.value`. + +Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. + +`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. + +# --hints-- + +You should add a `console.log` with the value of `e.target.value`. + +```js +assert.match(code, /console.log\s*\(e.target.value\)\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md new file mode 100644 index 00000000000..a15fd647b37 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md @@ -0,0 +1,489 @@ +--- +id: 63f29804e3ec00ea6fab1ec4 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Remove the `console.log` statement you created in the previous step. + +The next step would be to reset the content for the `playerCards` element. + +Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string. + +# --hints-- + +You should not have the `console.log` statement in your code. + +```js +assert.notMatch(code, /\s*console.log\(e.target.value\)/); +``` + +You should access the `innerHTML` property of the `playerCards` element. + +```js +assert.match(code, /playerCards\.innerHTML\s*=/); +``` + +You should set the `innerHTML` property to an empty string. + +```js +assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + +console.log(e.target.value) + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md new file mode 100644 index 00000000000..1657ba65473 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md @@ -0,0 +1,508 @@ +--- +id: 63f29ce62aea65eb041758c8 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions. + +A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause. + +This is the basic syntax for a `switch` statement: + +```js +switch (expression) { + case 1: + /* + this code will execute + if the case matches the expression + */ + break; + default: + /* + the default will execute if none + of the other cases match the expression + */ +} +``` + +Add a `switch` statement and use `e.target.value` for the expression. + +# --hints-- + +You should use a `switch` statement. + +```js +assert.match(code, /switch/); +``` + +Your `switch` statement should use `e.target.value` for the expression. + +```js +assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/); +``` + +Your `switch` statement should be empty. + +```js +assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md new file mode 100644 index 00000000000..9188483c345 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md @@ -0,0 +1,478 @@ +--- +id: 63f2a0a860790eebe61bf908 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +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. + +# --hints-- + +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*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md new file mode 100644 index 00000000000..cabfe408ca5 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md @@ -0,0 +1,521 @@ +--- +id: 63f2a4a8087e6dec8ec47f16 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +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`. + +Lastly, add a `break` statement below the `setPlayerCards` function call. + +# --hints-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md new file mode 100644 index 00000000000..fbf9f1cb1b8 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md @@ -0,0 +1,517 @@ +--- +id: 63f2a5f09a785aed155c0a56 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/) +``` + +In your `midfielder` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md new file mode 100644 index 00000000000..8666f5ab42e --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md @@ -0,0 +1,521 @@ +--- +id: 63f2a8e14fb388edd3242527 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/) +``` + +In your `defender` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards(players.filter((player) => player.position === "midfielder")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md new file mode 100644 index 00000000000..c41768c86d6 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md @@ -0,0 +1,527 @@ +--- +id: 63f2aa36fcdc63ee4e18fc37 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/) +``` + +In your `goalkeeper` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md new file mode 100644 index 00000000000..6c919ef5e37 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md @@ -0,0 +1,790 @@ +--- +id: 63f2ab4f6c52c5eec6d68de4 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The final step is to add a `default` clause if none of the other `case` clauses match the user selection. + +For the `default` clause, call the `setPlayerCards` function without any arguments passed in. + +Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname. + +Congratulations on completing the football team cards project! + +# --hints-- + +You should add a `default` clause to your `switch` statement. + +```js +assert.match(code, /default\s*:\s*/) +``` + +In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in. + +```js +assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + case "goalkeeper": + setPlayerCards( + players.filter((player) => player.position === "goalkeeper") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` + +# --solutions-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [ + { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, }, + { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, }, + { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", }, + { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", }, + { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", }, + { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", }, + { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", }, + { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, }, + { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", }, + { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", }, + { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", }, + { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, }, + { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, }, + { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, }, + { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", }, + { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, }, + { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, }, + { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, }, + { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", }, + { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, }, + { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", }, + { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], }; + +Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      ` ) .join(""); }; + +playersDropdownList.addEventListener("change", (e) => { playerCards.innerHTML = ""; + + switch (e.target.value) { case "nickname": setPlayerCards(players.filter((player) => player.nickname !== null)); break; case "forward": setPlayerCards(players.filter((player) => player.position === "forward")); break; case "midfielder": setPlayerCards( players.filter((player) => player.position === "midfielder") ); break; case "defender": setPlayerCards( players.filter((player) => player.position === "defender") ); break; case "goalkeeper": setPlayerCards( players.filter((player) => player.position === "goalkeeper") ); break; default: setPlayerCards(); } }); diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md new file mode 100644 index 00000000000..03ddbef793f --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md @@ -0,0 +1,504 @@ +--- +id: 641fc88d8fa7127f76e0324f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + + +Call the `setPlayerCards` function with an argument of `players.filter()`. + +Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`. + +# --hints-- + +In your `nickname` case, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md new file mode 100644 index 00000000000..e084de31fa4 --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md @@ -0,0 +1,488 @@ +--- +id: 641fcfd468185384ac218b7d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Before you can move onto the next case, you will need to add a `break` statement: + +```js + case "example": + // code goes here + break; +``` + +The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement. + +Below your `setPlayerCards` call, add a `break` statement. + +# --hints-- + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/portuguese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/portuguese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index c134b453f51..72d9657942f 100644 --- a/curriculum/challenges/portuguese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/portuguese/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery Todo elemento HTML possui um elemento `parent` do qual `inherits` (herda) propriedades. -Por exemplo, seu elemento `jQuery Playground` `h3` tem o elemento parente de `
      `, o qual ele mesmo possui o parente `body`. +For example, the `h3` element in your `jQuery Playground` has the parent element of `
      `, which itself has the parent element of `body`. O jQuery possui uma função chamada `parent()` que o permite acessar o parente de qualquer elemento que você selecionou. diff --git a/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 7669e16a893..33f8c2d5026 100644 --- a/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -522,6 +522,7 @@ async(getUserInput) => { date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" + }).replaceAll(',', '') }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md new file mode 100644 index 00000000000..46b4f675589 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -0,0 +1,278 @@ +--- +id: 63c620161fc2b49ac340ffc4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +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`. + +Remember, you can use the `getElementById` method for this. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#team` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +You should use `const` to declare the variable called `teamName` and assign it the `#team` element. + +```js +assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md new file mode 100644 index 00000000000..513b3c3ed99 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md @@ -0,0 +1,287 @@ +--- +id: 63cf7e324c1831f8d936b3ae +title: Step 2 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#sport` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element. + +```js +assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#year` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element. + +```js +assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md new file mode 100644 index 00000000000..080e5e186a1 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md @@ -0,0 +1,289 @@ +--- +id: 63cf7f97e7f99af9348f5068 +title: Step 3 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#head-coach` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element. + +```js +assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#player-cards` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element. + +```js +assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md new file mode 100644 index 00000000000..6afeaf034bf --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md @@ -0,0 +1,279 @@ +--- +id: 63cf812bb8ecd4f9cf749b8f +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#players` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element. + +```js +assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md new file mode 100644 index 00000000000..e306a5ea676 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md @@ -0,0 +1,276 @@ +--- +id: 63cf83fdbb51d9fa54654ae6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now it is time to build out the data structure that will hold all of the information for your football team. + +Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object. + +# --hints-- + +You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object. + +```js +assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md new file mode 100644 index 00000000000..e0b502ce27e --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md @@ -0,0 +1,283 @@ +--- +id: 63cf8ec006a776ff5f6e3c68 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`. + + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `team` property. + +```js +assert.property(myFavoriteFootballTeam, 'team'); +``` + +Your `team` property should be set to `Argentina`. + +```js +assert.equal(myFavoriteFootballTeam.team, 'Argentina'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md new file mode 100644 index 00000000000..ed41bc54c71 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md @@ -0,0 +1,283 @@ +--- +id: 63cf90d4696d8f00851873a4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `sport` property. + +```js +assert.property(myFavoriteFootballTeam, 'sport'); +``` + +Your `team` property should be set to `Football`. + +```js +assert.equal(myFavoriteFootballTeam.sport, 'Football'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md new file mode 100644 index 00000000000..14594da8b08 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md @@ -0,0 +1,290 @@ +--- +id: 63cf91b0ff6e9300ead140cc +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `year` property. + +```js +assert.property(myFavoriteFootballTeam, 'year'); +``` + +Your `year` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.year); +``` + +Your `year` property should be set to `1986`. + +```js +assert.equal(myFavoriteFootballTeam.year, 1986); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md new file mode 100644 index 00000000000..1502bc6914d --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md @@ -0,0 +1,291 @@ +--- +id: 63cf920228531a0145abd0b3 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property. + +```js +assert.property(myFavoriteFootballTeam, 'isWorldCupWinner'); +``` + +Your `isWorldCupWinner` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner); +``` + +Your `isWorldCupWinner` property should be set to `true`. + +```js +assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md new file mode 100644 index 00000000000..33ba5e855e9 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md @@ -0,0 +1,316 @@ +--- +id: 63cf93472de77d01bf8474bf +title: Step 10 +challengeType: 0 +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. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `headCoach` property. + +```js +assert.property(myFavoriteFootballTeam, 'headCoach'); +``` + +Your `headCoach` value should be an object. + +```js +assert.isObject(myFavoriteFootballTeam.headCoach) +``` + +Your `headCoach` object should have a `coachName` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'coachName'); +``` + +Your `coachName` property should be set to `Carlos Bilardo`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo'); +``` + +Your `headCoach` object should have a `matches` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'matches'); +``` + +Your `matches` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.headCoach.matches); +``` + +Your `matches` property should be set to `7`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.matches, 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md new file mode 100644 index 00000000000..6dbedd38e9f --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md @@ -0,0 +1,296 @@ +--- +id: 63d120a05ee93f38353b84c0 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `players` property. + +```js +assert.property(myFavoriteFootballTeam, 'players'); +``` + +Your `players` value should be an array. + +```js +assert.isArray(myFavoriteFootballTeam.players) +``` + +Your `players` array should be empty. + +```js +assert.deepEqual(myFavoriteFootballTeam.players, []) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md new file mode 100644 index 00000000000..c5569d06c04 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md @@ -0,0 +1,369 @@ +--- +id: 63d1214a0ac7a9389793269b +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `players` array, create a new object with the following properties: + + +```md + +name: "Sergio Almirón" +position: "forward" +number: 1 +isCaptain: false +nickname: null + +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have the value of an object. + +```js +assert.isObject(myFavoriteFootballTeam.players[0]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'name'); +``` + +Your `name` property should be set to `Sergio Almirón`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'position'); +``` + +Your `position` property should be set to `forward`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[0]?.number); +``` + +Your `number` property should be set to `1`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.number, 1); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[0]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md new file mode 100644 index 00000000000..7bb2e78b95d --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md @@ -0,0 +1,380 @@ +--- +id: 63d128eaedcc773d2ded2128 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Below that object, create a new object with the following properties: + +```md +name: "Sergio Batista" +position: "midfielder" +number: 2 +isCaptain: false +nickname: null +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have two values. + +```js +// Have to assert at least, because we pre-populate data in the next step. +assert.isAtLeast(myFavoriteFootballTeam.players.length, 2); +``` + +Your `myFavoriteFootballTeam.players` array should have an object as the second value. + +```js +assert.isObject(myFavoriteFootballTeam.players[1]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'name'); +``` + +Your `name` property should be set to `Sergio Batista`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'position'); +``` + +Your `position` property should be set to `midfielder`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[1]?.number); +``` + +Your `number` property should be set to `2`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.number, 2); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[1]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md new file mode 100644 index 00000000000..e117f81605f --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md @@ -0,0 +1,446 @@ +--- +id: 63d12b9c7aaee43de1ba265d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you. + +The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it. + +Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + + +# --hints-- + +You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + +```js +assert.isFrozen(myFavoriteFootballTeam); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md new file mode 100644 index 00000000000..6e03cf91edf --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md @@ -0,0 +1,458 @@ +--- +id: 63d12fe2a595263e8f5084f7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties. + +Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`. + +When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value. + +# --hints-- + +You should assign the `USA` string to `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); + +``` + +You should add a `console.log` for `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md new file mode 100644 index 00000000000..c9a4a2ad0f4 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md @@ -0,0 +1,470 @@ +--- +id: 63e02a333354343b595d64ca +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson. + +The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`. + +Remember you can use dot notation for this. + +# --hints-- + +You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); +``` + +You should remove your `console.log` for `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); +``` + +You should use `const` to declare a `sport` variable. + +```js +assert.match(code, /const\s+sport\s*=/); +``` + +You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable. + +```js +assert.equal(sport, myFavoriteFootballTeam.sport); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +myFavoriteFootballTeam.team = "USA"; +console.log(myFavoriteFootballTeam.team); + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md new file mode 100644 index 00000000000..f95ca095c29 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md @@ -0,0 +1,454 @@ +--- +id: 63e0334b7a24bd3c96aca4de +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`. + +# --hints-- + +You should use `const` to declare a `team` variable. + +```js +assert.match(code, /const\s+team\s*=/); +``` + +You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable. + +```js +assert.equal(team, myFavoriteFootballTeam.team); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md new file mode 100644 index 00000000000..ce0835fa4d9 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md @@ -0,0 +1,464 @@ +--- +id: 63e036373fc9173d284e165a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal. + +The object destructuring syntax allows you to unpack values from arrays and objects: + +```js +const developerObj = { + name: "Jessica Wilkins", + isDeveloper: true +}; + +// Object destructuring +const { name, isDeveloper } = developerObj; +``` + +Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code. + +# --hints-- + +Use object destructuring to access the `sport` and `team` values. + +```js + +assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; +const team = myFavoriteFootballTeam.team; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md new file mode 100644 index 00000000000..de3439a814b --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md @@ -0,0 +1,449 @@ +--- +id: 63e03b86008bbb3e1c3de846 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Next, add the `year` and `players` to your destructuring assignment. + +# --hints-- + +You should add the `year` and `players` values to your destructuring assignment. + +```js +assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const { sport, team } = myFavoriteFootballTeam; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md new file mode 100644 index 00000000000..95eda5017a7 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md @@ -0,0 +1,448 @@ +--- +id: 63e042661ad2663f0d468740 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax. + +# --hints-- + +Use object destructuring to access the `coachName` value. + +```js + +assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md new file mode 100644 index 00000000000..8179fd09158 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md @@ -0,0 +1,453 @@ +--- +id: 63e050bf935ac341b88326d6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now you need to start displaying the team's information on the screen. + +Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element. + +Once you complete that task, you should see the result in the preview window. + +# --hints-- + +You should assign the `sport` variable to `typeOfSport.innerHTML`. + +```js + +assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md new file mode 100644 index 00000000000..587342d8d66 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md @@ -0,0 +1,451 @@ +--- +id: 63e05557016dfd45ea49152c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`. + +# --hints-- + +You should assign the `team` variable to `teamName.innerHTML`. + +```js + +assert.match(code, /teamName.innerHTML\s*=\s*team\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md new file mode 100644 index 00000000000..fd77bba607c --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md @@ -0,0 +1,462 @@ +--- +id: 63e05c00b615bb46ac87273a +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`. + +You should now see all of that information displayed on the screen below `Team stats`. + +# --hints-- + +You should assign the `year` variable to `worldCupYear.innerHTML`. + +```js + +assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/) + +``` + +You should assign the `coachName` variable to `headCoach.innerHTML`. + +```js + +assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md new file mode 100644 index 00000000000..64e5e01482a --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md @@ -0,0 +1,479 @@ +--- +id: 63e060df21bca347b2d2b374 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu. + +Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step. + + +# --hints-- + +You should use `const` to declare a `setPlayerCards` variable. + +```js +assert.match(code, /const\s+setPlayerCards\s*=/); +``` + +Your `setPlayerCards` variable should be a function. + +```js +assert.isFunction(setPlayerCards); +``` + +Your `setPlayerCards` function should use arrow syntax. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/); +``` + +Your `setPlayerCards` function should not take a parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/); +``` + +Your `setPlayerCards` function should be empty. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md new file mode 100644 index 00000000000..e2fd95b4278 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md @@ -0,0 +1,470 @@ +--- +id: 63e062d6090ebb486a4eda3a +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used: + +```js +const greeting = (name = "Anonymous") => { + return "Hello " + name; +} + +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + +Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. + +# --hints-- + +Your `setPlayerCards` function should take an `arr` parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/); +``` + +Your `arr` parameter should have a default value of `players`. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + +const setPlayerCards = () => {}; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md new file mode 100644 index 00000000000..c5f10540ae0 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md @@ -0,0 +1,478 @@ +--- +id: 63e949b8327aa2aca2ca8eac +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The next step is to create a new array that will be responsible for adding the player card information to the page. + +Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`. + +Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element. + +# --hints-- + +You should call the `.map()` method on your `arr` parameter. + +```js +assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/); +``` + +Your `.map()` method should take an empty callback function. + +```js +assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); +``` + +You should use the `+=` operator on `playerCards.innerHTML`. + +```js +assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/); +``` + +You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator. + +```js +assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md new file mode 100644 index 00000000000..10556005822 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md @@ -0,0 +1,472 @@ +--- +id: 63e94dae6dcedbad73f2f6ee +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables. + +Here is an example: + +```js +function myExampleFunction({ name, age, job, city }) { + +} +``` + +Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring. + +# --hints-- + +You should unpack all 5 object properties from objects in `arr` using object destructuring. + +```js + +assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/) + + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map(() => { + + }) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md new file mode 100644 index 00000000000..564fb6bb8e0 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md @@ -0,0 +1,467 @@ +--- +id: 63e954321b0a77ae4f6d9650 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +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`. + +# --hints-- + +You should use template literals to add an empty `div` with a class of `player-card`. + + +```js + +assert.match(code, /`\s*\s*<\/div>\s*`\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md new file mode 100644 index 00000000000..b9c104fb55a --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md @@ -0,0 +1,475 @@ +--- +id: 63e95a45dce95baf41dd4f78 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter: + +```js +${expression goes here} +``` + +# --hints-- + +You should add an `h2` element with the `name` parameter. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/) +``` + +Your `h2` should be nested in your `div`. + +```js +assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md new file mode 100644 index 00000000000..53646c4fff0 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md @@ -0,0 +1,467 @@ +--- +id: 63e95e39860dc5b01ebe9be0 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team. + +Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string. + +# --hints-- + +You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md new file mode 100644 index 00000000000..f41577b8e76 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md @@ -0,0 +1,472 @@ +--- +id: 63e9667c881b61b1e338d276 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Position:` followed by the `position` variable. + +```js +assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md new file mode 100644 index 00000000000..edceac6fe11 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md @@ -0,0 +1,472 @@ +--- +id: 63e96938d2a347b2734a1587 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Number:` followed by the `number` variable. + +```js +assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after your existing `p` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md new file mode 100644 index 00000000000..4bb4a4f5aa6 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md @@ -0,0 +1,473 @@ +--- +id: 63e96eb94c97b6b31ee50f63 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Below your existing paragraph elements, add another paragraph element with the text `Nickname:`. + +# --hints-- + +You should add a new paragraph element with the text `Nickname:`. + +```js +assert.match(code, /\s*\s*Nickname:\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md new file mode 100644 index 00000000000..46379d93380 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md @@ -0,0 +1,482 @@ +--- +id: 63e9718d7d490bb3940d5a0a +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next to the `Nickname:` text, add an embedded expression that will show the player's nickname if they have one. + +Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`. + +# --hints-- + +You should use a ternary operator to check if `nickname` is not `null`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/) +``` + +If your ternary is truthy, it should display the player's `nickname`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/) +``` + +If your ternary is falsy, it should display the string `N/A`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname:

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md new file mode 100644 index 00000000000..b4b4d23626a --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md @@ -0,0 +1,477 @@ +--- +id: 63e9737f686c76b4078a60f4 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `.map()` method will return a new array of `player-card` items separated by commas. + +To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method. + + +# --hints-- + +You should chain the `.join()` method to the `.map()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s); +``` + +You should pass an empty string to the `.join()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + `; + } + ) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md new file mode 100644 index 00000000000..e5c273332f2 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md @@ -0,0 +1,485 @@ +--- +id: 63f28972973504e7bb58b0b3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +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. + +# --hints-- + +You should call the `.addEventListener()` method on the `playersDropdownList` variable. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(/); +``` + +Your event listener should listen for the `change` event. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/); +``` + +Your event listener should have an empty callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md new file mode 100644 index 00000000000..8aeee3d3efa --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md @@ -0,0 +1,475 @@ +--- +id: 63f28ef082d771e8bf71f94a +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +For the callback function, pass in `e` as a parameter. + +`e` represents an object which contains the information for that event. + +# --hints-- + +You should pass in `e` as a parameter to your callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + +playersDropdownList.addEventListener("change", () => { + +}); + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md new file mode 100644 index 00000000000..f8bad487511 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -0,0 +1,477 @@ +--- +id: 63f293c804d6f9e9a83ca4c5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Inside the callback function, add a `console.log` with the value of `e.target.value`. + +Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. + +`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. + +# --hints-- + +You should add a `console.log` with the value of `e.target.value`. + +```js +assert.match(code, /console.log\s*\(e.target.value\)\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md new file mode 100644 index 00000000000..a15fd647b37 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md @@ -0,0 +1,489 @@ +--- +id: 63f29804e3ec00ea6fab1ec4 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Remove the `console.log` statement you created in the previous step. + +The next step would be to reset the content for the `playerCards` element. + +Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string. + +# --hints-- + +You should not have the `console.log` statement in your code. + +```js +assert.notMatch(code, /\s*console.log\(e.target.value\)/); +``` + +You should access the `innerHTML` property of the `playerCards` element. + +```js +assert.match(code, /playerCards\.innerHTML\s*=/); +``` + +You should set the `innerHTML` property to an empty string. + +```js +assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + +console.log(e.target.value) + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md new file mode 100644 index 00000000000..1657ba65473 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md @@ -0,0 +1,508 @@ +--- +id: 63f29ce62aea65eb041758c8 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions. + +A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause. + +This is the basic syntax for a `switch` statement: + +```js +switch (expression) { + case 1: + /* + this code will execute + if the case matches the expression + */ + break; + default: + /* + the default will execute if none + of the other cases match the expression + */ +} +``` + +Add a `switch` statement and use `e.target.value` for the expression. + +# --hints-- + +You should use a `switch` statement. + +```js +assert.match(code, /switch/); +``` + +Your `switch` statement should use `e.target.value` for the expression. + +```js +assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/); +``` + +Your `switch` statement should be empty. + +```js +assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md new file mode 100644 index 00000000000..9188483c345 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md @@ -0,0 +1,478 @@ +--- +id: 63f2a0a860790eebe61bf908 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +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. + +# --hints-- + +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*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md new file mode 100644 index 00000000000..cabfe408ca5 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md @@ -0,0 +1,521 @@ +--- +id: 63f2a4a8087e6dec8ec47f16 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +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`. + +Lastly, add a `break` statement below the `setPlayerCards` function call. + +# --hints-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md new file mode 100644 index 00000000000..fbf9f1cb1b8 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md @@ -0,0 +1,517 @@ +--- +id: 63f2a5f09a785aed155c0a56 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/) +``` + +In your `midfielder` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md new file mode 100644 index 00000000000..8666f5ab42e --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md @@ -0,0 +1,521 @@ +--- +id: 63f2a8e14fb388edd3242527 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/) +``` + +In your `defender` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards(players.filter((player) => player.position === "midfielder")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md new file mode 100644 index 00000000000..c41768c86d6 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md @@ -0,0 +1,527 @@ +--- +id: 63f2aa36fcdc63ee4e18fc37 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/) +``` + +In your `goalkeeper` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md new file mode 100644 index 00000000000..6c919ef5e37 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md @@ -0,0 +1,790 @@ +--- +id: 63f2ab4f6c52c5eec6d68de4 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The final step is to add a `default` clause if none of the other `case` clauses match the user selection. + +For the `default` clause, call the `setPlayerCards` function without any arguments passed in. + +Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname. + +Congratulations on completing the football team cards project! + +# --hints-- + +You should add a `default` clause to your `switch` statement. + +```js +assert.match(code, /default\s*:\s*/) +``` + +In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in. + +```js +assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + case "goalkeeper": + setPlayerCards( + players.filter((player) => player.position === "goalkeeper") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` + +# --solutions-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [ + { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, }, + { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, }, + { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", }, + { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", }, + { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", }, + { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", }, + { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", }, + { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, }, + { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", }, + { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", }, + { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", }, + { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, }, + { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, }, + { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, }, + { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", }, + { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, }, + { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, }, + { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, }, + { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", }, + { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, }, + { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", }, + { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], }; + +Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      ` ) .join(""); }; + +playersDropdownList.addEventListener("change", (e) => { playerCards.innerHTML = ""; + + switch (e.target.value) { case "nickname": setPlayerCards(players.filter((player) => player.nickname !== null)); break; case "forward": setPlayerCards(players.filter((player) => player.position === "forward")); break; case "midfielder": setPlayerCards( players.filter((player) => player.position === "midfielder") ); break; case "defender": setPlayerCards( players.filter((player) => player.position === "defender") ); break; case "goalkeeper": setPlayerCards( players.filter((player) => player.position === "goalkeeper") ); break; default: setPlayerCards(); } }); diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md new file mode 100644 index 00000000000..03ddbef793f --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md @@ -0,0 +1,504 @@ +--- +id: 641fc88d8fa7127f76e0324f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + + +Call the `setPlayerCards` function with an argument of `players.filter()`. + +Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`. + +# --hints-- + +In your `nickname` case, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md new file mode 100644 index 00000000000..e084de31fa4 --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md @@ -0,0 +1,488 @@ +--- +id: 641fcfd468185384ac218b7d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Before you can move onto the next case, you will need to add a `break` statement: + +```js + case "example": + // code goes here + break; +``` + +The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement. + +Below your `setPlayerCards` call, add a `break` statement. + +# --hints-- + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md index 07084dca5d4..5ac7e0f33e1 100644 --- a/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md +++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md @@ -9,7 +9,7 @@ dashedName: build-a-data-graph-explorer Você vai trabalhar neste projeto com o Google Colaboratory. -Once you complete the project, submit your project link below. Se você estiver enviando um link do Google Colaboratory, certifique-se de ativar o compartilhamento de links para "qualquer um com o link". +Depois de completar o projeto, envie o link dele abaixo. Se você estiver enviando um link do Google Colaboratory, certifique-se de ativar o compartilhamento de links para "qualquer um com o link". # --instructions-- diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md index 41f513ecb4e..e2388cb283d 100644 --- a/curriculum/challenges/portuguese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md +++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md @@ -9,7 +9,7 @@ dashedName: build-three-math-games Você vai trabalhar neste projeto com o Google Colaboratory. -Once you complete the project, submit your project link below. Se você estiver enviando um link do Google Colaboratory, certifique-se de ativar o compartilhamento de links para "qualquer um com o link". +Depois de completar o projeto, envie o link dele abaixo. Se você estiver enviando um link do Google Colaboratory, certifique-se de ativar o compartilhamento de links para "qualquer um com o link". # --instructions-- diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-18-maximum-path-sum-i.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-18-maximum-path-sum-i.md index f0d97a950b2..66a853c4a53 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-18-maximum-path-sum-i.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-18-maximum-path-sum-i.md @@ -1,6 +1,6 @@ --- id: 5900f37e1000cf542c50fe91 -title: 'Problem 18: Maximum path sum I' +title: 'Problema 18: Soma do caminho I' challengeType: 1 forumTopicId: 301815 dashedName: problem-18-maximum-path-sum-i @@ -8,7 +8,7 @@ dashedName: problem-18-maximum-path-sum-i # --description-- -By starting at the top of the triangle below and moving to adjacent numbers on the row below, the maximum total from top to bottom is 23. +Começando no topo do triângulo abaixo e movendo-se para os números adjacentes na linha abaixo, o total máximo de cima para baixo é 23. 3
      @@ -17,9 +17,9 @@ By starting at the top of the triangle below and moving to adjacent numbers on t 8 5 9 3
      -That is, 3 + 7 + 4 + 9 = 23. +Ou seja, 3 + 7 + 4 + 9 = 23. -Find the maximum total from top to bottom of the triangle below: +Calcule o máximo total do topo até o final do triângulo abaixo: 75 95 64 @@ -37,23 +37,23 @@ Find the maximum total from top to bottom of the triangle below: 63 66 04 68 89 53 67 30 73 16 69 87 40 31 04 62 98 27 23 09 70 98 73 93 38 53 60 04 23 -**NOTE:** As there are only 16384 routes, it is possible to solve this problem by trying every route. However, Problem 67, is the same challenge with a triangle containing one-hundred rows; it cannot be solved by brute force, and requires a clever method! ;o) +**Observação:** como existem apenas 16384 rotas, é possível resolver este problema tentando cada rota. No entanto, o problema 67 (que você verá futuramente) aborda este mesmo desafio, com a diferença que o triângulo contém cem linhas. Portanto, não pode ser resolvido pela força bruta e requer um método inteligente! ;o) # --hints-- -`maximumPathSumI(testTriangle)` should return a number. +`maximumPathSumI(testTriangle)` deve retornar um número. ```js assert(typeof maximumPathSumI(testTriangle) === 'number'); ``` -`maximumPathSumI(testTriangle)` should return 23. +`maximumPathSumI(testTriangle)` deve retornar 23. ```js assert.strictEqual(maximumPathSumI(testTriangle), 23); ``` -`maximumPathSumI(numTriangle)` should return 1074. +`maximumPathSumI(numTriangle)` deve retornar 1074. ```js assert.strictEqual(maximumPathSumI(numTriangle), 1074); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-28-number-spiral-diagonals.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-28-number-spiral-diagonals.md index eee50073f68..ae0a5819ce5 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-28-number-spiral-diagonals.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-28-number-spiral-diagonals.md @@ -1,6 +1,6 @@ --- id: 5900f3881000cf542c50fe9b -title: 'Problem 28: Number spiral diagonals' +title: 'Problema 28: Soma dos números nas diagonais' challengeType: 1 forumTopicId: 301930 dashedName: problem-28-number-spiral-diagonals @@ -8,7 +8,7 @@ dashedName: problem-28-number-spiral-diagonals # --description-- -Starting with the number 1 and moving to the right in a clockwise direction a 5 by 5 spiral is formed as follows: +Começando com o número 1 e movendo-se para a direita no sentido horário, uma espiral de 5x5 é formada:
      21
      22 23 24
      25

      @@ -18,37 +18,37 @@ Starting with the number 1 and moving to the right in a clockwise direction a 5
      17
      16 15 14
      13

      -It can be verified that the sum of the numbers on the diagonals is 101. +É possível verificar que a soma dos números nas diagonais é 101. -What is the sum of the numbers on the diagonals in an `n` by `n` spiral formed in the same way? +Qual é a soma dos números nas diagonais em uma espiral `n` x `n` formada do mesmo modo? # --hints-- -`spiralDiagonals(101)` should return a number. +`spiralDiagonals(101)` deve retornar um número. ```js assert(typeof spiralDiagonals(101) === 'number'); ``` -`spiralDiagonals(101)` should return 692101. +`spiralDiagonals(101)` deve retornar 692101. ```js assert(spiralDiagonals(101) == 692101); ``` -`spiralDiagonals(303)` should return 18591725. +`spiralDiagonals(303)` deve retornar 18591725. ```js assert(spiralDiagonals(303) == 18591725); ``` -`spiralDiagonals(505)` should return 85986601. +`spiralDiagonals(505)` deve retornar 85986601. ```js assert(spiralDiagonals(505) == 85986601); ``` -`spiralDiagonals(1001)` should return 669171001. +`spiralDiagonals(1001)` deve retornar 669171001. ```js assert(spiralDiagonals(1001) == 669171001); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-59-xor-decryption.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-59-xor-decryption.md index 0784e292908..cb806286858 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-59-xor-decryption.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-59-xor-decryption.md @@ -1,6 +1,6 @@ --- id: 5900f3a81000cf542c50feba -title: 'Problem 59: XOR decryption' +title: 'Problema 59: Descriptografia XOR' challengeType: 1 forumTopicId: 302170 dashedName: problem-59-xor-decryption @@ -8,25 +8,25 @@ dashedName: problem-59-xor-decryption # --description-- -Each character on a computer is assigned a unique code and the preferred standard is ASCII (American Standard Code for Information Interchange). For example, uppercase A = 65, asterisk (\*) = 42, and lowercase k = 107. +Cada caractere em um computador é atribuído a um código único. O padrão preferido é o ASCII (American Standard Code for Information Interchange). Por exemplo: a letra A maiúscula = 65, asterisco * = 42 e a letra k minúscula = 107. -A modern encryption method is to take a text file, convert the bytes to ASCII, then XOR each byte with a given value, taken from a secret key. The advantage with the XOR function is that using the same encryption key on the cipher text, restores the plain text; for example, 65 XOR 42 = 107, then 107 XOR 42 = 65. +Um dos métodos de criptografia moderno é pegar um arquivo de texto, converter seus bytes para ASCII e então XOR cada byte com um determinado valor, retirado de uma chave secreta. A vantagem da função XOR é que usar a mesma chave de criptografia no texto criptografado restaura o texto ao seu conteúdo original. Por exemplo: 65 XOR 42 = 107, depois 107 XOR 42 = 65. -For unbreakable encryption, the key is the same length as the plain text message, and the key is made up of random bytes. The user would keep the encrypted message and the encryption key in different locations, and without both "halves", it is impossible to decrypt the message. +Para uma criptografia inquebrável, a chave deve ter o mesmo comprimento que a mensagem de texto e a chave deve ser composta por bytes aleatórios. O usuário deve manter a mensagem criptografada e a chave de criptografia em diferentes locais. Sem possuir ambas, é impossível descriptografar a mensagem. -Unfortunately, this method is impractical for most users, so the modified method is to use a password as a key. If the password is shorter than the message, which is likely, the key is repeated cyclically throughout the message. The balance for this method is using a sufficiently long password key for security, but short enough to be memorable. +Infelizmente, este método é inviável para a maioria das pessoas e, por isso, o método modificado é usar uma senha como chave. Se a senha for menor que a mensagem, o que é comum, a senha é repetida ciclicamente em toda a mensagem. O equilíbrio aqui está em usar uma senha suficientemente longa para segurança, mas curta o suficiente para ser memorizável. -Your task has been made easy, as the encryption key consists of three lower case characters. Using `cipher`, an array containing the encrypted ASCII codes, and the knowledge that the plain text must contain common English words, decrypt the message and find the sum of the ASCII values in the original text. +Neste desafio, sua tarefa foi facilitada. A chave de criptografia consiste em apenas três caracteres minúsculos. Usando `cipher`, um array contendo códigos ASCII criptografados, e o conhecimento de que o conteúdo do texto contém apenas palavras comuns em inglês, descriptografe a mensagem e encontre a soma dos valores em ASCII no texto original. # --hints-- -`XORDecryption(cipher)` should return a number. +`XORDecryption(cipher)` deve retornar um número. ```js assert(typeof XORDecryption(cipher) === 'number'); ``` -`XORDecryption(cipher)` should return 129448. +`XORDecryption(cipher)` deve retornar 129448. ```js assert.strictEqual(XORDecryption(cipher), 129448); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-62-cubic-permutations.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-62-cubic-permutations.md index a89d136f83c..807ea5ee272 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-62-cubic-permutations.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-62-cubic-permutations.md @@ -1,6 +1,6 @@ --- id: 5900f3aa1000cf542c50febd -title: 'Problem 62: Cubic permutations' +title: 'Problema 62: Permutações cúbicas' challengeType: 1 forumTopicId: 302174 dashedName: problem-62-cubic-permutations @@ -8,37 +8,37 @@ dashedName: problem-62-cubic-permutations # --description-- -The cube, 41063625 ($345^3$), can be permuted to produce two other cubes: 56623104 ($384^3$) and 66430125 ($405^3$). In fact, 41063625 is the smallest cube which has exactly three permutations of its digits which are also cube. +O número 41063625 é o resultado do cubo ($345^3$). Esse número pode ser permutado para produzir dois outros números que também são resultados de um cubo: 56623104 ($384^3$) e 66430125 ($405^3$). 41063625 é o menor número que tem exatamente três permutações dos seus algarismos e essas permutações também são o resultado de um cubo. -Find the smallest cube for which exactly `n` permutations of its digits are cube. +Encontre o menor cubo onde `n` permutações de seus algarismos são cubos. # --hints-- -`cubicPermutations(2)` should return a number. +`cubicPermutations(2)` deve retornar um número. ```js assert(typeof cubicPermutations(2) === 'number'); ``` -`cubicPermutations(2)` should return `125`. +`cubicPermutations(2)` deve retornar `125`. ```js assert.strictEqual(cubicPermutations(2), 125); ``` -`cubicPermutations(3)` should return `41063625`. +`cubicPermutations(3)` deve retornar `41063625`. ```js assert.strictEqual(cubicPermutations(3), 41063625); ``` -`cubicPermutations(4)` should return `1006012008`. +`cubicPermutations(4)` deve retornar `1006012008`. ```js assert.strictEqual(cubicPermutations(4), 1006012008); ``` -`cubicPermutations(5)` should return `127035954683`. +`cubicPermutations(5)` deve retornar `127035954683`. ```js assert.strictEqual(cubicPermutations(5), 127035954683); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-75-singular-integer-right-triangles.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-75-singular-integer-right-triangles.md index 40ab4fb3e00..bba5fbe5aee 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-75-singular-integer-right-triangles.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-75-singular-integer-right-triangles.md @@ -1,6 +1,6 @@ --- id: 5900f3b71000cf542c50feca -title: 'Problem 75: Singular integer right triangles' +title: 'Problema 75: Triângulos retângulos de lados inteiros e singulares' challengeType: 1 forumTopicId: 302188 dashedName: problem-75-singular-integer-right-triangles @@ -8,7 +8,7 @@ dashedName: problem-75-singular-integer-right-triangles # --description-- -It turns out that 12 cm is the smallest length of wire that can be bent to form an integer sided right angle triangle in exactly one way, but there are many more examples. +12 cm parece ser o menor comprimento de linha que pode ser determinado para formar um triângulo com ângulo reto inteiro exatamente de uma maneira, mas há muitos outros exemplos.
      12 cm: (3,4,5)
      @@ -19,41 +19,41 @@ It turns out that 12 cm is the smallest length of wire that can be bent to form 48 cm: (12,16,20)

      -In contrast, some lengths of wire, like 20 cm, cannot be bent to form an integer sided right angle triangle, and other lengths allow more than one solution to be found; for example, using 120 cm it is possible to form exactly three different integer sided right angle triangles. +Por outro lado, alguns comprimentos de linha, como 20 cm, não podem ser dobrados de modo a formar um triângulo retângulo com lados inteiros singulares, enquanto outros comprimentos permitem que se encontre mais de uma solução. Por exemplo, usar 120 cm torna possível formar exatamente três triângulos retângulos com lados inteiros singulares.
      120 cm: (30,40,50), (20,48,52), (24,45,51)

      -Given that L is the length of the wire, for how many values of L ≤ `n` can exactly one, integer sided right angle, triangle be formed? +Considerando que L é o comprimento da linha, para quantos valores de L ≤ `n` é possível formar exatamente um triângulo retângulo de lados inteiros e singulares? # --hints-- -`singularIntRightTriangles(48)` should return a number. +`singularIntRightTriangles(48)` deve retornar um número. ```js assert(typeof singularIntRightTriangles(48) === 'number'); ``` -`singularIntRightTriangles(48)` should return `6`. +`singularIntRightTriangles(48)` deve retornar `6`. ```js assert.strictEqual(singularIntRightTriangles(48), 6); ``` -`singularIntRightTriangles(700000)` should return `75783`. +`singularIntRightTriangles(700000)` deve retornar `75783`. ```js assert.strictEqual(singularIntRightTriangles(700000), 75783); ``` -`singularIntRightTriangles(1000000)` should return `107876`. +`singularIntRightTriangles(1000000)` deve retornar `107876`. ```js assert.strictEqual(singularIntRightTriangles(1000000), 107876); ``` -`singularIntRightTriangles(1500000)` should return `161667`. +`singularIntRightTriangles(1500000)` deve retornar `161667`. ```js assert.strictEqual(singularIntRightTriangles(1500000), 161667); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-79-passcode-derivation.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-79-passcode-derivation.md index a17babe3520..68750e0294b 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-79-passcode-derivation.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-79-passcode-derivation.md @@ -1,6 +1,6 @@ --- id: 5900f3bb1000cf542c50fece -title: 'Problem 79: Passcode derivation' +title: 'Problema 79: Derivação de senha' challengeType: 1 forumTopicId: 302192 dashedName: problem-79-passcode-derivation @@ -8,33 +8,33 @@ dashedName: problem-79-passcode-derivation # --description-- -A common security method used for online banking is to ask the user for three random characters from a passcode. For example, if the passcode was `531278`, they may ask for the 2nd, 3rd, and 5th characters; the expected reply would be: `317`. +Um método comum de segurança usado pelos serviços bancários on-line é pedir ao usuário três caracteres aleatórios de uma senha. Por exemplo, se a senha for `531278`, eles podem pedir o segundo, o terceiro e o quinto caracteres. A resposta esperada seria: `317`. -The arrays, `keylog1`, `keylog2`, and `keylog3`, contains fifty successful login attempts. +Os arrays, `keylog1`, `keylog2` e `keylog3`, contêm cinquenta tentativas de login bem-sucedidas. -Given that the three characters are always asked for in order, analyze the array so as to determine the shortest possible secret passcode of unknown length. +Dado que os três caracteres são sempre solicitados em ordem, analise o array para determinar a senha secreta mais curta possível de tamanho desconhecido. # --hints-- -`passcodeDerivation(keylog1)` should return a number. +`passcodeDerivation(keylog1)` deve retornar um número. ```js assert(typeof passcodeDerivation(_keylog1) === 'number'); ``` -`passcodeDerivation(keylog1)` should return `531278`. +`passcodeDerivation(keylog1)` deve retornar `531278`. ```js assert.strictEqual(passcodeDerivation(_keylog1), 531278); ``` -`passcodeDerivation(keylog2)` should return `1230567`. +`passcodeDerivation(keylog2)` deve retornar `1230567`. ```js assert.strictEqual(passcodeDerivation(_keylog2), 1230567); ``` -`passcodeDerivation(keylog3)` should return `73162890`. +`passcodeDerivation(keylog3)` deve retornar `73162890`. ```js assert.strictEqual(passcodeDerivation(_keylog3), 73162890); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-144-investigating-multiple-reflections-of-a-laser-beam.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-144-investigating-multiple-reflections-of-a-laser-beam.md index 935df9d895d..eb864242b99 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-144-investigating-multiple-reflections-of-a-laser-beam.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-144-investigating-multiple-reflections-of-a-laser-beam.md @@ -1,6 +1,6 @@ --- id: 5900f3fc1000cf542c50ff0f -title: 'Problem 144: Investigating multiple reflections of a laser beam' +title: 'Problema 144: Investigação das várias reflexões de um raio laser' challengeType: 1 forumTopicId: 301773 dashedName: problem-144-investigating-multiple-reflections-of-a-laser-beam @@ -8,34 +8,34 @@ dashedName: problem-144-investigating-multiple-reflections-of-a-laser-beam # --description-- -In laser physics, a "white cell" is a mirror system that acts as a delay line for the laser beam. The beam enters the cell, bounces around on the mirrors, and eventually works its way back out. +Na física de lasers, uma "célula branca" é um sistema de espelho que atua como uma linha de retardo para o raio laser. O raio entra na célula, colide com os espelhos e, por fim, sai. -The specific white cell we will be considering is an ellipse with the equation $4{x}^2 + y^2 = 100$ +A célula branca específica que consideraremos é uma elipse com a equação $4{x}^2 + y^2 = 100$ -The section corresponding to $−0.01 ≤ x ≤ +0.01$ at the top is missing, allowing the light to enter and exit through the hole. +A seção correspondente a $-0,01 ≤ x ≤ + 0,01$ na parte superior está ausente, permitindo que a luz entre e saia pelo buraco.
      - light beam starting at point (0.0, 10.1), and impacting the mirror at point (1.4, -9.6) - animation with first 10 reflections of the beam + raio de luz começando no ponto (0,0, 10,1) e colidindo com o espelho no ponto (1,4, -9,6) + animação com as primeiras 10 reflexões do raio

      -The light beam in this problem starts at the point (0.0, 10.1) just outside the white cell, and the beam first impacts the mirror at (1.4, -9.6). +O raio de luz neste problema começa no ponto (0,0, 10,1) no exterior da célula branca e o raio colide no espelho primeiramente em (1,4, -9,6). -Each time the laser beam hits the surface of the ellipse, it follows the usual law of reflection "angle of incidence equals angle of reflection." That is, both the incident and reflected beams make the same angle with the normal line at the point of incidence. +Cada vez que o laser atinge a superfície da elipse, segue a lei habitual de reflexão, que diz que "o ângulo de incidência é igual a ângulo de reflexão". Ou seja, tanto o raio incidente como raio refletido têm o mesmo ângulo, com a linha normal no momento da incidência. -In the figure on the left, the red line shows the first two points of contact between the laser beam and the wall of the white cell; the blue line shows the line tangent to the ellipse at the point of incidence of the first bounce. +Na figura à esquerda, a linha vermelha mostra os dois primeiros pontos de contato entre o raio laser e a parede da célula branca. A linha azul mostra a reta tangente à elipse no ponto da incidência da primeira colisão. -The slope m of the tangent line at any point (x, y) of the given ellipse is: $m = −4 × \frac{x}{y}$ +A curva m da reta tangente em qualquer ponto (x, y) da elipse é: $m = -4 × \frac{x}{y}$ -The normal line is perpendicular to this tangent line at the point of incidence. +A linha normal é perpendicular a essa reta tangente no ponto de incidência. -The animation on the right shows the first 10 reflections of the beam. +A animação à direita mostra as primeiras 10 reflexões do raio. -How many times does the beam hit the internal surface of the white cell before exiting? +Quantas vezes o raio atinge a superfície interna da célula branca antes de sair? # --hints-- -`laserBeamReflections()` should return `354`. +`laserBeamReflections()` deve retornar `354`. ```js assert.strictEqual(laserBeamReflections(), 354); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-163-cross-hatched-triangles.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-163-cross-hatched-triangles.md index e5fa50fb8e9..9006d2f6589 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-163-cross-hatched-triangles.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-163-cross-hatched-triangles.md @@ -1,6 +1,6 @@ --- id: 5900f40f1000cf542c50ff22 -title: 'Problem 163: Cross-hatched triangles' +title: 'Problema 163: Triângulos cruzados' challengeType: 1 forumTopicId: 301797 dashedName: problem-163-cross-hatched-triangles @@ -8,24 +8,24 @@ dashedName: problem-163-cross-hatched-triangles # --description-- -Consider an equilateral triangle in which straight lines are drawn from each vertex to the middle of the opposite side, such as in the size 1 triangle in the sketch below. +Considere um triângulo equilátero em que linhas retas são desenhadas a partir de cada vértice até o meio do lado oposto, como no triângulo de tamanho 1 no esboço abaixo. -triangles with size 1 and size 2 +triângulos de tamanho 1 e tamanho 2 -Sixteen triangles of either different shape or size or orientation or location can now be observed in that triangle. Using size 1 triangles as building blocks, larger triangles can be formed, such as the size 2 triangle in the above sketch. One-hundred and four triangles of either different shape or size or orientation or location can now be observed in that size 2 triangle. +Agora, nesse triângulo, podem ser observados dezesseis triângulos de forma, tamanho, orientação ou localização diferentes. Usando os triângulos de tamanho 1 como blocos de construção, triângulos maiores podem ser formados, como o de tamanho 2 no esboço acima. Agora, nesse triângulo de lado 2, podem ser observados 104 triângulos de forma, tamanho, orientação ou localização diferentes. -It can be observed that the size 2 triangle contains 4 size 1 triangle building blocks. A size 3 triangle would contain 9 size 1 triangle building blocks and a size $n$ triangle would thus contain $n^2$ size 1 triangle building blocks. +É possível observar que o triângulo de tamanho 2 contém como blocos de construção 4 triângulos de tamanho 1. Um triângulo de tamanho 3 contém 9 blocos de construção de triângulos de tamanho 1, e um triângulo de tamanho $n$ teria, portanto, $n^2$ blocos de construção de triângulos de tamanho 1. -If we denote $T(n)$ as the number of triangles present in a triangle of size $n$, then +Se quisermos indicar que $T(n)$ é o número de triângulos presentes em um triângulo de tamanho $n$, então $$\begin{align} & T(1) = 16 \\\\ & T(2) = 104 \end{align}$$ -Find $T(36)$. +Encontre $T(36)$. # --hints-- -`crossHatchedTriangles()` should return `343047`. +`crossHatchedTriangles()` deve retornar `343047`. ```js assert.strictEqual(crossHatchedTriangles(), 343047); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-164-numbers-for-which-no-three-consecutive-digits-have-a-sum-greater-than-a-given-value.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-164-numbers-for-which-no-three-consecutive-digits-have-a-sum-greater-than-a-given-value.md index 83215f99ba4..da53f386b32 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-164-numbers-for-which-no-three-consecutive-digits-have-a-sum-greater-than-a-given-value.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-164-numbers-for-which-no-three-consecutive-digits-have-a-sum-greater-than-a-given-value.md @@ -1,7 +1,7 @@ --- id: 5900f4111000cf542c50ff23 title: >- - Problem 164: Numbers for which no three consecutive digits have a sum greater than a given value + Problema 164: Números para os quais nenhuma sequência de três algarismos consecutivos têm uma soma maior que um determinado valor challengeType: 1 forumTopicId: 301798 dashedName: >- @@ -10,11 +10,11 @@ dashedName: >- # --description-- -How many 20 digit numbers $n$ (without any leading zero) exist such that no three consecutive digits of $n$ have a sum greater than 9? +Quantos números de 20 algarismos $n$ (sem zeros à esquerda) existem, de modo que não haja três algarismos consecutivos de $n$ com uma soma maior que 9? # --hints-- -`consecutiveDigitsSum()` should return `378158756814587`. +`consecutiveDigitsSum()` deve retornar `378158756814587`. ```js assert.strictEqual(consecutiveDigitsSum(), 378158756814587); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-172-investigating-numbers-with-few-repeated-digits.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-172-investigating-numbers-with-few-repeated-digits.md index cfc75b9ff19..2c2416d2f18 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-172-investigating-numbers-with-few-repeated-digits.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-172-investigating-numbers-with-few-repeated-digits.md @@ -1,6 +1,6 @@ --- id: 5900f4181000cf542c50ff2b -title: 'Problem 172: Investigating numbers with few repeated digits' +title: 'Problema 172: Investigação dos números com poucos algarismos repetidos' challengeType: 1 forumTopicId: 301807 dashedName: problem-172-investigating-numbers-with-few-repeated-digits @@ -8,11 +8,11 @@ dashedName: problem-172-investigating-numbers-with-few-repeated-digits # --description-- -How many 18-digit numbers $n$ (without leading zeros) are there such that no digit occurs more than three times in $n$? +Quantos números de 18 algarismos $n$ (sem zeros à esquerda) existem de modo que nenhum algarismo se repita mais de três vezes em $n$? # --hints-- -`numbersWithRepeatedDigits()` should return `227485267000992000`. +`numbersWithRepeatedDigits()` deve retornar `227485267000992000`. ```js assert.strictEqual(numbersWithRepeatedDigits(), 227485267000992000); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-180-rational-zeros-of-a-function-of-three-variables.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-180-rational-zeros-of-a-function-of-three-variables.md index 9eed96d38b2..f0705090afb 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-180-rational-zeros-of-a-function-of-three-variables.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-101-to-200/problem-180-rational-zeros-of-a-function-of-three-variables.md @@ -1,6 +1,6 @@ --- id: 5900f4201000cf542c50ff33 -title: 'Problem 180: Rational zeros of a function of three variables' +title: 'Problema 180: Zeros racionais de uma função de três variáveis' challengeType: 1 forumTopicId: 301816 dashedName: problem-180-rational-zeros-of-a-function-of-three-variables @@ -8,26 +8,26 @@ dashedName: problem-180-rational-zeros-of-a-function-of-three-variables # --description-- -For any integer $n$, consider the three functions +Para qualquer número inteiro $n$, considere as três funções $$\begin{align} & f_{1,n}(x,y,z) = x^{n + 1} + y^{n + 1} − z^{n + 1}\\\\ & f_{2,n}(x,y,z) = (xy + yz + zx) \times (x^{n - 1} + y^{n - 1} − z^{n - 1})\\\\ & f_{3,n}(x,y,z) = xyz \times (x^{n - 2} + y^{n - 2} − z^{n - 2}) \end{align}$$ -and their combination +e suas combinações $$\begin{align} & f_n(x,y,z) = f_{1,n}(x,y,z) + f_{2,n}(x,y,z) − f_{3,n}(x,y,z) \end{align}$$ -We call $(x,y,z)$ a golden triple of order $k$ if $x$, $y$, and $z$ are all rational numbers of the form $\frac{a}{b}$ with $0 < a < b ≤ k$ and there is (at least) one integer $n$, so that $f_n(x,y,z) = 0$. +Chamaremos $(x,y,z)$ de um trio dourado de ordem $k$ se $x$, $y$ e $z$ forem todos números racionais na forma $\frac{a}{b}$, com $0 < a < b ≤ k$, e se houver (pelo menos) um número inteiro $n$, de modo que $f_n(x,y,z) = 0$. -Let $s(x,y,z) = x + y + z$. +Considere $s(x,y,z) = x + y + z$. -Let $t = \frac{u}{v}$ be the sum of all distinct $s(x,y,z)$ for all golden triples $(x,y,z)$ of order 35. All the $s(x,y,z)$ and $t$ must be in reduced form. +Considere $t = \frac{u}{v}$ como a soma de todos os $s(x,y,z)$ distintos para todos os trios dourados $(x,y,z)$ de ordem 35. Todos os $s(x,y,z)$ e $t$ devem estar na forma reduzida. -Find $u + v$. +Encontre $u + v$. # --hints-- -`rationalZeros()` should return `285196020571078980`. +`rationalZeros()` deve retornar `285196020571078980`. ```js assert.strictEqual(rationalZeros(), 285196020571078980); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-201-to-300/problem-259-reachable-numbers.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-201-to-300/problem-259-reachable-numbers.md index a8fa3ceb470..20ada1ce58b 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-201-to-300/problem-259-reachable-numbers.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-201-to-300/problem-259-reachable-numbers.md @@ -1,6 +1,6 @@ --- id: 5900f4701000cf542c50ff82 -title: 'Problem 259: Reachable Numbers' +title: 'Problema 259: Números acessíveis' challengeType: 1 forumTopicId: 301907 dashedName: problem-259-reachable-numbers @@ -8,22 +8,22 @@ dashedName: problem-259-reachable-numbers # --description-- -A positive integer will be called reachable if it can result from an arithmetic expression obeying the following rules: +Um número inteiro positivo será chamado de acessível se puder resultar de uma expressão aritmética obedecendo às seguintes regras: -- Uses the digits 1 through 9, in that order and exactly once each. -- Any successive digits can be concatenated (for example, using the digits 2, 3 and 4 we obtain the number 234). -- Only the four usual binary arithmetic operations (addition, subtraction, multiplication and division) are allowed. -- Each operation can be used any number of times, or not at all. -- Unary minus is not allowed. -- Any number of (possibly nested) parentheses may be used to define the order of operations. +- Usa os algarismos de 1 a 9, nessa ordem e exatamente uma vez cada. +- Quaisquer algarismos sucessivos podem ser concatenados (por exemplo, usando os algarismos 2, 3 e 4 obtemos o número 234). +- Apenas as quatro operações aritméticas binárias habituais (adição, subtração, multiplicação e divisão) são permitidas. +- Cada operação pode ser usada qualquer número de vezes, ou mesmo não usada. +- Não é permitido o menos unário. +- Qualquer número de parênteses (possivelmente aninhados) pode ser usado para definir a ordem das operações. -For example, 42 is reachable, since $\frac{1}{23} \times ((4 \times 5) - 6) \times (78 - 9) = 42$. +Por exemplo, 42 é acessível, já que $\frac{1}{23} \times ((4 \times 5) - 6) \times (78 - 9) = 42$. -What is the sum of all positive reachable integers? +Qual é a soma de todos os números inteiros positivos acessíveis? # --hints-- -`reachableNumbers()` should return `20101196798`. +`reachableNumbers()` deve retornar `20101196798`. ```js assert.strictEqual(reachableNumbers(), 20101196798); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-201-to-300/problem-296-angular-bisector-and-tangent.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-201-to-300/problem-296-angular-bisector-and-tangent.md index 660d66eabb4..4b748f244dc 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-201-to-300/problem-296-angular-bisector-and-tangent.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-201-to-300/problem-296-angular-bisector-and-tangent.md @@ -1,6 +1,6 @@ --- id: 5900f4941000cf542c50ffa7 -title: 'Problem 296: Angular Bisector and Tangent' +title: 'Problema 296: Bissetor angular e tangente' challengeType: 1 forumTopicId: 301948 dashedName: problem-296-angular-bisector-and-tangent @@ -8,17 +8,17 @@ dashedName: problem-296-angular-bisector-and-tangent # --description-- -Given is an integer sided triangle $ABC$ with $BC ≤ AC ≤ AB$. $k$ is the angular bisector of angle $ACB$. $m$ is the tangent at $C$ to the circumscribed circle of $ABC$. $n$ is a line parallel to $m$ through $B$. +Você recebe um triângulo com o comprimento dos lados de números inteiros $ABC$ com os lados $BC ≤ AC ≤ AB$. $k$ é o bissetor angular do ângulo $ACB$. $m$ é a tangente em $C$ ao círculo circunscrito de $ABC$. $n$ é uma linha paralela a $m$ através de $B$. -The intersection of $n$ and $k$ is called $E$. +A interseção entre $n$ e $k$ é chamada de $E$. -triangle ABC, with k - the angular bisector of angle ACB, m - tangent at point C, n - line parallel to m through B, and point E - intersection of k and n +triângulo ABC, com k - bissetor angular do ângulo ACB, m - tangente no ponto C, n - linha paralela a m através do ponto B e do ponto E - interseção entre k e n -How many triangles $ABC$ with a perimeter not exceeding $100\\,000$ exist such that $BE$ has integral length? +Quantos triângulos $ABC$ com um perímetro não excedendo $100.000$ existem de tal forma que $BE$ tem como comprimento um número inteiro? # --hints-- -`angularBisectorAndTangent()` should return `1137208419`. +`angularBisectorAndTangent()` deve retornar `1137208419`. ```js assert.strictEqual(angularBisectorAndTangent(), 1137208419); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-336-maximix-arrangements.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-336-maximix-arrangements.md index c5df56c3d7b..3734c972333 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-336-maximix-arrangements.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-336-maximix-arrangements.md @@ -1,6 +1,6 @@ --- id: 5900f4bd1000cf542c50ffcf -title: 'Problem 336: Maximix Arrangements' +title: 'Problema 336: Arranjos maximix' challengeType: 1 forumTopicId: 301994 dashedName: problem-336-maximix-arrangements @@ -8,31 +8,31 @@ dashedName: problem-336-maximix-arrangements # --description-- -A train is used to transport four carriages in the order: $ABCD$. However, sometimes when the train arrives to collect the carriages they are not in the correct order. +Um trem é usado para transportar quatro vagões na ordem: $ABCD$. No entanto, por vezes, quando o trem chega para coletar os vagões, eles não estão na ordem certa. -To rearrange the carriages, they are all shunted onto a large rotating turntable. After the carriages are uncoupled at a specific point, the train moves off the turntable pulling the carriages still attached with it. The remaining carriages are rotated 180°. All of the carriages are then rejoined and this process is repeated as often as necessary in order to obtain the least number of uses of the turntable. +Para reorganizar os vagões, todos eles são empurrados para um grande prato giratório. Depois de os vagões serem separados em um ponto específico, o trem sai do prato tirando os vagões que ainda estão presos a ele. Os vagões restantes são girados 180°. Todos os vagões são depois reagrupados e este processo é repetido sempre que necessário para obter o menor número de utilizações do prato. -Some arrangements, such as $ADCB$, can be solved easily: the carriages are separated between $A$ and $D$, and after $DCB$ are rotated the correct order has been achieved. +Alguns arranjos, como $ADCB$, podem ser resolvidos facilmente: os vagões são separados entre $A$ e $D$, e depois de $DCB$ ser girado, a ordem correta é alcançada. -However, Simple Simon, the train driver, is not known for his efficiency, so he always solves the problem by initially getting carriage $A$ in the correct place, then carriage $B$, and so on. +No entanto, Simon Simples, o motorista do trem, não é conhecido pela sua eficiência. Então, ele sempre resolve o problema ao receber inicialmente o vagão $A$ no lugar correto, depois o vagão $B$ e assim por diante. -Using four carriages, the worst possible arrangements for Simon, which we shall call maximix arrangements, are $DACB$ and $DBAC$; each requiring him five rotations (although, using the most efficient approach, they could be solved using just three rotations). The process he uses for $DACB$ is shown below. +Usando quatro vagões, o pior arranjo possível para Simon, que chamaremos de arranjo máximo, é $DACB$ e $DBAC$; cada um deles exigindo cinco rotações (embora, usando a abordagem mais eficiente, eles possam ser reagrupados usando apenas três rotações). O processo que ele usa para $DACB$ é mostrado abaixo. -five rotations for maximix arrangement DACB +cinco rotações para o arranjo maximix DACB -It can be verified that there are 24 maximix arrangements for six carriages, of which the tenth lexicographic maximix arrangement is $DFAECB$. +É possível verificar que há 24 arranjos maximix para seis vagões, dos quais $DFAECB$ é o décimo arranjo maximix lexicográfico. -Find the ${2011}^{\text{th}}$ lexicographic maximix arrangement for eleven carriages. +Encontre o ${2011}^{\text{o}}$ arranjo maximix lexicográfico para onze vagões. # --hints-- -`maximixArrangements()` should return a string. +`maximixArrangements()` deve retornar uma string. ```js assert(typeof maximixArrangements() === 'string'); ``` -`maximixArrangements()` should return the string `CAGBIHEFJDK`. +`maximixArrangements()` deve retornar a string `CAGBIHEFJDK`. ```js assert.strictEqual(maximixArrangements(), 'CAGBIHEFJDK'); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-371-licence-plates.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-371-licence-plates.md index dee9928047e..18debebdeda 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-371-licence-plates.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-371-licence-plates.md @@ -1,6 +1,6 @@ --- id: 5900f4e01000cf542c50fff2 -title: 'Problem 371: Licence plates' +title: 'Problema 371: Placas de carro' challengeType: 1 forumTopicId: 302033 dashedName: problem-371-licence-plates diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-388-distinct-lines.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-388-distinct-lines.md index 4ff7f140070..1ff73b5d76a 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-388-distinct-lines.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-301-to-400/problem-388-distinct-lines.md @@ -1,6 +1,6 @@ --- id: 5900f4f11000cf542c510002 -title: 'Problem 388: Distinct Lines' +title: 'Problema 388: Linhas distintas' challengeType: 1 forumTopicId: 302052 dashedName: problem-388-distinct-lines @@ -8,17 +8,17 @@ dashedName: problem-388-distinct-lines # --description-- -Consider all lattice points ($a$, $b$, $c$) with $0 ≤ a, b, c ≤ N$. +Considere todos os pontos da rede ($a$, $b$, $c$) com $0 ≤ a, b, c ≤ N$. -From the origin $O(0, 0, 0)$ all lines are drawn to the other lattice points. Let $D(N)$ be the number of distinct such lines. +A partir da origem $O(0, 0, 0)$ todas as linhas são desenhadas até outros pontos da rede. Considere $D(N)$ como o número de linhas distintas feitas desse modo. -You are given that $D(1\\,000\\,000) = 831\\,909\\,254\\,469\\,114\\,121$. +Você é informado de que $D(1.000.000) = 831.909.254.469.114.121$. -Find $D({10}^{10})$. Give as your answer the first nine digits followed by the last nine digits. +Encontre $D({10}^{10})$. Dê como resposta os primeiros nove algarismos seguidos pelos últimos nove algarismos. # --hints-- -`distinctLines()` should return `831907372805130000`. +`distinctLines()` deve retornar `831907372805130000`. ```js assert.strictEqual(distinctLines(), 831907372805130000); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-415-titanic-sets.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-415-titanic-sets.md index a03c026f9ae..494b8b9c65f 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-415-titanic-sets.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-415-titanic-sets.md @@ -1,6 +1,6 @@ --- id: 5900f50c1000cf542c51001e -title: 'Problem 415: Titanic sets' +title: 'Problema 415: Conjuntos titânicos' challengeType: 1 forumTopicId: 302084 dashedName: problem-415-titanic-sets @@ -8,19 +8,19 @@ dashedName: problem-415-titanic-sets # --description-- -A set of lattice points $S$ is called a titanic set if there exists a line passing through exactly two points in $S$. +Um conjunto de pontos de uma rede diagonal $S$ é chamado de conjunto titânico se existir uma linha que passe por exatamente dois pontos em $S$. -An example of a titanic set is $S = \\{(0, 0), (0, 1), (0, 2), (1, 1), (2, 0), (1, 0)\\}$, where the line passing through (0, 1) and (2, 0) does not pass through any other point in $S$. +Um exemplo de um conjunto titânico é $S = \\{(0, 0), (0, 1), (0, 2), (1, 1), (2, 0), (1, 0)\\}$, onde a linha passando por (0, 1) e (2, 0) não passa por nenhum outro ponto em $S$. -On the other hand, the set {(0, 0), (1, 1), (2, 2), (4, 4)} is not a titanic set since the line passing through any two points in the set also passes through the other two. +Por outro lado, o conjunto {(0, 0), (1, 1), (2, 2), (4, 4)} não é um conjunto titânico, já que a linha que passa por dois pontos quaisquer no conjunto também passa pelos outros dois. -For any positive integer $N$, let $T(N)$ be the number of titanic sets $S$ whose every point ($x$, $y$) satisfies $0 ≤ x$, $y ≤ N$. It can be verified that $T(1) = 11$, $T(2) = 494$, $T(4) = 33\\,554\\,178$, $T(111)\bmod {10}^8 = 13\\,500\\,401$ and $T({10}^5)\bmod {10}^8 = 63\\,259\\,062$. +Para qualquer inteiro positivo $N$, consideremos que $T(N)$ é o número de conjuntos titânicos $S$ em que cada ponto ($x$, $y$) satisfaz $0 ≤ x$, $y ≤ N$. Pode-se verificar que $T(1) = 11$, $T(2) = 494$, $T(4) = 33.554.178$, $T(111)\bmod {10}^8 = 13.500.401$ e $T({10}^5)\bmod {10}^8 = 63.259.062$. -Find $T({10}^{11})\bmod {10}^8$. +Encontre $T({10}^{11})\bmod {10}^8$. # --hints-- -`titanicSets()` should return `55859742`. +`titanicSets()` deve retornar `55859742`. ```js assert.strictEqual(titanicSets(), 55859742); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-440-gcd-and-tiling.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-440-gcd-and-tiling.md index 49afa9608aa..d059df4cc03 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-440-gcd-and-tiling.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-440-gcd-and-tiling.md @@ -1,6 +1,6 @@ --- id: 5900f5241000cf542c510037 -title: 'Problem 440: GCD and Tiling' +title: 'Problema 440: Máximo divisor comum e ladrilhamento' challengeType: 1 forumTopicId: 302112 dashedName: problem-440-gcd-and-tiling @@ -8,30 +8,30 @@ dashedName: problem-440-gcd-and-tiling # --description-- -We want to tile a board of length $n$ and height 1 completely, with either 1 × 2 blocks or 1 × 1 blocks with a single decimal digit on top: +Queremos preencher com ladrilhos um tabuleiro de comprimento $n$ e altura 1 completamente, com blocos de 1 × 2 ou 1 × 1 com um único algarismo decimal no topo: -ten blocks 1x1 with single decimal digit on top, and 1x2 block +dez blocos 1x1 com um único algarismo decimal no topo e um bloco 1x2 -For example, here are some of the ways to tile a board of length $n = 8$: +Por exemplo, aqui temos algumas maneiras de ladrilhar um tabuleiro de comprimento $n = 8$: -examples of ways to tile a board of length n = 8 +exemplos de maneiras de ladrilhar um tabuleiro de comprimento n = 8 -Let $T(n)$ be the number of ways to tile a board of length $n$ as described above. +Considere $T(n)$ como o número de maneiras de ladrilhar um tabuleiro de comprimento $n$, como descrito acima. -For example, $T(1) = 10$ and $T(2) = 101$. +Por exemplo, $T(1) = 10$ e $T(2) = 101$. -Let $S(L)$ be the triple sum $\sum_{a, b, c} gcd(T(c^a), T(c^b))$ for $1 ≤ a, b, c ≤ L$. +Considere $S(L)$ como a soma tripla $\sum_{a, b, c} gcd(T(c^a), T(c^b))$ para $1 ≤ a, b, c ≤ L$. -For example: +Por exemplo: -$$\begin{align} & S(2) = 10\\,444 \\\\ - & S(3) = 1\\,292\\,115\\,238\\,446\\,807\\,016\\,106\\,539\\,989 \\\\ & S(4)\bmod 987\\,898\\,789 = 670\\,616\\,280. \end{align}$$ +$$\begin{align} & S(2) = 10.444 \\\\ + & S(3) = 1.292.115.238.446.807.016.106.539.989 \\\\ & S(4)\bmod 987.898.789 = 670.616.280. \end{align}$$ -Find $S(2000)\bmod 987\\,898\\,789$. +Encontre $S(2000)\bmod 987.898.789$. # --hints-- -`gcdAndTiling()` should return `970746056`. +`gcdAndTiling()` deve retornar `970746056`. ```js assert.strictEqual(gcdAndTiling(), 970746056); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-460-an-ant-on-the-move.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-460-an-ant-on-the-move.md index 2bb68f203f4..2d077cefaac 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-460-an-ant-on-the-move.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-460-an-ant-on-the-move.md @@ -1,6 +1,6 @@ --- id: 5900f5381000cf542c51004b -title: 'Problem 460: An ant on the move' +title: 'Problema 460: Uma formiga em movimento' challengeType: 1 forumTopicId: 302135 dashedName: problem-460-an-ant-on-the-move @@ -8,30 +8,30 @@ dashedName: problem-460-an-ant-on-the-move # --description-- -On the Euclidean plane, an ant travels from point $A(0, 1)$ to point $B(d, 1)$ for an integer $d$. +No plano euclideano, uma formiga viaja do ponto $A(0, 1)$ ao ponto $B(d, 1)$ para um número inteiro $d$. -In each step, the ant at point ($x_0$, $y_0$) chooses one of the lattice points ($x_1$, $y_1$) which satisfy $x_1 ≥ 0$ and $y_1 ≥ 1$ and goes straight to ($x_1$, $y_1$) at a constant velocity $v$. The value of $v$ depends on $y_0$ and $y_1$ as follows: +Em cada passo, a formiga no ponto ($x_0$, $y_0$) escolhe um dos pontos da rede ($x_1$, $y_1$) que satisfaça $x_1 ≥ 0$ e $y_1 ≥ 1$ e vai direto para ($x_1$, $y_1$) com velocidade vetorial constante $v$. O valor de $v$ depende de $y_0$ e $y_1$ da seguinte forma: -- If $y_0 = y_1$, the value of $v$ equals $y_0$. -- If $y_0 ≠ y_1$, the value of $v$ equals $\frac{y_1 - y_0}{\ln y_1 - \ln y_0}$. +- Se $y_0 = y_1$, o valor de $v$ é igual a $y_0$. +- Se $y_0 ≠ y_1$, o valor de $v$ é igual a $\frac{y_1 - y_0}{\ln y_1 - \ln y_0}$. -The left image is one of the possible paths for $d = 4$. First the ant goes from $A(0, 1)$ to $P_1(1, 3)$ at velocity $\frac{3 - 1}{\ln 3 - \ln 1} ≈ 1.8205$. Then the required time is $\frac{\sqrt{5}}{1.820} ≈ 1.2283$. +A imagem á esquerda é um dos possíveis caminhos para $d = 4$. Primeiro, a formiga vai de $A(0, 1)$ para $P_1(1, 3)$ a uma velocidade de $\frac{3 - 1}{\ln 3 - \ln 1} ≈ 1.8205$. Então, o tempo necessário é de $\frac{\sqrt{5}}{1.820} ≈ 1.2283$. -From $P_1(1, 3)$ to $P_2(3, 3)$ the ant travels at velocity 3 so the required time is $\frac{2}{3} ≈ 0.6667$. From $P_2(3, 3)$ to $B(4, 1)$ the ant travels at velocity $\frac{1 - 3}{\ln 1 - \ln 3} ≈ 1.8205$ so the required time is $\frac{\sqrt{5}}{1.8205} ≈ 1.2283$. +De $P_1(1, 3)$ para $P_2(3, 3)$, a formiga viaja a uma velocidade vetorial de 3. Então, o tempo necessário é $\frac{2}{3} ≈ 0.6667$. De $P_2(3, 3)$ para $B(4, 1)$, a formiga viaja a uma velocidade vetorial de $\frac{1 - 3}{\ln 1 - \ln 3} ≈ 1.8205$. Então, o tempo necessário será $\frac{\sqrt{5}}{1.8205} ≈ 1.2283$. -Thus the total required time is $1.2283 + 0.6667 + 1.2283 = 3.1233$. +Desse modo, o tempo total necessário é de $1.2283 + 0.6667 + 1.2283 = 3.1233$. -The right image is another path. The total required time is calculated as $0.98026 + 1 + 0.98026 = 2.96052$. It can be shown that this is the quickest path for $d = 4$. +A imagem à direita é outro caminho. O tempo total necessário é calculado por $0.98026 + 1 + 0.98026 = 2.96052$. Isso mostra que esse é o caminho mais rápido para $d = 4$. -two possible paths for d = 4 +dois caminhos possíveis para d = 4 -Let $F(d)$ be the total required time if the ant chooses the quickest path. For example, $F(4) ≈ 2.960\\,516\\,287$. We can verify that $F(10) ≈ 4.668\\,187\\,834$ and $F(100) ≈ 9.217\\,221\\,972$. +Considere $F(d)$ como o tempo total necessário se a formiga escolher o caminho mais rápido. Por exemplo, $F(4) ≈ 2.960.516.287$. Podemos verificar que $F(10) ≈ 4.668.187.834$ e que $F(100) ≈ 9.217.221.972$. -Find $F(10\\,000)$. Give your answer rounded to nine decimal places. +Calcule $F(10.000)$. Dê sua resposta arredondada para nove casas decimais. # --hints-- -`antOnTheMove()` should return `18.420738199`. +`antOnTheMove()` deve retornar `18.420738199`. ```js assert.strictEqual(antOnTheMove(), 18.420738199); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-464-mbius-function-and-intervals.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-464-mbius-function-and-intervals.md index d293fcda274..c92530cfd22 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-464-mbius-function-and-intervals.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-464-mbius-function-and-intervals.md @@ -1,6 +1,6 @@ --- id: 5900f53d1000cf542c51004f -title: 'Problem 464: Möbius function and intervals' +title: 'Problema 464: Função de Möbius e intervalos' challengeType: 1 forumTopicId: 302139 dashedName: problem-464-mbius-function-and-intervals @@ -8,30 +8,30 @@ dashedName: problem-464-mbius-function-and-intervals # --description-- -The Möbius function, denoted $μ(n)$, is defined as: +A função de Möbius, denotada por $μ(n)$, é definida como: -- $μ(n) = (-1)^{ω(n)}$ if $n$ is squarefree (where $ω(n)$ is the number of distinct prime factors of $n$) -- $μ(n) = 0$ if $n$ is not squarefree. +- $μ(n) = (-1)^{ω(n)}$ se $n$ não tiver quadrados (onde $ω(n)$ é o número de fatores primos distintos de $n$) +- $μ(n) = 0$ se $n$ não for sem quadrados. -Let $P(a, b)$ be the number of integers $n$ in the interval $[a, b]$ such that $μ(n) = 1$. +Considere $P(a, b)$ como a quantidade de números inteiros $n$ no intervalo $[a, b]$, tal que $μ(n) = 1$. -Let $N(a, b)$ be the number of integers $n$ in the interval $[a, b]$ such that $μ(n) = -1$. +Considere $N(a, b)$ como a quantidade de números inteiros $n$ no intervalo $[a, b]$, tal que $μ(n) = -1$. -For example, $P(2, 10) = 2$ and $N(2, 10) = 4$. +Por exemplo, $P(2, 10) = 2$ e $N(2, 10) = 4$. -Let $C(n)$ be the number of integer pairs $(a, b)$ such that: +Considere $C(n)$ como a quantidade de pares de números inteiros $(a, b)$, tal que: - $1 ≤ a ≤ b ≤ n$, -- $99 \times N(a, b) ≤ 100 \times P(a, b)$, and +- $99 \times N(a, b) ≤ 100 \times P(a, b)$, e - $99 \times P(a, b) ≤ 100 \times N(a, b)$. -For example, $C(10) = 13$, $C(500) = 16\\,676$ and $C(10\\,000) = 20\\,155\\,319$. +Por exemplo, $C(10) = 13$, $C(500) = 16.676$ e $C(10.000) = 20.155.319$. -Find $C(20\\,000\\,000)$. +Encontre $C(20.000.000)$. # --hints-- -`mobiusFunctionAndIntervals()` should return `198775297232878`. +`mobiusFunctionAndIntervals()` deve retornar `198775297232878`. ```js assert.strictEqual(mobiusFunctionAndIntervals(), 198775297232878); diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-473-phigital-number-base.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-473-phigital-number-base.md index 97a545fed4c..732ced2347e 100644 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-473-phigital-number-base.md +++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-401-to-480/problem-473-phigital-number-base.md @@ -1,6 +1,6 @@ --- id: 5900f5461000cf542c510058 -title: 'Problem 473: Phigital number base' +title: 'Problema 473: Base de números phigitais' challengeType: 1 forumTopicId: 302150 dashedName: problem-473-phigital-number-base @@ -8,29 +8,29 @@ dashedName: problem-473-phigital-number-base # --description-- -Let $\varphi$ be the golden ratio: $\varphi = \frac{1+\sqrt{5}}{2}.$ +Considere $\varphi$ como a razão de ouro: $\varphi = \frac{1+\sqrt{5}}{2}.$ -Remarkably it is possible to write every positive integer as a sum of powers of $\varphi$ even if we require that every power of $\varphi$ is used at most once in this sum. +Notadamente, é possível escrever cada número inteiro positivo como uma soma de potências de $\varphi$, mesmo se precisarmos que todas as potências de $\varphi$ sejam usadas no máximo uma vez nessa soma. -Even then this representation is not unique. +Mesmo assim, essa representação não é única. -We can make it unique by requiring that no powers with consecutive exponents are used and that the representation is finite. +Podemos torná-la única exigindo que nenhuma potência com expoentes consecutivos seja utilizada e que a representação seja finita. -E.g: +Ex: -$2 = \varphi + \varphi^{-2}$ and $3 = \varphi^{2} + \varphi^{-2}$ +$2 = \varphi + \varphi^{-2}$ e $3 = \varphi^{2} + \varphi^{-2}$ -To represent this sum of powers of $\varphi$ we use a string of 0's and 1's with a point to indicate where the negative exponents start. We call this the representation in the phigital numberbase. +Para representar essa soma de potências de $\varphi$, usamos uma string de 0s e 1s com um ponto para indicar onde começam os expoentes negativos. Chamamos isto de representação na base numérica phigital. -So $1 = 1_{\varphi}$, $2 = 10.01_{\varphi}$, $3 = 100.01_{\varphi}$ and $14 = 100100.001001_{\varphi}$. The strings representing 1, 2 and 14 in the phigital number base are palindromic, while the string representing 3 is not (the phigital point is not the middle character). +Assim, $1 = 1_{\varphi}$, $2 = 10.01_{\varphi}$, $3 = 100.01_{\varphi}$ e $14 = 100100.001001_{\varphi}$. As strings representando 1, 2 e 14 na base numérica phigital são palindrômicas, enquanto a string representando 3 não é (o ponto phigital não é o caractere do meio). -The sum of the positive integers not exceeding 1000 whose phigital representation is palindromic is 4345. +A soma de números inteiros positivos não excedendo 1000 cuja representação phigital é palindrômica é 4345. -Find the sum of the positive integers not exceeding $10^{10}$ whose phigital representation is palindromic. +Encontre a soma de números inteiros positivos não excedendo $10^{10}$ cuja representação phigital é palindrômica. # --hints-- -`phigitalNumberBase()` should return `35856681704365`. +`phigitalNumberBase()` deve retornar `35856681704365`. ```js assert.strictEqual(phigitalNumberBase(), 35856681704365); diff --git a/curriculum/challenges/ukrainian/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/ukrainian/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md index ac62a29e1c8..95cbac10763 100644 --- a/curriculum/challenges/ukrainian/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md +++ b/curriculum/challenges/ukrainian/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md @@ -10,7 +10,7 @@ dashedName: target-the-parent-of-an-element-using-jquery Кожен HTML елемент має елемент `parent`, із якого він (успадковує) властивості `inherits`. -Наприклад, ваш елемент `jQuery Playground` `h3` має батьківський елемент `
      `, який так само має батьківський елемент `body`. +For example, the `h3` element in your `jQuery Playground` has the parent element of `
      `, which itself has the parent element of `body`. jQuery має функцію, що називається `parent()`, яка надає доступ до батьківського елементу будь-якого вибраного елементу. diff --git a/curriculum/challenges/ukrainian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/ukrainian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 477b854f924..d5d86930690 100644 --- a/curriculum/challenges/ukrainian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/ukrainian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -522,6 +522,7 @@ async(getUserInput) => { date: new Date().toLocaleDateString("en-US", { timeZone: "UTC", weekday: "short", month: "short", day: "2-digit", year: "numeric" + }).replaceAll(',', '') }; const addRes = await fetch(url + `/api/users/${_id}/exercises`, { method: 'POST', diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md new file mode 100644 index 00000000000..46b4f675589 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md @@ -0,0 +1,278 @@ +--- +id: 63c620161fc2b49ac340ffc4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +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`. + +Remember, you can use the `getElementById` method for this. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#team` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +You should use `const` to declare the variable called `teamName` and assign it the `#team` element. + +```js +assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md new file mode 100644 index 00000000000..513b3c3ed99 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md @@ -0,0 +1,287 @@ +--- +id: 63cf7e324c1831f8d936b3ae +title: Step 2 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#sport` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element. + +```js +assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#year` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element. + +```js +assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md new file mode 100644 index 00000000000..080e5e186a1 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md @@ -0,0 +1,289 @@ +--- +id: 63cf7f97e7f99af9348f5068 +title: Step 3 +challengeType: 0 +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`. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#head-coach` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element. + +```js +assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/); +``` + +You should use the `document.getElementById()` method to get the `#player-cards` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element. + +```js +assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md new file mode 100644 index 00000000000..6afeaf034bf --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md @@ -0,0 +1,279 @@ +--- +id: 63cf812bb8ecd4f9cf749b8f +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method. + +# --hints-- + +You should use the `document.getElementById()` method to get the `#players` element. + +```js +assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element. + +```js +assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md new file mode 100644 index 00000000000..e306a5ea676 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md @@ -0,0 +1,276 @@ +--- +id: 63cf83fdbb51d9fa54654ae6 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now it is time to build out the data structure that will hold all of the information for your football team. + +Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object. + +# --hints-- + +You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object. + +```js +assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md new file mode 100644 index 00000000000..e0b502ce27e --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md @@ -0,0 +1,283 @@ +--- +id: 63cf8ec006a776ff5f6e3c68 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Inside the `myFavoriteFootballTeam` object, add a new property with a `key` named `team` and a string value of `Argentina`. + + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `team` property. + +```js +assert.property(myFavoriteFootballTeam, 'team'); +``` + +Your `team` property should be set to `Argentina`. + +```js +assert.equal(myFavoriteFootballTeam.team, 'Argentina'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md new file mode 100644 index 00000000000..ed41bc54c71 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md @@ -0,0 +1,283 @@ +--- +id: 63cf90d4696d8f00851873a4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Below the `team` property, add a new property with a `key` named `sport` and a string value of `Football`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `sport` property. + +```js +assert.property(myFavoriteFootballTeam, 'sport'); +``` + +Your `team` property should be set to `Football`. + +```js +assert.equal(myFavoriteFootballTeam.sport, 'Football'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md new file mode 100644 index 00000000000..14594da8b08 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md @@ -0,0 +1,290 @@ +--- +id: 63cf91b0ff6e9300ead140cc +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Below the `sport` property, add a new property with a `key` named `year` and a number value of `1986`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `year` property. + +```js +assert.property(myFavoriteFootballTeam, 'year'); +``` + +Your `year` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.year); +``` + +Your `year` property should be set to `1986`. + +```js +assert.equal(myFavoriteFootballTeam.year, 1986); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md new file mode 100644 index 00000000000..1502bc6914d --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md @@ -0,0 +1,291 @@ +--- +id: 63cf920228531a0145abd0b3 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Below the `year` property, add a new property with a `key` named `isWorldCupWinner` and a boolean value set to `true`. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property. + +```js +assert.property(myFavoriteFootballTeam, 'isWorldCupWinner'); +``` + +Your `isWorldCupWinner` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner); +``` + +Your `isWorldCupWinner` property should be set to `true`. + +```js +assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +--fcc-editable-region-- +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + +}; +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md new file mode 100644 index 00000000000..33ba5e855e9 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md @@ -0,0 +1,316 @@ +--- +id: 63cf93472de77d01bf8474bf +title: Step 10 +challengeType: 0 +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. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `headCoach` property. + +```js +assert.property(myFavoriteFootballTeam, 'headCoach'); +``` + +Your `headCoach` value should be an object. + +```js +assert.isObject(myFavoriteFootballTeam.headCoach) +``` + +Your `headCoach` object should have a `coachName` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'coachName'); +``` + +Your `coachName` property should be set to `Carlos Bilardo`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo'); +``` + +Your `headCoach` object should have a `matches` property. + +```js +assert.property(myFavoriteFootballTeam.headCoach, 'matches'); +``` + +Your `matches` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.headCoach.matches); +``` + +Your `matches` property should be set to `7`. + +```js +assert.equal(myFavoriteFootballTeam.headCoach.matches, 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md new file mode 100644 index 00000000000..6dbedd38e9f --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md @@ -0,0 +1,296 @@ +--- +id: 63d120a05ee93f38353b84c0 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below the `headCoach` property, create a new property with a `key` named `players` with the value of an empty array. + +# --hints-- + +Your `myFavoriteFootballTeam` object should have a `players` property. + +```js +assert.property(myFavoriteFootballTeam, 'players'); +``` + +Your `players` value should be an array. + +```js +assert.isArray(myFavoriteFootballTeam.players) +``` + +Your `players` array should be empty. + +```js +assert.deepEqual(myFavoriteFootballTeam.players, []) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, +--fcc-editable-region-- + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + +--fcc-editable-region-- +}; +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md new file mode 100644 index 00000000000..c5569d06c04 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md @@ -0,0 +1,369 @@ +--- +id: 63d1214a0ac7a9389793269b +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `players` array, create a new object with the following properties: + + +```md + +name: "Sergio Almirón" +position: "forward" +number: 1 +isCaptain: false +nickname: null + +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have the value of an object. + +```js +assert.isObject(myFavoriteFootballTeam.players[0]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'name'); +``` + +Your `name` property should be set to `Sergio Almirón`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'position'); +``` + +Your `position` property should be set to `forward`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[0]?.number); +``` + +Your `number` property should be set to `1`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.number, 1); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[0], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[0]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md new file mode 100644 index 00000000000..7bb2e78b95d --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md @@ -0,0 +1,380 @@ +--- +id: 63d128eaedcc773d2ded2128 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Below that object, create a new object with the following properties: + +```md +name: "Sergio Batista" +position: "midfielder" +number: 2 +isCaptain: false +nickname: null +``` + +# --hints-- + +Your `myFavoriteFootballTeam.players` array should have two values. + +```js +// Have to assert at least, because we pre-populate data in the next step. +assert.isAtLeast(myFavoriteFootballTeam.players.length, 2); +``` + +Your `myFavoriteFootballTeam.players` array should have an object as the second value. + +```js +assert.isObject(myFavoriteFootballTeam.players[1]) +``` + +Your new object should have a `name` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'name'); +``` + +Your `name` property should be set to `Sergio Batista`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista'); +``` + +Your new object should have a `position` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'position'); +``` + +Your `position` property should be set to `midfielder`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder'); +``` + +Your new object should have a `number` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'number'); +``` + +Your `number` property should be a number. + +```js +assert.isNumber(myFavoriteFootballTeam.players[1]?.number); +``` + +Your `number` property should be set to `2`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.number, 2); +``` + +Your new object should have a `isCaptain` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'isCaptain'); +``` + +Your `isCaptain` property should be a boolean. + +```js +assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain); +``` + +Your `isCaptain` property should be set to `false`. + +```js +assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false); +``` + +Your new object should have a `nickname` property. + +```js +assert.property(myFavoriteFootballTeam.players[1], 'nickname'); +``` + +Your `nickname` property should be set to `null`. + +```js +assert.isNull(myFavoriteFootballTeam.players[1]?.nickname); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, +--fcc-editable-region-- + +--fcc-editable-region-- + ] +}; +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md new file mode 100644 index 00000000000..e117f81605f --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md @@ -0,0 +1,446 @@ +--- +id: 63d12b9c7aaee43de1ba265d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you. + +The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it. + +Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + + +# --hints-- + +You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object. + +```js +assert.isFrozen(myFavoriteFootballTeam); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md new file mode 100644 index 00000000000..6e03cf91edf --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md @@ -0,0 +1,458 @@ +--- +id: 63d12fe2a595263e8f5084f7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties. + +Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`. + +When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value. + +# --hints-- + +You should assign the `USA` string to `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); + +``` + +You should add a `console.log` for `myFavoriteFootballTeam.team`. + +```js + +assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md new file mode 100644 index 00000000000..c9a4a2ad0f4 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md @@ -0,0 +1,470 @@ +--- +id: 63e02a333354343b595d64ca +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson. + +The next step is to access the `key` called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`. + +Remember you can use dot notation for this. + +# --hints-- + +You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/); +``` + +You should remove your `console.log` for `myFavoriteFootballTeam.team`. + +```js +assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/); +``` + +You should use `const` to declare a `sport` variable. + +```js +assert.match(code, /const\s+sport\s*=/); +``` + +You should assign the value of the `sport` `key` from the `myFavoriteFootballTeam` object to the `sport` variable. + +```js +assert.equal(sport, myFavoriteFootballTeam.sport); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +myFavoriteFootballTeam.team = "USA"; +console.log(myFavoriteFootballTeam.team); + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md new file mode 100644 index 00000000000..f95ca095c29 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md @@ -0,0 +1,454 @@ +--- +id: 63e0334b7a24bd3c96aca4de +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Below the `sport` variable, access the `key` called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`. + +# --hints-- + +You should use `const` to declare a `team` variable. + +```js +assert.match(code, /const\s+team\s*=/); +``` + +You should assign the value of the `team` `key` from the `myFavoriteFootballTeam` object to the `team` variable. + +```js +assert.equal(team, myFavoriteFootballTeam.team); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md new file mode 100644 index 00000000000..ce0835fa4d9 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md @@ -0,0 +1,464 @@ +--- +id: 63e036373fc9173d284e165a +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal. + +The object destructuring syntax allows you to unpack values from arrays and objects: + +```js +const developerObj = { + name: "Jessica Wilkins", + isDeveloper: true +}; + +// Object destructuring +const { name, isDeveloper } = developerObj; +``` + +Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code. + +# --hints-- + +Use object destructuring to access the `sport` and `team` values. + +```js + +assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const sport = myFavoriteFootballTeam.sport; +const team = myFavoriteFootballTeam.team; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md new file mode 100644 index 00000000000..de3439a814b --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md @@ -0,0 +1,449 @@ +--- +id: 63e03b86008bbb3e1c3de846 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Next, add the `year` and `players` to your destructuring assignment. + +# --hints-- + +You should add the `year` and `players` values to your destructuring assignment. + +```js +assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); + + +--fcc-editable-region-- + +const { sport, team } = myFavoriteFootballTeam; + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md new file mode 100644 index 00000000000..95eda5017a7 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md @@ -0,0 +1,448 @@ +--- +id: 63e042661ad2663f0d468740 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax. + +# --hints-- + +Use object destructuring to access the `coachName` value. + +```js + +assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md new file mode 100644 index 00000000000..8179fd09158 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md @@ -0,0 +1,453 @@ +--- +id: 63e050bf935ac341b88326d6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now you need to start displaying the team's information on the screen. + +Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element. + +Once you complete that task, you should see the result in the preview window. + +# --hints-- + +You should assign the `sport` variable to `typeOfSport.innerHTML`. + +```js + +assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md new file mode 100644 index 00000000000..587342d8d66 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md @@ -0,0 +1,451 @@ +--- +id: 63e05557016dfd45ea49152c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`. + +# --hints-- + +You should assign the `team` variable to `teamName.innerHTML`. + +```js + +assert.match(code, /teamName.innerHTML\s*=\s*team\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md new file mode 100644 index 00000000000..fd77bba607c --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md @@ -0,0 +1,462 @@ +--- +id: 63e05c00b615bb46ac87273a +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`. + +You should now see all of that information displayed on the screen below `Team stats`. + +# --hints-- + +You should assign the `year` variable to `worldCupYear.innerHTML`. + +```js + +assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/) + +``` + +You should assign the `coachName` variable to `headCoach.innerHTML`. + +```js + +assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md new file mode 100644 index 00000000000..64e5e01482a --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md @@ -0,0 +1,479 @@ +--- +id: 63e060df21bca347b2d2b374 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu. + +Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step. + + +# --hints-- + +You should use `const` to declare a `setPlayerCards` variable. + +```js +assert.match(code, /const\s+setPlayerCards\s*=/); +``` + +Your `setPlayerCards` variable should be a function. + +```js +assert.isFunction(setPlayerCards); +``` + +Your `setPlayerCards` function should use arrow syntax. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/); +``` + +Your `setPlayerCards` function should not take a parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/); +``` + +Your `setPlayerCards` function should be empty. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md new file mode 100644 index 00000000000..e2fd95b4278 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md @@ -0,0 +1,470 @@ +--- +id: 63e062d6090ebb486a4eda3a +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used: + +```js +const greeting = (name = "Anonymous") => { + return "Hello " + name; +} + +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + +Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. + +# --hints-- + +Your `setPlayerCards` function should take an `arr` parameter. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/); +``` + +Your `arr` parameter should have a default value of `players`. + +```js +assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +--fcc-editable-region-- + +const setPlayerCards = () => {}; + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md new file mode 100644 index 00000000000..c5f10540ae0 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md @@ -0,0 +1,478 @@ +--- +id: 63e949b8327aa2aca2ca8eac +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The next step is to create a new array that will be responsible for adding the player card information to the page. + +Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`. + +Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element. + +# --hints-- + +You should call the `.map()` method on your `arr` parameter. + +```js +assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/); +``` + +Your `.map()` method should take an empty callback function. + +```js +assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); +``` + +You should use the `+=` operator on `playerCards.innerHTML`. + +```js +assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/); +``` + +You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator. + +```js +assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md new file mode 100644 index 00000000000..10556005822 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md @@ -0,0 +1,472 @@ +--- +id: 63e94dae6dcedbad73f2f6ee +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables. + +Here is an example: + +```js +function myExampleFunction({ name, age, job, city }) { + +} +``` + +Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring. + +# --hints-- + +You should unpack all 5 object properties from objects in `arr` using object destructuring. + +```js + +assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/) + + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map(() => { + + }) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md new file mode 100644 index 00000000000..564fb6bb8e0 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md @@ -0,0 +1,467 @@ +--- +id: 63e954321b0a77ae4f6d9650 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +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`. + +# --hints-- + +You should use template literals to add an empty `div` with a class of `player-card`. + + +```js + +assert.match(code, /`\s*\s*<\/div>\s*`\s*/) + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md new file mode 100644 index 00000000000..b9c104fb55a --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md @@ -0,0 +1,475 @@ +--- +id: 63e95a45dce95baf41dd4f78 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter: + +```js +${expression goes here} +``` + +# --hints-- + +You should add an `h2` element with the `name` parameter. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/) +``` + +Your `h2` should be nested in your `div`. + +```js +assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md new file mode 100644 index 00000000000..53646c4fff0 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md @@ -0,0 +1,467 @@ +--- +id: 63e95e39860dc5b01ebe9be0 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team. + +Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string. + +# --hints-- + +You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string. + +```js +assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md new file mode 100644 index 00000000000..f41577b8e76 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md @@ -0,0 +1,472 @@ +--- +id: 63e9667c881b61b1e338d276 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Position:` followed by the `position` variable. + +```js +assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      + +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md new file mode 100644 index 00000000000..edceac6fe11 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md @@ -0,0 +1,472 @@ +--- +id: 63e96938d2a347b2734a1587 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter. + +# --hints-- + +You should add a new paragraph element with the text `Number:` followed by the `number` variable. + +```js +assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +Your new `p` element should come after your existing `p` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md new file mode 100644 index 00000000000..4bb4a4f5aa6 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96eb94c97b6b31ee50f63.md @@ -0,0 +1,473 @@ +--- +id: 63e96eb94c97b6b31ee50f63 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Below your existing paragraph elements, add another paragraph element with the text `Nickname:`. + +# --hints-- + +You should add a new paragraph element with the text `Nickname:`. + +```js +assert.match(code, /\s*\s*Nickname:\s*<\/p>\s*/) +``` + +Your new `p` element should come after the `h2` element. + +```js +assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md new file mode 100644 index 00000000000..46379d93380 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9718d7d490bb3940d5a0a.md @@ -0,0 +1,482 @@ +--- +id: 63e9718d7d490bb3940d5a0a +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Next to the `Nickname:` text, add an embedded expression that will show the player's nickname if they have one. + +Use a ternary operator to check if `nickname` is not `null`. If the player has a nickname, display `nickname` otherwise display `"N/A"`. + +# --hints-- + +You should use a ternary operator to check if `nickname` is not `null`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/) +``` + +If your ternary is truthy, it should display the player's `nickname`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/) +``` + +If your ternary is falsy, it should display the string `N/A`. + +```js +assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname:

      +
      + `; + } + ); + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md new file mode 100644 index 00000000000..b4b4d23626a --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9737f686c76b4078a60f4.md @@ -0,0 +1,477 @@ +--- +id: 63e9737f686c76b4078a60f4 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `.map()` method will return a new array of `player-card` items separated by commas. + +To remove the commas between each `player-card` so it does not show up on screen, chain the `.join()` method to the `.map()` method. Pass an empty string as the argument for the `.join()` method. + + +# --hints-- + +You should chain the `.join()` method to the `.map()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(/s); +``` + +You should pass an empty string to the `.join()` method. + +```js +assert.match(code, /arr\s*\.map\(.*\)\s*\.join\(\s*('|"|`)\1\s*\)/s); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + +--fcc-editable-region-- + + playerCards.innerHTML += arr.map( + ({ name, position, number, isCaptain, nickname }) => { + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + `; + } + ) + +--fcc-editable-region-- + +}; + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md new file mode 100644 index 00000000000..e5c273332f2 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28972973504e7bb58b0b3.md @@ -0,0 +1,485 @@ +--- +id: 63f28972973504e7bb58b0b3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +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. + +# --hints-- + +You should call the `.addEventListener()` method on the `playersDropdownList` variable. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(/); +``` + +Your event listener should listen for the `change` event. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1/); +``` + +Your event listener should have an empty callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md new file mode 100644 index 00000000000..8aeee3d3efa --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f28ef082d771e8bf71f94a.md @@ -0,0 +1,475 @@ +--- +id: 63f28ef082d771e8bf71f94a +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +For the callback function, pass in `e` as a parameter. + +`e` represents an object which contains the information for that event. + +# --hints-- + +You should pass in `e` as a parameter to your callback function. + +```js +assert.match(code, /playersDropdownList\.addEventListener\(\s*('|"|`)change\1\s*,\s*\(\s*e\s*\)\s*=>\s*\{\s*\}\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +--fcc-editable-region-- + +playersDropdownList.addEventListener("change", () => { + +}); + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md new file mode 100644 index 00000000000..f8bad487511 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f293c804d6f9e9a83ca4c5.md @@ -0,0 +1,477 @@ +--- +id: 63f293c804d6f9e9a83ca4c5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Inside the callback function, add a `console.log` with the value of `e.target.value`. + +Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console. + +`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play. + +# --hints-- + +You should add a `console.log` with the value of `e.target.value`. + +```js +assert.match(code, /console.log\s*\(e.target.value\)\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md new file mode 100644 index 00000000000..a15fd647b37 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29804e3ec00ea6fab1ec4.md @@ -0,0 +1,489 @@ +--- +id: 63f29804e3ec00ea6fab1ec4 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Remove the `console.log` statement you created in the previous step. + +The next step would be to reset the content for the `playerCards` element. + +Inside the callback function, access the `innerHTML` property of the `playerCards` element and assign it a value of an empty string. + +# --hints-- + +You should not have the `console.log` statement in your code. + +```js +assert.notMatch(code, /\s*console.log\(e.target.value\)/); +``` + +You should access the `innerHTML` property of the `playerCards` element. + +```js +assert.match(code, /playerCards\.innerHTML\s*=/); +``` + +You should set the `innerHTML` property to an empty string. + +```js +assert.match(code, /\s*playerCards.innerHTML\s*=\s*('|"|`)\1/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + +--fcc-editable-region-- + +console.log(e.target.value) + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md new file mode 100644 index 00000000000..1657ba65473 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f29ce62aea65eb041758c8.md @@ -0,0 +1,508 @@ +--- +id: 63f29ce62aea65eb041758c8 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +The next step would be to add a `switch` statement which will check for the user's selection from the player dropdown menu and filter out cards based on the player's positions. + +A `switch` statement is a control-flow statement that tests the value of an expression against multiple `case` clauses, and can include an optional `default` clause. + +This is the basic syntax for a `switch` statement: + +```js +switch (expression) { + case 1: + /* + this code will execute + if the case matches the expression + */ + break; + default: + /* + the default will execute if none + of the other cases match the expression + */ +} +``` + +Add a `switch` statement and use `e.target.value` for the expression. + +# --hints-- + +You should use a `switch` statement. + +```js +assert.match(code, /switch/); +``` + +Your `switch` statement should use `e.target.value` for the expression. + +```js +assert.match(code, /switch\s*\(\s*e\.target\.value\s*\)/); +``` + +Your `switch` statement should be empty. + +```js +assert.match(code, /\s*switch\s*\(e\.target\.value\)\s*{\s*}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md new file mode 100644 index 00000000000..9188483c345 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a0a860790eebe61bf908.md @@ -0,0 +1,478 @@ +--- +id: 63f2a0a860790eebe61bf908 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +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. + +# --hints-- + +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*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md new file mode 100644 index 00000000000..cabfe408ca5 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a4a8087e6dec8ec47f16.md @@ -0,0 +1,521 @@ +--- +id: 63f2a4a8087e6dec8ec47f16 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +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`. + +Lastly, add a `break` statement below the `setPlayerCards` function call. + +# --hints-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*forward\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)forward\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + +--fcc-editable-region-- + + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md new file mode 100644 index 00000000000..fbf9f1cb1b8 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a5f09a785aed155c0a56.md @@ -0,0 +1,517 @@ +--- +id: 63f2a5f09a785aed155c0a56 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*/) +``` + +In your `midfielder` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*midfielder\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)midfielder\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md new file mode 100644 index 00000000000..8666f5ab42e --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2a8e14fb388edd3242527.md @@ -0,0 +1,521 @@ +--- +id: 63f2a8e14fb388edd3242527 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*/) +``` + +In your `defender` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*defender\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)defender\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards(players.filter((player) => player.position === "midfielder")); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md new file mode 100644 index 00000000000..c41768c86d6 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2aa36fcdc63ee4e18fc37.md @@ -0,0 +1,527 @@ +--- +id: 63f2aa36fcdc63ee4e18fc37 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +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. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*/) +``` + +In your `goalkeeper` `case`, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +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*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)/) +``` + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*goalkeeper\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.position\s*===?\s*('|"|`)goalkeeper\2\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + + } +}); + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md new file mode 100644 index 00000000000..6c919ef5e37 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63f2ab4f6c52c5eec6d68de4.md @@ -0,0 +1,790 @@ +--- +id: 63f2ab4f6c52c5eec6d68de4 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +The final step is to add a `default` clause if none of the other `case` clauses match the user selection. + +For the `default` clause, call the `setPlayerCards` function without any arguments passed in. + +Test out your dropdown menu, and you should see the player cards be filtered out by position or nickname. + +Congratulations on completing the football team cards project! + +# --hints-- + +You should add a `default` clause to your `switch` statement. + +```js +assert.match(code, /default\s*:\s*/) +``` + +In your `default` clause, you should call the `setPlayerCards` function without any arguments passed in. + +```js +assert.match(code, /default\s*:\s*setPlayerCards\(\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + break; + case "forward": + setPlayerCards(players.filter((player) => player.position === "forward")); + break; + case "midfielder": + setPlayerCards( + players.filter((player) => player.position === "midfielder") + ); + break; + case "defender": + setPlayerCards( + players.filter((player) => player.position === "defender") + ); + break; + case "goalkeeper": + setPlayerCards( + players.filter((player) => player.position === "goalkeeper") + ); + break; + +--fcc-editable-region-- + + +--fcc-editable-region-- + } +}); + +``` + +# --solutions-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [ + { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, }, + { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, }, + { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", }, + { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", }, + { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", }, + { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", }, + { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", }, + { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, }, + { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", }, + { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", }, + { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", }, + { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, }, + { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, }, + { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, }, + { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", }, + { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, }, + { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, }, + { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, }, + { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", }, + { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, }, + { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", }, + { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], }; + +Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      ` ) .join(""); }; + +playersDropdownList.addEventListener("change", (e) => { playerCards.innerHTML = ""; + + switch (e.target.value) { case "nickname": setPlayerCards(players.filter((player) => player.nickname !== null)); break; case "forward": setPlayerCards(players.filter((player) => player.position === "forward")); break; case "midfielder": setPlayerCards( players.filter((player) => player.position === "midfielder") ); break; case "defender": setPlayerCards( players.filter((player) => player.position === "defender") ); break; case "goalkeeper": setPlayerCards( players.filter((player) => player.position === "goalkeeper") ); break; default: setPlayerCards(); } }); diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md new file mode 100644 index 00000000000..03ddbef793f --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fc88d8fa7127f76e0324f.md @@ -0,0 +1,504 @@ +--- +id: 641fc88d8fa7127f76e0324f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + + +Call the `setPlayerCards` function with an argument of `players.filter()`. + +Inside the `filter` method, add a callback function with a parameter called `player` and implicitly return `player.nickname` is not `null`. + +# --hints-- + +In your `nickname` case, you should call the `setPlayerCards` function. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(/) +``` + +You should pass `players.filter()` to your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(/) +``` + +You should pass an arrow callback function to your `players.filter()` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?.*\)?\s*=>/); +``` + +Your `filter()` callback should take a `player` parameter. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>/) +``` + +Your `filter()` callback should implicitly return the result of checking if `player.nickname` is not `null`. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md new file mode 100644 index 00000000000..e084de31fa4 --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/641fcfd468185384ac218b7d.md @@ -0,0 +1,488 @@ +--- +id: 641fcfd468185384ac218b7d +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Before you can move onto the next case, you will need to add a `break` statement: + +```js + case "example": + // code goes here + break; +``` + +The `break` statement breaks out of the `switch` statement early, usually after executing some code after a `case` clause matches the expression. If a `break` statement is not present, execution will continue through the rest of the causes in the `switch` statement. + +Below your `setPlayerCards` call, add a `break` statement. + +# --hints-- + +You will need to add a `break` statement below your `setPlayerCards` call. + +```js +assert.match(code, /\s*case\s*('|"|`)\s*nickname\s*\1\s*:\s*setPlayerCards\(\s*players\.filter\(\s*\(?\s*player\s*\)?\s*=>\s*player\.nickname\s*!==\s*null\s*\)\s*\);?\s*break/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn Modern JavaScript methods by building football team cards + + + + +

      Team stats

      +
      +
      +

      Team:

      +

      Sport:

      +

      Year:

      +

      Head coach:

      +
      + + +
      +
      +

      Sergio Almirón

      +

      Position: forward

      +

      Number: 1

      +

      Nickname: N/A

      +
      +
      +

      Sergio Batista

      +

      Position: midfielder

      +

      Number: 2

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Bochini

      +

      Position: midfielder

      +

      Number: 3

      +

      Nickname: El Bocha

      +
      +
      +

      Claudio Borghi

      +

      Position: midfielder

      +

      Number: 4

      +

      Nickname: Bichi

      +
      +
      +

      José Luis Brown

      +

      Position: defender

      +

      Number: 5

      +

      Nickname: Tata

      +
      +
      +

      Daniel Passarella

      +

      Position: defender

      +

      Number: 6

      +

      Nickname: El Gran Capitán

      +
      +
      +

      Jorge Burruchaga

      +

      Position: forward

      +

      Number: 7

      +

      Nickname: Burru

      +
      +
      +

      Néstor Clausen

      +

      Position: defender

      +

      Number: 8

      +

      Nickname: N/A

      +
      +
      +

      José Luis Cuciuffo

      +

      Position: defender

      +

      Number: 9

      +

      Nickname: El Cuchu

      +
      +
      +

      (Captain) Diego Maradona

      +

      Position: midfielder

      +

      Number: 10

      +

      Nickname: El Pibe de Oro

      +
      +
      +

      Jorge Valdano

      +

      Position: forward

      +

      Number: 11

      +

      Nickname: The Philosopher of Football

      +
      +
      +

      Héctor Enrique

      +

      Position: midfielder

      +

      Number: 12

      +

      Nickname: N/A

      +
      +
      +

      Oscar Garré

      +

      Position: defender

      +

      Number: 13

      +

      Nickname: N/A

      +
      +
      +

      Ricardo Giusti

      +

      Position: midfielder

      +

      Number: 14

      +

      Nickname: N/A

      +
      +
      +

      Luis Islas

      +

      Position: goalkeeper

      +

      Number: 15

      +

      Nickname: El loco

      +
      +
      +

      Julio Olarticoechea

      +

      Position: defender

      +

      Number: 16

      +

      Nickname: N/A

      +
      +
      +

      Pedro Pasculli

      +

      Position: forward

      +

      Number: 17

      +

      Nickname: N/A

      +
      +
      +

      Nery Pumpido

      +

      Position: goalkeeper

      +

      Number: 18

      +

      Nickname: N/A

      +
      +
      +

      Oscar Ruggeri

      +

      Position: defender

      +

      Number: 19

      +

      Nickname: El Cabezón

      +
      +
      +

      Carlos Tapia

      +

      Position: midfielder

      +

      Number: 20

      +

      Nickname: N/A

      +
      +
      +

      Marcelo Trobbiani

      +

      Position: midfielder

      +

      Number: 21

      +

      Nickname: Calesita

      +
      +
      +

      Héctor Zelada

      +

      Position: goalkeeper

      +

      Number: 22

      +

      Nickname: N/A

      +
      +
      +
      +
      © freeCodeCamp
      + + + + +``` + +```css +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --dark-grey: #0a0a23; + --light-grey: #f5f6f7; + --white: #ffffff; + --black: #000; +} + +body { + background-color: var(--dark-grey); + text-align: center; + padding: 10px; +} + +.title, +.options-label, +.team-stats, +footer { + color: var(--white); +} + +.title { + margin: 1.3rem 0; +} + +.team-stats { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + font-size: 1.3rem; + margin: 1.2rem 0; +} + +.options-label { + font-size: 1.2rem; +} + +.cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.player-card { + background-color: var(--light-grey); + padding: 1.3rem; + margin: 1.2rem; + width: 300px; + border-radius: 15px; +} + +@media (max-width: 768px) { + .team-stats { + flex-direction: column; + } +} + +``` + +```js +const teamName = document.getElementById("team"); +const typeOfSport = document.getElementById("sport"); +const worldCupYear = document.getElementById("year"); +const headCoach = document.getElementById("head-coach"); +const playerCards = document.getElementById("player-cards"); +const playersDropdownList = document.getElementById("players"); +const myFavoriteFootballTeam = { + team: "Argentina", + sport: "Football", + year: 1986, + isWorldCupWinner: true, + headCoach: { + coachName: "Carlos Bilardo", + matches: 7, + }, + players: [ + { + name: "Sergio Almirón", + position: "forward", + number: 1, + isCaptain: false, + nickname: null, + }, + { + name: "Sergio Batista", + position: "midfielder", + number: 2, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Bochini", + position: "midfielder", + number: 3, + isCaptain: false, + nickname: "El Bocha", + }, + { + name: "Claudio Borghi", + position: "midfielder", + number: 4, + isCaptain: false, + nickname: "Bichi", + }, + { + name: "José Luis Brown", + position: "defender", + number: 5, + isCaptain: false, + nickname: "Tata", + }, + { + name: "Daniel Passarella", + position: "defender", + number: 6, + isCaptain: false, + nickname: "El Gran Capitán", + }, + { + name: "Jorge Burruchaga", + position: "forward", + number: 7, + isCaptain: false, + nickname: "Burru", + }, + { + name: "Néstor Clausen", + position: "defender", + number: 8, + isCaptain: false, + nickname: null, + }, + { + name: "José Luis Cuciuffo", + position: "defender", + number: 9, + isCaptain: false, + nickname: "El Cuchu", + }, + { + name: "Diego Maradona", + position: "midfielder", + number: 10, + isCaptain: true, + nickname: "El Pibe de Oro", + }, + { + name: "Jorge Valdano", + position: "forward", + number: 11, + isCaptain: false, + nickname: "The Philosopher of Football", + }, + { + name: "Héctor Enrique", + position: "midfielder", + number: 12, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Garré", + position: "defender", + number: 13, + isCaptain: false, + nickname: null, + }, + { + name: "Ricardo Giusti", + position: "midfielder", + number: 14, + isCaptain: false, + nickname: null, + }, + { + name: "Luis Islas", + position: "goalkeeper", + number: 15, + isCaptain: false, + nickname: "El loco", + }, + { + name: "Julio Olarticoechea", + position: "defender", + number: 16, + isCaptain: false, + nickname: null, + }, + { + name: "Pedro Pasculli", + position: "forward", + number: 17, + isCaptain: false, + nickname: null, + }, + { + name: "Nery Pumpido", + position: "goalkeeper", + number: 18, + isCaptain: false, + nickname: null, + }, + { + name: "Oscar Ruggeri", + position: "defender", + number: 19, + isCaptain: false, + nickname: "El Cabezón", + }, + { + name: "Carlos Tapia", + position: "midfielder", + number: 20, + isCaptain: false, + nickname: null, + }, + { + name: "Marcelo Trobbiani", + position: "midfielder", + number: 21, + isCaptain: false, + nickname: "Calesita", + }, + { + name: "Héctor Zelada", + position: "goalkeeper", + number: 22, + isCaptain: false, + nickname: null, + }, + ], +}; + +Object.freeze(myFavoriteFootballTeam); +const { sport, team, year, players } = myFavoriteFootballTeam; +const { coachName } = myFavoriteFootballTeam.headCoach; + +typeOfSport.innerHTML = sport; +teamName.innerHTML = team; +worldCupYear.innerHTML = year; +headCoach.innerHTML = coachName; + +const setPlayerCards = (arr = players) => { + playerCards.innerHTML += arr + .map( + ({ name, position, number, isCaptain, nickname }) => + ` +
      +

      ${name} ${isCaptain ? "(Captain)" : ""}

      +

      Position: ${position}

      +

      Number: ${number}

      +

      Nickname: ${nickname !== null ? nickname : "N/A"}

      +
      + ` + ) + .join(""); +}; + +playersDropdownList.addEventListener("change", (e) => { + playerCards.innerHTML = ""; + +--fcc-editable-region-- + + switch (e.target.value) { + case "nickname": + setPlayerCards(players.filter((player) => player.nickname !== null)); + + } + +--fcc-editable-region-- + +}); + +``` diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md index b7e58d9c2c9..a461d643c3f 100644 --- a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md +++ b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md @@ -9,7 +9,7 @@ dashedName: build-a-data-graph-explorer Ви будете працювати над цим проєктом з Google Colaboratory. -Once you complete the project, submit your project link below. Якщо ви надаєте посилання на Google Colaboratory, переконайтеся, що ви увімкнули режим доступу для «усіх, хто має це посилання». +Після завершення проєкту надішліть посилання на нього нижче. Якщо ви надаєте посилання на Google Colaboratory, переконайтеся, що ви увімкнули режим доступу для «усіх, хто має це посилання». # --instructions-- diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md index ffa08801a79..d2057f12e04 100644 --- a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md +++ b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md @@ -9,7 +9,7 @@ dashedName: build-three-math-games Ви будете працювати над цим проєктом з Google Colaboratory. -Once you complete the project, submit your project link below. Якщо ви надаєте посилання на Google Colaboratory, переконайтеся, що ви увімкнули режим доступу для «усіх, хто має це посилання». +Після завершення проєкту надішліть посилання на нього нижче. Якщо ви надаєте посилання на Google Colaboratory, переконайтеся, що ви увімкнули режим доступу для «усіх, хто має це посилання». # --instructions--