Build a Set of Football Team Cards - Build a Set of Football Team Cards

JavaScript
1

Tell us what’s happening:

Hey there!
My code has failed to pass yet interacting with the UI is working well.
This error is shown in the console but it seems to work on the interface: “11. When the option All Players is selected, all players should be present within #player-cards.
13. When the option Position Midfielder is selected, only midfielder players should be present within #player-cards.”
Please guide me on what to do. Thank you

Your code so far

<!-- file: index.html -->
<!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>&copy; freeCodeCamp</footer>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

:root {
–dark-grey: #0a0a23;
–light-grey: #f5f6f7;
–white: #ffffff;
–black: #000;
}

body {
background-color: var(–dark-grey);
text-align: center;
padding: 10px;
}

.title,
.options-label,
.team-stats,
footer {
color: var(–white);
}

.title {
margin: 1.3rem 0;
}

.team-stats {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
font-size: 1.3rem;
margin: 1.2rem 0;
}

.options-label {
font-size: 1.2rem;
}

.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.player-card {
background-color: var(–light-grey);
padding: 1.3rem;
margin: 1.2rem;
width: 300px;
border-radius: 15px;
}

@media (max-width: 768px) {
.team-stats {
flex-direction: column;
}
}

/* file: script.js */
const footballTeam = {
  team: "Sebitoli",
  year: 2026,
  headCoach: "Sulait",
  players: [{name: "Raymond", position: "midfielder", isCaptain: true}, {name: "Rogers", position: "forward", isCaptain: false}, {name: "Joseph", position: "defender", isCaptain: false}, {name: "Ibra", position: "forward", isCaptain: false}, {name: "Patrick", position: "defender", isCaptain: false}, {name: "Bruce", position: "midfielder", isCaptain: false}, {name: "Koojo", position: "goalkeeper", isCaptain: false}]
}

const headCoach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");

headCoach.innerText = footballTeam.headCoach;
team.textContent = footballTeam.team;
year.innerText = footballTeam.year;

const playerCards = document.getElementById("player-cards");
const players = document.getElementById("players");

let footballTeamAll = footballTeam.players;

function filterplayers (teams) {

  let playerDetails = teams.map((player) => {
 return `<div class="player-card"><h2>${player.isCaptain ? "(captain)" : ""} ${player.name}</h2><p> Position: ${player.position}</p></div>`
}).join("");

  playerCards.innerHTML = playerDetails;
}

console.log(filterplayers (footballTeamAll));

players.addEventListener("change",(event) => {
 
 let getValue = event.target.value;

 let finalFilter;

 if (getValue === "all") {
    finalFilter = footballTeamAll;

 }else {
   finalFilter = footballTeamAll.filter((footballTeam) => {return getValue === footballTeam.position});
 }

filterplayers (finalFilter);
  
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Challenge Information:

Build a Set of Football Team Cards - Build a Set of Football Team Cards

2

Hi @hrugonge,

If a player is the captain, does your card look exactly like the instructions? Check capitalization.

Happy coding!

3

Many thanks! my code finally passed :grinning_face: