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

JavaScript
21

Show where in your code you are attempting to debug that error.

22

I’ve logged everything into the console and it’s all got a value. I’ve logged the function in with all the option values and that was fine too. I don’t know how else to debug?

23

Show your code, please.

24 
const footballTeam = {
  team: "Barcelona",
  year: 1999,
  headCoach: "Louis van Gaal",
  players: [
    {
    name: "Rivaldo",
    position: "forward",
    isCaptain: false
  },
  {
    name: "Pep Guardiola",
    position: "midfielder",
    isCaptain: true
  },
  {
    name: "Sonny Anderson",
    position: "forward",
    isCaptain: false
  },
  {
    name: "Frank de Boer",
    position: "defender",
    isCaptain: false
  }
  ]
};

const options = document.querySelector(".options-label");

const players = document.getElementById("players")

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

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

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

console.log(playerCards);
console.log(players);
console.log(headCoach);
console.log(team);
console.log(year)
console.log(playerCards);


year.innerText = footballTeam.year;
team.innerText = footballTeam.team;
headCoach.innerText = footballTeam.headCoach;

console.log(year);
console.log(team);
console.log(headCoach);


const playersArr = footballTeam.players;

console.log(playersArr);


function showCards(playerPosition) {
  const players =
    playerPosition === "all"
      ? playersArr
      : playersArr.filter(
          ({ position }) => position === playerPosition
        );

  return players
    .map(({ name, position }) => {
      return "<div class=\"player-card\"><h1>" + 
name + "</h1><p>"+ position + "</p></div>" ;
    })
}


playerCards.innerHTML = showCards("all");

players.addEventListener("change", () => {
  playerCards.innerHTML = showCards(players.value);
});

console.log("headCoach element:", document.getElementById("head-coach"));
console.log("team element:", document.getElementById("team"));  
console.log("year element:", document.getElementById("year"));
console.log("players element:", document.getElementById("players"));
console.log("playerCards element:", document.getElementById("player-cards"));
console.log(showCards("all"));
console.log(showCards("defender"));
console.log(showCards("midfielder"));
console.log(showCards("defender"));
console.log(showCards("goalkeeper"));
25

what about the captain?

26

Added code for isCaptain:

const footballTeam = {
  team: "Barcelona",
  year: 1999,
  headCoach: "Louis van Gaal",
  players: [
    {
    name: "Rivaldo",
    position: "forward",
    isCaptain: false
  },
  {
    name: "Pep Guardiola",
    position: "midfielder",
    isCaptain: true
  },
  {
    name: "Sonny Anderson",
    position: "forward",
    isCaptain: false
  },
  {
    name: "Frank de Boer",
    position: "defender",
    isCaptain: false
  }
  ]
};

const options = document.querySelector(".options-label");

const players = document.getElementById("players")

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

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

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

console.log(playerCards);
console.log(players);
console.log(headCoach);
console.log(team);
console.log(year)
console.log(playerCards);


year.innerText = footballTeam.year;
team.innerText = footballTeam.team;
headCoach.innerText = footballTeam.headCoach;

console.log(year);
console.log(team);
console.log(headCoach);


const playersArr = footballTeam.players;

console.log(playersArr);


function showCards(playerPosition) {
  const players =
    playerPosition === "all"
      ? playersArr
      : playersArr.filter(
          ({ position }) => position === playerPosition
        );

  return players
    .map(({ name, position, isCaptain }) => {
      const captainPrefix = isCaptain ? "Captain " : "";
      return `<div class="player-card"><h1>${captainPrefix}${name}</h1><p>${position}</p></div>`;
    })
}


playerCards.innerHTML = showCards("all");

players.addEventListener("change", () => {
  playerCards.innerHTML = showCards(players.value);
});

console.log("headCoach element:", document.getElementById("head-coach"));
console.log("team element:", document.getElementById("team"));  
console.log("year element:", document.getElementById("year"));
console.log("players element:", document.getElementById("players"));
console.log("playerCards element:", document.getElementById("player-cards"));
console.log(showCards("all"));
console.log(showCards("defender"));
console.log(showCards("midfielder"));
console.log(showCards("defender"));
console.log(showCards("goalkeeper"));

still not passing :weary_face:

27

Noticed the hints changed!!! I’ve finally passed following those. Thankyou I was losing my mind :folded_hands: :sweat_smile: