Tell us what’s happening:
Hi,
I’m meeting conditions 12 and 15 here, but not 11, 13, 14.
I don’t understand how it’s possible.
When I inspect the #player-cards div I can clearly see the correct .player-cards, they are updated as expected when changing the selector value.
The console returns no error.
Any idea why this doesn’t pass the test?
Your code so far
<!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>
Build a Set of 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>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="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>
</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 footballTeam = {
team: "France",
year: 1998,
headCoach: "Aimé Jacquet",
players: [
{
name: "Bernard Lama",
position: "goalkeeper",
isCaptain: false,
},
{
name: "Vincent Candela",
position: "defender",
isCaptain: false,
},
{
name: "Bixente Lizarazu",
position: "defender",
isCaptain: false,
},
{
name: "Patrick Vieira",
position: "midfielder",
isCaptain: false,
},
{
name: " Laurent Blanc",
position: "defender",
isCaptain: false,
},
{
name: "Youri Djorkaeff",
position: "midfielder",
isCaptain: false,
},
{
name: "Didier Deschamps",
position: "midfielder",
isCaptain: true,
},
{
name: "Marcel Desailly",
position: "defender",
isCaptain: false,
},
{
name: "Stéphane Guivarc'h",
position: "forward",
isCaptain: false,
},
{
name: "Zinedine Zidane",
position: "midfielder",
isCaptain: false,
},
{
name: "Robert Pires",
position: "midfielder",
isCaptain: false,
},
{
name: "Thierry Henry",
position: "forward",
isCaptain: false,
},
{
name: "Bernard Diomède",
position: "midfielder",
isCaptain: false,
},
{
name: "Alain Boghossian",
position: "midfielder",
isCaptain: false,
},
{
name: "Lilian Thuram",
position: "defender",
isCaptain: false,
},
{
name: "Fabien Barthez",
position: "goalkeeper",
isCaptain: false,
},
{
name: "Emmanuel Petit",
position: "midfielder",
isCaptain: false,
},
{
name: "Frank Leboeuf",
position: "defender",
isCaptain: false,
},
{
name: "Christian Karembeu",
position: "midfielder",
isCaptain: false,
},
{
name: "David Trezeguet",
position: "forward",
isCaptain: false,
},
{
name: "Christophe Dugarry",
position: "forward",
isCaptain: false,
},
{
name: "Lionel Charbonnier",
position: "goalkeeper",
isCaptain: false,
},
]
}
const headCoach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");
let playersSelector = document.getElementById("players");
const cards = document.querySelector("#player-cards");
headCoach.textContent = footballTeam.headCoach;
team.textContent = footballTeam.team;
year.textContent = footballTeam.year;
function playerCards(playerPosition) {
const players =
playerPosition === "all"
? footballTeam.players
: footballTeam.players.filter(
({ position }) => position === playerPosition
);
return players.map(({ name, position }) => {
return `
<div class="player-card">
<h2>${name}</h2>
<p>${position}</p>
</div>
`;
}).join("");
}
playersSelector.addEventListener("change", () => {
cards.innerHTML = playerCards(playersSelector.value)
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0
Challenge Information:
Build a Set of Football Team Cards - Build a Set of Football Team Cards
