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

JavaScript
1

Tell us what’s happening:

all things are ok. but position here test case has Position’s first letter has uppercase. i also tried .toLowerCase() method

Your code so far

<!-- file: index.html -->


/* file: styles.css */




/* file: script.js */
const footballTeam = {
  team: "FC Barcelona",
  year: 2009,
  headCoach: "Pep Guardiola",
  players: [
    {
      name: "Víctor Valdés",
      position: "goalkeeper",
      isCaptain: false
    },
    {
      name: "Dani Alves",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Carles Puyol",
      position: "defender",
      isCaptain: true
    },
    {
      name: "Gerard Piqué",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Éric Abidal",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Xavi Hernández",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Andrés Iniesta",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Sergio Busquets",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Lionel Messi",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Samuel Eto'o",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Thierry Henry",
      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 playerCards = document.getElementById("player-cards");

const players = document.getElementById("players");

function getFilteredPlayer(value){
  let filteredPlayers = [];

  if(value === "all"){
    filteredPlayers = footballTeam.players;
  }else{
    filteredPlayers = footballTeam.players.filter((player) => player.position === value);
  }
  return filteredPlayers.map(player => `
    <div class="player-card">
      <h2>${player.isCaptain ? "(Captain)" : ""} ${player.name}</h2>
      <p>Position: ${player.position}</p>
    </div>
  `).join("");
}

players.addEventListener("input", ()=>{
  playerCards.innerHTML = getFilteredPlayer(players.value);
})

playerCards.innerHTML = getFilteredPlayer("all");

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

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

double check the event type you are using, is there a more appropriate one that you could use?

1 Like
3

Thanks a lot. It’s passed