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

JavaScript
1

Tell us what’s happening:

Can’t pass test 12 to 15 even though can filter select element.
When the option Position Forward is selected, only forward players should be present 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: "The Colocoys",
  year: 2025,
  headCoach: "Kura Rapnet",
  players: [{
    name: "Antonio Kupal",
    position: "forward",
    isCaptain: true
  },
  {
    name: "Borgo Urag",
    position: "midfielder",
    isCaptain: false
  },
  {
    name: "Buto Uten",
    position: "defender",
    isCaptain: false
  },
  {
    name: "Bilat Pekpek",
    position: "goalkeeper",
    isCaptain: false
  }]
};

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

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

footballTeam.players.forEach(player => {
  const playerCard = document.createElement("div");
  playerCard.classList.add("player-card");

  const playerName = document.createElement("h2");
  playerName.textContent = player.name;
  if (player.isCaptain) {
    playerName.textContent += " (Captain)";
  }

  const playerPosition = document.createElement("p");
  playerPosition.textContent = `Position: ${player.position}`;
  playerCard.appendChild(playerName);
  playerCard.appendChild(playerPosition);
  playerCards.appendChild(playerCard);
});

function filterPlayers() {
  const selectedPosition = boys.value;
  const allCards = document.querySelectorAll(".player-card");

  allCards.forEach((card) => {
    if (selectedPosition === "all") {
    card.style.display = "block";
  } else {
    
    const cardText = card.innerText;
    if (cardText.includes(selectedPosition)) {
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  }
  });
};

boys.addEventListener("change", filterPlayers);

Your browser information:

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

Challenge Information:

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

2

make sure you are implementing the cards exactly as requested

3

what do you mean? please how?

4

I mean check carefully user story 11 against what you are doing

also double check user story 12. Are you removing the extra cards as requested?

5

yes it is removing, still cant figure it out what’s the issue,

already checked a couple times, i don’t know what to do now :joy:

6

removing and hiding are not the same thing

7

guide me please, don’t know what to do

Screenshot 2025-08-29 201305
Screenshot 2025-08-29 201305352×674 37.3 KB

8

you need to add and remove the cards, not hide them with

did you make changes to the code you posted?

9

not yet, ok ill try :blush:

11 
  • 13. When the option Position Midfielder is selected, only midfielder players should be present within #player-cards.

  • 14. When the option Position Defender is selected, only defender players should be present within #player-cards.

  • 15. When the option Position Goalkeeper is selected, only goalkeeper players should be present.

its what im getting heres my updated code

Screenshot 2025-09-01 154645
Screenshot 2025-09-01 154645841×313 25.5 KB

12

please post your code not a screenshot

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').