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

JavaScript
1

Tell us what’s happening:

I don’t know why these two conditions aren’t full-filled.
11. When the option All Players is selected, all players should be shown within #player-cards.
12. When the option Position Forward is selected, only forward players should be shown within #player-cards.

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: "Wildcats",
  year: 2025,
  headCoach: "Coach Johnson",
  players: [
    { name: "Alex", position: "forward", isCaptain: true },
    { name: "Ben", position: "midfielder", isCaptain: false },
    { name: "Carlos", position: "defender", isCaptain: false },
    { name: "Derek", position: "goalkeeper", isCaptain: false },
    { name: "Ethan", position: "defender", isCaptain: false }
  ]
};

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



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: ${position}</p>
</div>`;
  }).join("");
}
const selectOption = document.querySelector("select");

const displayCard = document.querySelector("#player-cards");

selectOption.addEventListener("change",() => {
  displayCard.innerHTML=playerCards(selectOption.value)
;})
displayCard.innerHTML = playerCards("all");

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

2

HI @Vay23 !

Welcome to the forum!

Your issue is that one of the team members is a captain but your list doesn’t show it.

In your example, it looks like Alex is supposed to be the captain.
This is what should be displayed on the screen

Screenshot 2025-05-22 at 4.56.58 PM
Screenshot 2025-05-22 at 4.56.58 PM754×698 35.5 KB

When the players are rendered on the screen, you will need to check if the player is a captain. If so, you need to display that captain text.

Once you do that, then the test will pass

Hope that helps

3

OMG. That works. Thank you so much. That bug was giving me headache and so I just skipped that problem and forgot to check the forum. Again, thanks a million!