Tell us what’s happening:
Steps 12 -14 are failing even though the app is working the way it should. I took a different approach and am actively populating a a new display with an array of the players that match the selected position, but it’s failing
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: "Nashville SC",
year: 2025,
headCoach: "B.J. Callaghan",
players: [{
name:"Bryan Acosta",
position:"midfielder",
isCaptain: false
},
{
name:"Chris Applewhite",
position: "defender",
isCaptain: false
},
{
name: "Josh Bauer ",
position:"defender",
isCaptain: false
},
{
name:"Tyler Boyd ",
position:"forward",
isCaptain: false
},
{
name:"Gastón Brugman",
position:"midfielder",
isCaptain:false
},
{
name:"Teal Bunbury",
position:"forward",
isCaptain:false
},
{
name:"Julian Gaines",
position:"defender",
isCaptain:false
},
{
name:"Isaiah Jones",
position:"midfielder",
isCaptain: false
},
{
name:"Dan Lovitz",
position:"defender",
isCaptain:false
},
{
name:"Jack Maher",
position:"defender",
isCaptain:false
},
{
name:"Hany Mukhtar ",
position:"midfielder",
isCaptain:false
},
{
name:"Alex Muyl",
position:"midfielder",
isCaptain:false
},
{
name:"Woobens Pacius",
position:"forward",
isCaptain:false
},
{
name:"Jeisson Palacios",
position:"defender",
isCaptain:false
},
{
name:"Jonathan Pérez",
position:"midfielder",
isCaptain:false
},
{
name:"Jacob Shaffelburg",
position:"midfielder",
isCaptain:false
},
{
name:"Adem Sipić",
position:"forward",
isCaptain:false
},
{
name:"Sam Surridge",
position:"forward",
isCaptain:false
},
{
name:"Edvard Tagseth",
position:"midfielder",
isCaptain:false
},
{
name:"Xavier Valdez",
position:"goalkeeper",
isCaptain:false
},
{
name:"Taylor Washington",
position:"defender",
isCaptain:false
},
{
name:"Joe Willis",
position:"goalkeeper",
isCaptain:false
},
{
name:"Patrick Yazbek",
position:"midfielder",
isCaptain:false
},
{
name:"Walker Zimmerman",
position:"defender",
isCaptain:true
}]
};
// variables for all DOM elements
const coachElement = document.getElementById("head-coach");
const teamElement = document.getElementById("team");
const yearElement = document.getElementById("year");
const dropdownElement = document.getElementById("players");
const playerCardsContainer = document.getElementById("player-cards");
// Changing DOM elements with values in footballTeam object
teamElement.textContent = footballTeam.team;
yearElement.textContent = footballTeam.year;
coachElement.textContent = footballTeam.headCoach;
// creates a filtered array of players given a players position
function filterPlayers(position){
return footballTeam.players.filter((player)=>{
return player.position === position
})
}
// Displays player cards of an array passed to the function
function displayPlayerCards(arr){
playerCardsContainer.innerHTML = "" //Resets html of the player cards container
arr.forEach((player)=>{
if(player.isCaptain){ //If the player is a captain, puts captain in <h2> element
playerCardsContainer.innerHTML +=
`<div class="player-card">
<h2>(Captain) ${player.name}</h2>
<p>Position: ${player.position}</p>
</div>`
}else{ // creates innerHTML of basic player card
playerCardsContainer.innerHTML +=
`<div class="player-card">
<h2>${player.name}</h2>
<p>Position: ${player.position}</p>
</div>
`}
})
}
displayPlayerCards(footballTeam.players); // Sets standard player Cards
dropdownElement.addEventListener("change",(e)=>{
if(e.target.value === "all"){ //Display all players
displayPlayerCards(footballTeam.players);
}else{ // gets chosen position and displays player with that position
const chosenPositionArr = filterPlayers(e.target.value)
displayPlayerCards(chosenPositionArr);
}
})
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Challenge Information:
Build a Set of Football Team Cards - Build a Set of Football Team Cards
