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

JavaScript
1

Tell us what’s happening:

Hello,

My code works when I’m trying but it’s not passing the ‘All Players’ test and I don’t understand why. Any help appreciated. Thanks.

(HTML and CSS unchanged)

Your code so far

/* file: script.js */
// variables

const footballTeam = {
    team: "Bob's Team",
    year: 2021,
    headCoach: "Bob Bobson",
    players: [
        {
            name: "Dave",
            position: "forward",
            isCaptain: true
        },
        {
            name: "Jane",
            position: "midfielder",
            isCaptain: false
        },
        {
            name: "Alan",
            position: "defender",
            isCaptain: false
        },
        {
            name: "Sarah",
            position: "goalkeeper",
            isCaptain: false
        }
    ]
}

const teamEl = document.getElementById("team");
const yearEl = document.getElementById("year");
const headCoachEl = document.getElementById("head-coach");
const playerCardsEl = document.getElementById("player-cards");
const playersDropdown = document.getElementById("players");

// functions

function createPlayerCard(name, position, isCaptain) {
    const newEl = document.createElement("div");
    newEl.classList.add("player-card");
    newEl.innerHTML =
    `<h2>${name} ${isCaptain ? '(captain)' : ''}</h2>
    <p>Position: ${position}</p>`
    return newEl;
}

function showAllPlayers() {
    playerCardsEl.innerHTML = "";
    footballTeam.players.forEach(({ name, position, isCaptain }) => {
        playerCardsEl.appendChild(createPlayerCard(name, position, isCaptain));
    })
}

function filterTeammates(event) {
    const position = event.target.value;
    playerCardsEl.innerHTML = "";
    if (position === "all") {
        showAllPlayers();
    } else {
        const filtered = footballTeam.players.filter((player) => player.position === position);
        filtered.forEach(({ name, position }) => {
            playerCardsEl.appendChild(createPlayerCard(name, position));
        })
    }
}

// operations

teamEl.innerText = footballTeam.team;
yearEl.innerText = footballTeam.year;
headCoachEl.innerText = footballTeam.headCoach;

showAllPlayers();

playersDropdown.addEventListener("change", filterTeammates);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:139.0) Gecko/20100101 Firefox/139.0

Challenge Information:

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

2

try with a capital C

for the other failing test, you are missing the Captain indication completely

1 Like
3

Ah thank you! That fixed it.