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

JavaScript
1

Tell us what’s happening:

Can you teach me with the 11-15 challenge
I can’t solve it const playersFilter = document.getElementById(“players”);
const playerCardsContainer = document.getElementById(“player-cards”);

playersFilter.addEventListener(“change”, function () {
console.log(“Dropdown changed:”, this.value);
const selectedValue = this.value;
let filteredPlayers = ;

if (selectedValue === "all") {
  filteredPlayers = footballTeam.players; 
} else {
  filteredPlayers = footballTeam.p

Your code so far

<!-- file: index.html -->
<!-- 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="player">
        <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 footballTeam = {
    team: "Italy",
    year: 2010,
    headCoach: "Luciano Spalletti",
    players: [
        { name: "Gianluigi Buffon", position: "goalkeeper", isCaptain: true },
        { name: "Giorgio Chiellini", position: "defender", isCaptain: false },
        { name: "Andrea Pirlo", position: "midfielder", isCaptain: false },
        { name: "Alessandro Del Piero", position: "forward", isCaptain: false }
    ]
};

// Display basic team info
const teamElement = document.getElementById("team");
const yearElement = document.getElementById("year");
const headCoachElement = document.getElementById("head-coach");

teamElement.textContent = footballTeam.team;
yearElement.textContent = footballTeam.year;
headCoachElement.textContent = footballTeam.headCoach;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

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

2

I have tried with this but doesn’t work

 const playersFilter = document.getElementById("players");
  const playerCardsContainer = document.getElementById("player-cards");

  playersFilter.addEventListener("change", function () {
    console.log("Dropdown changed:", this.value);
    const selectedValue = this.value;
    let filteredPlayers = [];

    if (selectedValue === "all") {
      filteredPlayers = footballTeam.players; 
    } else {
      filteredPlayers = footballTeam.players.filter(
        (player) => player.position === selectedValue
      );
    }

    console.log("Filtered players:", filteredPlayers);

    playerCardsContainer.innerHTML = "";

    filteredPlayers.forEach((player) => {
      const playerCard = generatePlayerCard(player);
      playerCardsContainer.innerHTML += playerCard;
    });
  });

  function generatePlayerCard(player) {
    return `
      <div class="player-card">
        <h2>${player.name}</h2>
        <p>Position: ${player.position}</p>
        <p>Captain: ${player.isCaptain ? "Yes" : "No"}</p>
      </div>
    `;
  }
3

please reread how you have to signal that a player is captain, this is not the way

4

Captain: ${player.isCaptain ? “Captain” : "No"}

5

Please read again the instructions, this is not what you are asked to do

6

I don’t get that 11th line can you explain me

7

ou should display the players data on the page inside the #player-cards element, each player should be displayed in a div with class of player-card, and nested in it, an h2 containing the name of the player, and (Captain) in case of the player being captain, and a p containing Position: and the position of the player.

<div class="player-card">
  <h2>Sergio Batista</h2>
  <p>Position: midfielder</p>
</div>
<div class="player-card">
  <h2>(Captain) Diego Maradona</h2>
  <p>Position: midfielder</p>
</div>
8

and are you doing that or are you donig something different?

9

??
what are you saying

10

yeah this one i am been doing

11

You are not doing that

how is this

the same as this?

12

intead of Yes we need to input (Captain)

13

you need to follow the instructions, yes

14

I done it aren;t you saying like this I don’t know what you were saying but little bit i got you point of reading instruction

const footballTeam = {
    team: "Italy",
    year: 2010,
    headCoach: "Luciano Spalletti",
    players: [
      { name: "Gianluigi Buffon", position: "goalkeeper", isCaptain: true },
      { name: "Giorgio Chiellini", position: "defender", isCaptain: false },
      { name: "Andrea Pirlo", position: "midfielder", isCaptain: false },
      { name: "Alessandro Del Piero", position: "forward", isCaptain: false }
    ]
  };
  const teamElement = document.getElementById("team");
  const yearElement = document.getElementById("year");
  const headCoachElement = document.getElementById("head-coach");

  teamElement.textContent = footballTeam.team;
  yearElement.textContent = footballTeam.year;
  headCoachElement.textContent = footballTeam.headCoach;

  
  
  const playersFilter = document.getElementById("players");
  const playerCardsContainer = document.getElementById("player-cards");

  playersFilter.addEventListener("change", function () {
    const selectedValue = this.value;
    let filteredPlayers = [];
    if (selectedValue === "all") {
      filteredPlayers = footballTeam.players; 
    } else {
      filteredPlayers = footballTeam.players.filter(
        (player) => player.position === selectedValue
      );
    }
    playerCardsContainer.innerHTML = "";

    filteredPlayers.forEach((player) => {
      const playerCard = generatePlayerCard(player);
      playerCardsContainer.innerHTML += playerCard;
    });
  });
  function generatePlayerCard(player) {
return `
  <div class="player-card">
    <h2>${player.isCaptain ? '(Captain) ' : ''}${player.name}</h2>
    <p>Position: ${player.position}</p>
  </div>
`;
}
15

do you need more help?