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

JavaScript
1

Tell us what’s happening:

tests 11-15 keep failing. I dont know whats wrong exactly because ive been at this for some time now and cant seem to figure out the problem. please help

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// Team object (as your tests already pass)
const footballTeam = {
  team: "Liverpool",
  year: 1892,
  headCoach: "Arne Slot",
  players: [
    { name: "Cody Gakpo", position: "forward", isCaptain: false },
    { name: "Luis Diaz", position: "midfielder", isCaptain: false },
    { name: "Virgil van Dijk", position: "defender", isCaptain: true },
    { name: "Mohamed Salah", position: "goalkeeper", isCaptain: false }
  ]
};

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

// Create a predictable card the tests can query
function createPlayerCard(player) {
  const card = document.createElement("div");
  card.className = "player-card"; // test-friendly class
  card.setAttribute("data-position", player.position); // machine-readable position

  // Use lowercase for position to align with filter values exactly
  card.innerHTML = `
    <h3 class="player-name">${player.name}</h3>
    <p class="player-position">Position: ${player.position}</p>
    <p class="player-captain">Captain: ${player.isCaptain ? "Yes" : "No"}</p>
  `;
  return card;
}

// Render players
function displayPlayers(players) {
  const container = document.getElementById("player-cards");
  container.innerHTML = "";
  players.forEach(p => container.appendChild(createPlayerCard(p)));
}

// Core filter logic
function applyFilter(value) {
  if (value === "all") {
    displayPlayers(footballTeam.players);
    return;
  }
  const filtered = footballTeam.players.filter(p => p.position === value);
  displayPlayers(filtered);
}

// Expose a globally callable filter for tests that set the select value programmatically
window.applyFilter = applyFilter;

// Initialize and wire up the select
const filterSelect = document.getElementById("players");

// Initial render (All Players)
displayPlayers(footballTeam.players);

// Respond to user changes
filterSelect.addEventListener("change", (e) => applyFilter(e.target.value));

// Also respond if tests set the value programmatically without dispatching "change"
filterSelect.addEventListener("input", (e) => applyFilter(e.target.value));

// Safety: if value gets set externally at any time, re-apply
// (Optional but harmless for test harnesses)
const observer = new MutationObserver(() => applyFilter(filterSelect.value));
observer.observe(filterSelect, { attributes: true, attributeFilter: ["value"] });

Your browser information:

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

Challenge Information:

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

2

You have not formatted player cards as instructed in User Story #11.

3

how do i do that? Please help

4

Please talk about what it is you don’t understand in the instructions:

Format like this if the player is not a captain:

<div class="player-card">
  <h2>Sergio Batista</h2>
  <p>Position: midfielder</p>
</div>

Format like this if the player is a captain:

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

How do these examples compare to your code?