Build a Set of Football Team Cards - Step 12

Tell us what’s happening:

The filter is working but the test #12 to #15 are not passing.

Your code so far

<!-- file: index.html -->

/* file: styles.css */

const filterEl = document.getElementById("players");
filterEl.addEventListener("change", () => {
  const selectedValue = filterEl.value;
  const allCards = document.querySelectorAll(".player-card");

  allCards.forEach(card => {
    const positionText = card.querySelector("p").textContent;
    const cardPosition = positionText.replace("Position: ", "").trim();

    if (selectedValue === "all" || cardPosition === selectedValue) {
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  });
});


Your browser information:

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

Challenge Information:

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

please share all your code, I can’t do any debugging if you don’t share the rest of the code

modified code give me the same error:

// 1) The footballTeam object
const footballTeam = {
  // (A) Must have these four properties with correct types:
  team: "Argentina",            // string
  year: 1986,                   // number
  headCoach: "Carlos Bilardo",  // string
  players: [                    // array of at least four objects
    {
      name: "Diego Maradona",
      position: "midfielder",
      isCaptain: true
    },
    {
      name: "Jorge Valdano",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Oscar Ruggeri",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Nery Pumpido",
      position: "goalkeeper",
      isCaptain: false
    }
  ]
};

// 2) Display the team, year, and head coach in their respective elements
document.getElementById("team").textContent = footballTeam.team;
document.getElementById("year").textContent = footballTeam.year;
document.getElementById("head-coach").textContent = footballTeam.headCoach;

// 3) Build player cards inside player-cards
const playerCardsContainer = document.getElementById("player-cards");

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

  // (a) Name 
  const nameHeading = document.createElement("h2");
  nameHeading.textContent = player.isCaptain
    ? `(Captain) ${player.name}`
    : player.name;

  // (b) Position 
  const positionPara = document.createElement("p");
  
  positionPara.textContent = `Position: ${player.position}`;

  // Append to the card
  cardDiv.appendChild(nameHeading);
  cardDiv.appendChild(positionPara);

  // Add the card to player-cards
  playerCardsContainer.appendChild(cardDiv);
});

// 4) Filtering logic 

const filterEl = document.getElementById("players");

filterEl.addEventListener("change", () => {
  const selectedValue = filterEl.value;
  const allCards = document.querySelectorAll(".player-card");

  allCards.forEach(card => {
    const positionText = card.querySelector("p").textContent;
    const cardPosition = positionText.replace("Position: ", "").trim();
if (selectedValue === "All Players") {
  card.style.display = "block";
} else if (selectedValue === "Position Forward" && cardPosition === "forward") {
  card.style.display = "block";
} else if (selectedValue === "Position Midfielder" && cardPosition === "midfielder") {
  card.style.display = "block";
} else if (selectedValue === "Position Defender" && cardPosition === "defender") {
  card.style.display = "block";
} else if (selectedValue === "Position Goalkeeper" && cardPosition === "goalkeeper") {
  card.style.display = "block";
} else {
  card.style.display = "none"; 
}

    
  });
});

These tests are failing:

    1. When the option Position Forward is selected, only forward players should be shown within #player-cards.
    1. When the option Position Midfielder is selected, only midfielder players should be shown within #player-cards.
    1. When the option Position Defender is selected, only defender players should be shown within #player-cards.
    1. When the option Position Goalkeeper is selected, only goalkeeper players should be shown.

thank you!

check the html for what are the values of the select element, those you are using are not the correct values

I modified the HTML . But the code that came autogenerated didn’t work as well.

<!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 Players">All Players</option>
        <option value="Position Forward">Position Forward</option>
        <option value="Position Midfielder">Position Midfielder</option>
        <option value="Position Defender">Position Defender</option>
        <option value="Position Goalkeeper">Position Goalkeeper</option>
      </select>
      <div class="cards" id="player-cards"></div>
    </main>
    <footer>&copy; freeCodeCamp</footer>
    <script src="./script.js"></script>
  </body>
</html>

you should not change the html, you should change the strings you compare the values to in the JavaScript

So I reset the lesson and add the following JS, but not passing the same 4 tests again:

// 1) The footballTeam object
const footballTeam = {
  // (A) Must have these four properties with correct types:
  team: "Argentina",            // string
  year: 1986,                   // number
  headCoach: "Carlos Bilardo",  // string
  players: [                    // array of at least four objects
    {
      name: "Diego Maradona",
      position: "midfielder",
      isCaptain: true
    },
    {
      name: "Jorge Valdano",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Oscar Ruggeri",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Nery Pumpido",
      position: "goalkeeper",
      isCaptain: false
    }
  ]
};

// 2) Display the team, year, and head coach in their respective elements
document.getElementById("team").textContent = footballTeam.team;
document.getElementById("year").textContent = footballTeam.year;
document.getElementById("head-coach").textContent = footballTeam.headCoach;

// 3) Build player cards inside #player-cards
const playerCardsContainer = document.getElementById("player-cards");

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

  // (a) Name in <h2>
  const nameHeading = document.createElement("h2");
  nameHeading.textContent = player.isCaptain
    ? `(Captain) ${player.name}`
    : player.name;

  // (b) Position in <p>
  const positionPara = document.createElement("p");
  // Must be exactly "Position: forward" or "Position: defender", etc.
  positionPara.textContent = `Position: ${player.position}`;

  // Append to the card
  cardDiv.appendChild(nameHeading);
  cardDiv.appendChild(positionPara);

  // Add the card to #player-cards
  playerCardsContainer.appendChild(cardDiv);
});

// 4) Filtering logic for the <select> with id="players"
const filterEl = document.getElementById("players");
filterEl.addEventListener("change", () => {
  const selectedValue = filterEl.value.toLowerCase();  
  const allCards = document.querySelectorAll(".player-card");
  
  allCards.forEach(card => {
    const positionText = card.querySelector("p").textContent;
    
    const cardPosition = positionText.replace("Position: ", "").toLowerCase().trim();
    
    if (selectedValue === "all") {
      card.style.display = "block";
    } else if (cardPosition === selectedValue) {
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  });
});

Your issue is that you still have the elements on the page, even if hidden from view, so the tests still see them

1 Like

Thank you for taking the time. This worked.