Build a Set of Football Team Cards - Tests 11 and 13

JavaScript
1

Tell us what’s happening:

Tests 11 and 13 fail even though the program shows all players and filters midfielders properly. I’m not able to figure out what is wrong with my code. Any help is appreciated. Thanks in advance.

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 teamSpan = document.getElementById('team');
const yearSpan = document.getElementById('year');
const coachSpan = document.getElementById('head-coach');
const playerCardsDiv = document.getElementById('player-cards');
const positionSelect = document.getElementById('players');

const footballTeam = {
  team: "Headbussas",
  year: 2025,
  headCoach: 'Dtrizzle',
  players: [{
    name: 'Sophia Smith',
    position: 'forward',
    isCaptain: false,
  }, {
    name: 'Lily Yohannes',
    position: 'midfielder',
    isCaptain: false,
  }, {
    name: 'Lindsey Heaps',
    position: 'midfielder',
    isCaptain: true,
  }, {
    name: 'Emily Sonnett',
    position: 'defender',
    isCaptain: false,
  }, {
    name: 'Jane Campbell',
    position: 'goalkeeper',
    isCaptain: false,
  } ]
};

teamSpan.innerText = footballTeam.team;
yearSpan.innerText = footballTeam.year;
coachSpan.innerText = footballTeam.headCoach;

function displayPlayers(playersArray) {
  playerCardsDiv.replaceChildren();
  for (const player of playersArray) {
    playerCardsDiv.insertAdjacentHTML("afterbegin",
      `<div class='player-card'>
         <h2>${player.name}</h2>
         <p>Position: ${player.position}</p>
      </div>`);
  }
}

displayPlayers(footballTeam.players);

positionSelect.addEventListener('change', (event) => {
  const position = event.target.value;
  if (position === 'all') {
    displayPlayers(footballTeam.players);
  } else {
  const filteredArray = footballTeam.players.filter((player) => player.position === position);
  displayPlayers(filteredArray);
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

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

2

when you create the player cards you are not showing who is the captian, so the tests don’t recognise the shown elements (the tests for the other two positions don’t fail as there isn’t a captian in those)

2 Likes