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

JavaScript
1

Tell us what’s happening:

can anyone help me debug my code i dont know how to fix it on my own

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: script.js */
document.addEventListener("DOMContentLoaded", function () {
  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 () {
    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>
    `;
  }
});

/* 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;
  }
}

Your browser information:

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

Challenge Information:

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

2

Can you talk about what you’ve tried so far and how you’re stuck?

1 Like
3

so i tried to fill the requirement needed but some of the test are failing dont know qhy i tried debugging checking the function by putting console.log but still from step 11 nothing works

4

What happened when you tried this?

5

Remove the DOMContentLoaded event listener to avoid creating a scope where the tests can’t get to the variables.

The requirement for the Captain title on the card is:

  1. It should just be the text “Captain” not “Captain: yes/no” on all the cards.
  2. It must be inside an h2 element and if you look at the demo project you can see it has it as part of the name h2. I would replicate doing it the same way in your code.

BTW, the "change" event won’t fire when you select the first option. You can force load all players on the first run, or create an initial selected and disabled option element that will force a change to happen.

1 Like