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

JavaScript
1

Tell us what’s happening:

the code is not working here even after trying other methods

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: 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: "Dream United",
  year: 2025,
  headCoach: "Jordan Smith",
  players: [
    { name: "Liam Harper", position: "forward", isCaptain: false },
    { name: "Noah Blake", position: "midfielder", isCaptain: true },
    { name: "Ethan Wells", position: "defender", isCaptain: false },
    { name: "Lucas Shaw", position: "goalkeeper", isCaptain: false }
  ]
};

// Insert coach, team, year
document.getElementById("team").textContent = footballTeam.team;
document.getElementById("year").textContent = footballTeam.year;
document.getElementById("head-coach").textContent = footballTeam.headCoach;

// Select DOM elements
const playerCards = document.getElementById("player-cards");
const playerSelect = document.getElementById("players");

// Render players
function displayPlayers(filter) {
  playerCards.innerHTML = "";

  const filteredPlayers = footballTeam.players.filter(player => {
    return filter === "all" || player.position === filter;
  });

  filteredPlayers.forEach(player => {
    const card = document.createElement("div");
    card.className = "player-card";
    card.innerHTML = `
      <h3>${player.name}</h3>
      <p>Position: ${player.position}</p>
      <p>${player.isCaptain ? "Captain" : ""}</p>
    `;
    playerCards.appendChild(card);
  });
}

// Initial load
displayPlayers("all");

// Change event listener
playerSelect.addEventListener("change", function () {
  displayPlayers(this.value);
});

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

How are your player cards created compared to how the instructions asked you to create the cards?

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