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

JavaScript
1

Tell us what’s happening:

Can’t pass tests 11 onwards. The functionality seems to work when I try it but the tests won’t pass.

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 */


/* file: script.js */
const footballTeam = {
  team: "Thunder FC",
  year: 2025,
  headCoach: "Alex Martinez",
  players: [
    {
      name: "Liam Carter",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Ethan Reynolds",
      position: "midfielder",
      isCaptain: true // Captain of the team
    },
    {
      name: "Mason Blake",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Noah Daniels",
      position: "goalkeeper",
      isCaptain: false
    }
  ]
};

document.querySelector('#head-coach').textContent = footballTeam.headCoach;

document.querySelector('#team').textContent = footballTeam.team;

document.querySelector('#year').textContent = footballTeam.year;

const playersCardsContainer = document.createElement('div');
playersCardsContainer.id = 'player-cards';
document.body.appendChild(playersCardsContainer);

function renderPlayers(players) {
  playersCardsContainer.replaceChildren();
  for (let player of players) {
  let playerCardEl = document.createElement('div');
  playerCardEl.classList.add('player-card');

  let playerNameEl = document.createElement('h2');
  playerNameEl.textContent = (player.isCaptain ? '(Captain) ' : '') + player.name;
  playerCardEl.appendChild(playerNameEl);

  let playerPosition = document.createElement('p');
  playerPosition.textContent = `Position ${player.position}`;
  playerCardEl.appendChild(playerPosition);

  playersCardsContainer.appendChild(playerCardEl);
}
}

renderPlayers(footballTeam.players);

const dropdown = document.querySelector('select#players');

dropdown.addEventListener('change', filterPlayers);

function filterPlayers() {
  if (dropdown.value === 'all') {
    renderPlayers(footballTeam.players);
  } else if (dropdown.value === 'forward') {
    renderPlayers(footballTeam.players.filter(player => player.position === 'forward'));
  } else if (dropdown.value === 'midfielder') {
    renderPlayers(footballTeam.players.filter(player => player.position === 'midfielder'));
  } else if (dropdown.value === 'defender') {
    renderPlayers(footballTeam.players.filter(player => player.position === 'defender'));
  } else if (dropdown.value === 'goalkeeper') {
    renderPlayers(footballTeam.players.filter(player => player.position === 'goalkeeper'));
  }
}

Your browser information:

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

Challenge Information:

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

image
image653×597 55.8 KB

2

What is test 11 onwards? What debugging have you tried?

Please post your HTML as well.

3

I’ve edited the original post to include the html as well as an image of the tests which are failing.

4

Please use words to describe what tests are failing and how you’ve tried to debug those issues.

5

Look carefully at User Story #11 again. You’re missing something there.

6

The 11th test says “When the option All Players is selected, all players should be present within #player-cards .”

I’ve added a change event listener on the select element and then in the callback function, I check what the value property of the select element is. Depending on the value, I am re-rendering the children of #player-cards.

I’m not able to understand the problem here.

7

Ok, I figured it out. The issue was that I was missing a colon after the word position in the position text.
<p>Position: midfielder</p>