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

JavaScript
1

Tell us what’s happening:

Nothing I do works. Everything passes but 11 - 15:

  • Failed:11. When the option All Players is selected, all players should be shown within #player-cards.

  • Failed:12. When the option Position Forward is selected, only forward players should be shown within #player-cards.

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

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

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

Please help.

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: "FC Awesome",
  year: 2025,
  headCoach: "John Doe",
  players: [
    { name: "Alice", position: "forward", isCaptain: true },
    { name: "Bob", position: "midfielder", isCaptain: false },
    { name: "Charlie", position: "defender", isCaptain: false },
    { name: "David", position: "goalkeeper", isCaptain: false },
    { name: "Eva", position: "midfielder", isCaptain: false },
    { name: "Frank", position: "forward", isCaptain: false },
    { name: "Grace", position: "defender", isCaptain: false },
  ],
};

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

function displayPlayers(position) {
  const playerCardsDiv = document.getElementById("player-cards");
  playerCardsDiv.innerHTML = "";
  
  const playersToShow = footballTeam.players.filter(player => 
    position === "all" || player.position === position
  );

  playersToShow.forEach(player => {
    const card = document.createElement("div");
    card.className = "player-card";
    card.innerHTML = `<h3>${player.name}</h3>
                     <p>Position: ${player.position}</p>
                     <p>Captain: ${player.isCaptain ? "Yes" : "No"}</p>`;
    playerCardsDiv.appendChild(card);
  });
}

document.getElementById("players").addEventListener("change", (event) => {
  const selectedPosition = event.target.value;
  displayPlayers(selectedPosition);
});

displayPlayers("all");

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

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

2

Please talk about how you got stuck trying to figure out why those tests are failing

3

Well, I tried to first work on tests 11-14, being that they involve #player-cards (3 bats with one stone). Also, I believe that I need to pass all of the other tests in order to pass the last one. I’m not sure of what they want exactly for me as well for the last four steps, so that’s also it too.

4

this can be an issue, the tests expect the word captain to be present only if the player is captain

5

After I saw your reply, I tried working on it, but I don’t exactly understand what you are trying to say. Can you please go into more detail about what’s wrong about that specific part of my code?

current code in that section:

card.innerHTML = `<h3>${player.name}</h3>
                  <p>Position: ${player.position}</p>
                  <p>Age: ${player.age}</p>
                  <p>${player.isCaptain ? "Captain: Yes" : ""}</p>`;
6

that is better, but also you should write (Captain) in the h2 together with the name, see user story 11

7

Like this?

card.innerHTML = `<h3>${player.name}${player.isCaptain ? " (Captain)" : ""}</h3>
                  <p>Position: ${player.position}</p>
                  <p>Age: ${player.age}</p>
                  <p>${player.isCaptain ? "Captain: Yes" : ""}</p>`;

should I change the h3 into an h2 or was that just a typo

also, there’s an error in the console:

[TypeError: Cannot read properties of null (reading 'innerText')]

8

you can read the user story yourself, what does it say?

9

That made me feel dumb… All that was wrong was an <h3> element that was supposed to be an <h2>. :person_facepalming:

Thank you for your help, @ILM and @JeremyLT ! I appreciate it!