curriculum/challenges/english/blocks/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md
Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used:
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. Remember that you destructured the players variable from the myFavoriteFootballTeam object on line 175.
Your setPlayerCards function should take an arr parameter.
assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/);
Your arr parameter should have a default value of players.
assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\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;
--fcc-editable-region--
const setPlayerCards = () => {};
--fcc-editable-region--