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

JavaScript
1

Tell us what’s happening:

Filter works correctly and is correctly displayed on “Preview” for any selection (also has “all players” showing upon first start, as per default selection).
Still, steps 11 and 12 fail , although 13 , 14 and 15 correctly pass, which is odd, since it’s always the same function running.

Your code so far

<!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>


*,
*::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;
  }
}


const footballTeam = {
  team: "a.s. Roma",
  year: 2025,
  headCoach: "Gian Piero Gasperini",
  players: [{
    name:"Mats Hummels",
    position:"defender",
    isCaptain:false
    },
    {
    name:"Zeki Celik",
    position:"defender",
    isCaptain:false
    },
    {
    name:"Stephan El Shaarawy",
    position:"forward",
    isCaptain:true
    },
    {
    name:"Bryan Cristante",
    position:"midfielder",
    isCaptain:false
    },
    {
    name:"Pierluigi Gollini",
    position:"goalkeeper",
    isCaptain:false
    }]
}

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

const teamFilter = document.getElementById("players");
const playerCards = document.getElementById("player-cards")


const playerCard = [];
const playerName = [];
const playerPosition = [];



if (teamFilter.value == "all"){
  for (let i=0; i<footballTeam.players.length; i++){
    playerCard[i] = document.createElement("div");
    playerCard[i].classList.add("player-card");
    playerName[i] = document.createElement("h2"); 
    playerPosition[i] = document.createElement("p");
    playerCards.appendChild(playerCard[i]);
    playerCard[i].appendChild(playerName[i]);
    playerCard[i].appendChild(playerPosition[i]);
    if(footballTeam.players[i].isCaptain) {
      playerName[i].innerText = `(captain) ${footballTeam.players[i].name}`
    }
    else {
      playerName[i].innerText = footballTeam.players[i].name
    }
    playerPosition[i].innerText = `Position: ${footballTeam.players[i].position}`;
  } 
}


teamFilter.addEventListener("change",() => showPlayers(footballTeam,teamFilter.value));


function showPlayers(array,value){
  //check if cards are visible
  if (playerCards.hasChildNodes()){
    const length = document.querySelectorAll(".player-card").length;
    for (let i=0;i<length;i++){
      //clear all cards
      playerCards.removeChild(document.querySelectorAll(".player-card")[0])     
    }      
  };
  if (value == "all"){
    for (let i=0; i<array.players.length; i++){
      playerCard[i] = document.createElement("div");
      playerCard[i].classList.add("player-card");
      playerName[i] = document.createElement("h2"); 
      playerPosition[i] = document.createElement("p");
      playerCards.appendChild(playerCard[i]);
      playerCard[i].appendChild(playerName[i]);
      playerCard[i].appendChild(playerPosition[i]);
      if(array.players[i].isCaptain) {
        playerName[i].innerText = `(captain) ${array.players[i].name}`
      }
      else {
        playerName[i].innerText = array.players[i].name
      }
      playerPosition[i].innerText = `Position: ${array.players[i].position}`;
    } 
  }
  else {
    const filteredPlayers = array.players.filter(player => player.position == value);
    for (let i=0; i<filteredPlayers.length; i++){
      playerCard[i] = document.createElement("div");
      playerCard[i].classList.add("player-card");
      playerName[i] = document.createElement("h2"); 
      playerPosition[i] = document.createElement("p");
      playerCards.appendChild(playerCard[i]);
      playerCard[i].appendChild(playerName[i]);
      playerCard[i].appendChild(playerPosition[i]);
      if(filteredPlayers[i].isCaptain) {
        playerName[i].innerText = `(captain) ${filteredPlayers[i].name}`
      }
      else {
        playerName[i].innerText = filteredPlayers[i].name
      }
      playerPosition[i].innerText = `Position: ${filteredPlayers[i].position}`;
    }
  }
}

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

2

Please carefully review User Story #11 again. Are you implementing that exactly as asked?

1 Like