Build a Set of Football Team Cards steps 10-15

JavaScript
1 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Football Team Cards</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1 id="team"></h1>
<p id="year"></p>
<p id="head-coach"></p>

<label for="filter">Filter by Position:</label>
<select id="filter">
  <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 id="player-cards"></div>

<script src="script.js"></script>
</body>
</html>

// 1️⃣ Football Team Object
const footballTeam = {
  team: "Dream FC",
  year: 2024,
  headCoach: "Alex Ferguson",
  players: [
    { name: "Lionel Striker", position: "forward", isCaptain: true },
    { name: "Marco Playmaker", position: "midfielder", isCaptain: false },
    { name: "Victor Shield", position: "defender", isCaptain: false },
    { name: "Sam Keeper", position: "goalkeeper", isCaptain: false }
  ]
};

// 2️⃣ Display team info in correct IDs
document.getElementById("team").textContent = footballTeam.team;
document.getElementById("year").textContent = footballTeam.year;
document.getElementById("head-coach").textContent = footballTeam.headCoach;

// 3️⃣ DOM elements
const playerCards = document.getElementById("player-cards");
const filter = document.getElementById("filter");

// 4️⃣ Function to render player cards
function displayPlayers(players) {
  playerCards.innerHTML = "";
  players.forEach(player => {
    const card = document.createElement("div");
    card.className = "player-card";

    const name = document.createElement("h2");
    name.textContent = player.isCaptain ? `(Captain) ${player.name}` : player.name;

    const position = document.createElement("p");
    position.textContent = `Position: ${player.position}`;

    card.appendChild(name);
    card.appendChild(position);
    playerCards.appendChild(card);
  });
}

// 5️⃣ Initial display: all players
displayPlayers(footballTeam.players);

// 6️⃣ Filter players by position
filter.addEventListener("change", () => {
  const value = filter.value;
  const filtered = value === "all"
    ? footballTeam.players
    : footballTeam.players.filter(player => player.position === value);
  displayPlayers(filtered);
});

Hi,

I can´t pass steps 10-15 in the Football Team Cards lab. Any help would be appreciated.

2

are you sure that you can make that update to the HTML? if you change the ids of elements, the tests can’t find certain elements anymore

1 Like
3

Actually there was no need to change the HTML you are right. Thank you that did it.

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.