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

JavaScript
1

Tell us what’s happening:

When I select a different position, the card display toggle is normal, but the console prompts that the card display is not correct

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: "FC Barcelona",
  year: 2025,
  headCoach: "Hansi Flick",
  players: [
    { 
      name: "Marc-André ter Stegen",
      position: "goalkeeper", 
      isCaptain: false 
    },
    { 
      name: "Ronald Araújo", 
      position: "defender", 
      isCaptain: false 
    },
    { 
      name: "Jules Koundé", 
      position: "defender", 
      isCaptain: false 
    },
    { 
      name: "Andreas Christensen", 
      position: "defender", 
      isCaptain: false 
    },
    { 
      name: "Alejandro Balde", 
      position: "defender", 
      isCaptain: false 
    },
    { 
      name: "Pedri", 
      position: "midfielder", 
      isCaptain: false 
    },
    { 
      name: "Frenkie de Jong", 
      position: "midfielder", 
      isCaptain: true 
    },
    { 
      name: "Gavi", 
      position: "midfielder", 
      isCaptain: false 
    },
    { 
      name: "Lamine Yamal", 
      position: "forward", 
      isCaptain: false 
    },
    { 
      name: "Robert Lewandowski", 
      position: "forward", 
      isCaptain: false 
    },
    { 
      name: "Raphinha", 
      position: "forward", 
      isCaptain: false 
    }
  ]
}

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

const cards = document.querySelector('#player-cards');
const cardList = [];

function createCard(player){
  const card = document.createElement('div');
  card.className = 'player-card';
  card.innerHTML = player.isCaptain ? `<h2>(captain) ${player.name}</h2><p>position: ${player.position}</p>` : `<h2>${player.name}</h2><p>position: ${player.position}</p>`;
  cardList.push([player.position, card]);
  cards.appendChild(card);
}

footballTeam.players.forEach((player) => createCard(player)); 

const select = document.getElementById('players');

function changeCard(position){
  if (position === 'all'){
    cards.innerHTML = '';
    cardList.forEach((card) => cards.appendChild(card[1]));
  } else {
    cards.innerHTML = '';
    cardList.forEach((card) => {
      if (card[0] === position)
      cards.appendChild(card[1]);
    });
  }
}

select.addEventListener('change', () => changeCard(select.value));

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 Edg/139.0.0.0

Challenge Information:

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

https://www.freecodecamp.org/learn/full-stack-developer/lab-football-team-cards/lab-football-team-cards

2
  • did you include that snippet along with your shared code here?

happy coding :slight_smile:

3

yes, this just a error, my coding can run, I also can.

4

look at the instructions, make sure you are creating the cards in the right way

5

I know why it’s wrong, because when I wrote innerHTML, there were two words in the template string that were not capitalized