curriculum/challenges/english/blocks/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md
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.
You should call the .map() method on your arr parameter.
assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/);
Your .map() method should take an empty callback function.
assert.match(code, /arr\.map\(\s*(\(\s*\)\s*=>|function\s*\(\s*\))\s*\{\s*\}\s*\)/);
You should use the += operator on playerCards.innerHTML.
assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/);
You should assign arr.map() to the playerCards.innerHTML using the += operator.
assert.match(code, /playerCards\.innerHTML\s*\+=\s*arr\.map\(\s*(\(\s*\)\s*=>|function\s*\(\s*\))\s*\{\s*\}\s*\)/);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Learn Modern JavaScript methods by building football team cards
</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Team stats</h1>
<main>
<div class="team-stats">
<p>Team: <span id="team"></span></p>
<p>Sport: <span id="sport"></span></p>
<p>Year: <span id="year"></span></p>
<p>Head coach: <span id="head-coach"></span></p>
</div>
<label class="options-label" for="players">Filter Teammates:</label>
<select name="players" id="players">
<option value="all">All Players</option>
<option value="nickname">Nicknames</option>
<option value="forward">Position Forward</option>
<option value="midfielder">Position Midfielder</option>
<option value="defender">Position Defender</option>
<option value="goalkeeper">Position Goalkeeper</option>
</select>
<div class="cards" id="player-cards">
<div class="player-card">
<h2>Sergio Almirón</h2>
<p>Position: forward</p>
<p>Number: 1</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>Sergio Batista</h2>
<p>Position: midfielder</p>
<p>Number: 2</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>Ricardo Bochini</h2>
<p>Position: midfielder</p>
<p>Number: 3</p>
<p>Nickname: El Bocha</p>
</div>
<div class="player-card">
<h2>Claudio Borghi</h2>
<p>Position: midfielder</p>
<p>Number: 4</p>
<p>Nickname: Bichi</p>
</div>
<div class="player-card">
<h2>José Luis Brown</h2>
<p>Position: defender</p>
<p>Number: 5</p>
<p>Nickname: Tata</p>
</div>
<div class="player-card">
<h2>Daniel Passarella</h2>
<p>Position: defender</p>
<p>Number: 6</p>
<p>Nickname: El Gran Capitán</p>
</div>
<div class="player-card">
<h2>Jorge Burruchaga</h2>
<p>Position: forward</p>
<p>Number: 7</p>
<p>Nickname: Burru</p>
</div>
<div class="player-card">
<h2>Néstor Clausen</h2>
<p>Position: defender</p>
<p>Number: 8</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>José Luis Cuciuffo</h2>
<p>Position: defender</p>
<p>Number: 9</p>
<p>Nickname: El Cuchu</p>
</div>
<div class="player-card">
<h2>(Captain) Diego Maradona</h2>
<p>Position: midfielder</p>
<p>Number: 10</p>
<p>Nickname: El Pibe de Oro</p>
</div>
<div class="player-card">
<h2>Jorge Valdano</h2>
<p>Position: forward</p>
<p>Number: 11</p>
<p>Nickname: The Philosopher of Football</p>
</div>
<div class="player-card">
<h2>Héctor Enrique</h2>
<p>Position: midfielder</p>
<p>Number: 12</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>Oscar Garré</h2>
<p>Position: defender</p>
<p>Number: 13</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>Ricardo Giusti</h2>
<p>Position: midfielder</p>
<p>Number: 14</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>Luis Islas</h2>
<p>Position: goalkeeper</p>
<p>Number: 15</p>
<p>Nickname: El loco</p>
</div>
<div class="player-card">
<h2>Julio Olarticoechea</h2>
<p>Position: defender</p>
<p>Number: 16</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>Pedro Pasculli</h2>
<p>Position: forward</p>
<p>Number: 17</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>Nery Pumpido</h2>
<p>Position: goalkeeper</p>
<p>Number: 18</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>Oscar Ruggeri</h2>
<p>Position: defender</p>
<p>Number: 19</p>
<p>Nickname: El Cabezón</p>
</div>
<div class="player-card">
<h2>Carlos Tapia</h2>
<p>Position: midfielder</p>
<p>Number: 20</p>
<p>Nickname: N/A</p>
</div>
<div class="player-card">
<h2>Marcelo Trobbiani</h2>
<p>Position: midfielder</p>
<p>Number: 21</p>
<p>Nickname: Calesita</p>
</div>
<div class="player-card">
<h2>Héctor Zelada</h2>
<p>Position: goalkeeper</p>
<p>Number: 22</p>
<p>Nickname: N/A</p>
</div>
</div>
</main>
<footer>© freeCodeCamp</footer>
<script src="./script.js"></script>
</body>
</html>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--dark-grey: #0a0a23;
--light-grey: #f5f6f7;
--white: #ffffff;
--black: #000;
}
body {
background-color: var(--dark-grey);
text-align: center;
padding: 10px;
}
.title,
.options-label,
.team-stats,
footer {
color: var(--white);
}
.title {
margin: 1.3rem 0;
}
.team-stats {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
font-size: 1.3rem;
margin: 1.2rem 0;
}
.options-label {
font-size: 1.2rem;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.player-card {
background-color: var(--light-grey);
padding: 1.3rem;
margin: 1.2rem;
width: 300px;
border-radius: 15px;
}
@media (max-width: 768px) {
.team-stats {
flex-direction: column;
}
}
const teamName = document.getElementById("team");
const typeOfSport = document.getElementById("sport");
const worldCupYear = document.getElementById("year");
const headCoach = document.getElementById("head-coach");
const playerCards = document.getElementById("player-cards");
const playersDropdownList = document.getElementById("players");
const myFavoriteFootballTeam = {
team: "Argentina",
sport: "Football",
year: 1986,
isWorldCupWinner: true,
headCoach: {
coachName: "Carlos Bilardo",
matches: 7,
},
players: [
{
name: "Sergio Almirón",
position: "forward",
number: 1,
isCaptain: false,
nickname: null,
},
{
name: "Sergio Batista",
position: "midfielder",
number: 2,
isCaptain: false,
nickname: null,
},
{
name: "Ricardo Bochini",
position: "midfielder",
number: 3,
isCaptain: false,
nickname: "El Bocha",
},
{
name: "Claudio Borghi",
position: "midfielder",
number: 4,
isCaptain: false,
nickname: "Bichi",
},
{
name: "José Luis Brown",
position: "defender",
number: 5,
isCaptain: false,
nickname: "Tata",
},
{
name: "Daniel Passarella",
position: "defender",
number: 6,
isCaptain: false,
nickname: "El Gran Capitán",
},
{
name: "Jorge Burruchaga",
position: "forward",
number: 7,
isCaptain: false,
nickname: "Burru",
},
{
name: "Néstor Clausen",
position: "defender",
number: 8,
isCaptain: false,
nickname: null,
},
{
name: "José Luis Cuciuffo",
position: "defender",
number: 9,
isCaptain: false,
nickname: "El Cuchu",
},
{
name: "Diego Maradona",
position: "midfielder",
number: 10,
isCaptain: true,
nickname: "El Pibe de Oro",
},
{
name: "Jorge Valdano",
position: "forward",
number: 11,
isCaptain: false,
nickname: "The Philosopher of Football",
},
{
name: "Héctor Enrique",
position: "midfielder",
number: 12,
isCaptain: false,
nickname: null,
},
{
name: "Oscar Garré",
position: "defender",
number: 13,
isCaptain: false,
nickname: null,
},
{
name: "Ricardo Giusti",
position: "midfielder",
number: 14,
isCaptain: false,
nickname: null,
},
{
name: "Luis Islas",
position: "goalkeeper",
number: 15,
isCaptain: false,
nickname: "El loco",
},
{
name: "Julio Olarticoechea",
position: "defender",
number: 16,
isCaptain: false,
nickname: null,
},
{
name: "Pedro Pasculli",
position: "forward",
number: 17,
isCaptain: false,
nickname: null,
},
{
name: "Nery Pumpido",
position: "goalkeeper",
number: 18,
isCaptain: false,
nickname: null,
},
{
name: "Oscar Ruggeri",
position: "defender",
number: 19,
isCaptain: false,
nickname: "El Cabezón",
},
{
name: "Carlos Tapia",
position: "midfielder",
number: 20,
isCaptain: false,
nickname: null,
},
{
name: "Marcelo Trobbiani",
position: "midfielder",
number: 21,
isCaptain: false,
nickname: "Calesita",
},
{
name: "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.textContent = sport;
teamName.textContent = team;
worldCupYear.textContent = year;
headCoach.textContent = coachName;
const setPlayerCards = (arr = players) => {
--fcc-editable-region--
--fcc-editable-region--
};