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

JavaScript
1

Tell us what’s happening:

I’ve been coding on VSCode and testing it on Live Server, and the position selection works fine. I’ve been trying to fix it for a long time, but I’ve run out of ideas. Could you give me some advice on how to pass the part I’m missing? Thanks!

Failed:12. When the option Position Forward is selected, only forward players should be present within #player-cards.
Failed:13. When the option Position Midfielder is selected, only midfielder players should be present within #player-cards.
Failed:14. When the option Position Defender is selected, only defender players should be present within #player-cards.
Failed:15. When the option Position Goalkeeper is selected, only goalkeeper players should be present.

Your code so far

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


/* file: styles.css */


/* file: script.js */
const footballTeam = {
    team: "Argentina",
    year: 1986,
    headCoach: "Carlos Bilardo",
    players: [{
        name: "Sergio Almirón",
        position: "forward",
        isCaptain: false,
    },
    {
        name: "Sergio Batista",
        position: "midfielder",
        isCaptain: false,
    },
    {
        name: "Diego Maradona",
        position: "midfielder",
        isCaptain: true,
    }
    ,
    {
        name: "Ricardo Bochini",
        position: "midfielder",
        isCaptain: false,
    },
    {
        name: "Daniel Passarella",
        position: "defender",
        isCaptain: false,
    },
    {
        name: "Jorge Burruchaga",
        position: "forward",
        isCaptain: false,
    },
    {
        name: "José Luis Cuciuffo",
        position: "defender",
        isCaptain: false,
    },
    {
        name: "Héctor Zelada",
        position: "goalkeeper",
        isCaptain: false,
    }
    ]
}

let headCoach = document.getElementById("head-coach");
headCoach.innerHTML = footballTeam.headCoach;

let team = document.getElementById("team");
team.innerHTML = footballTeam.team;

let year = document.getElementById("year");
year.innerHTML = footballTeam.year;

footballTeam.players.forEach(player => {
    const card = document.createElement("div");
    card.classList.add("player-card");

    const nameEl = document.createElement("h2");
    nameEl.innerText = player.isCaptain ? "(Captain)" + player.name : player.name;

    const positionEl = document.createElement("p");
    positionEl.innerText = "Position: " + player.position;

    card.appendChild(nameEl);
    card.appendChild(positionEl);

    document.getElementById("player-cards").appendChild(card);
})

const positionDropdown = document.getElementById("players");

positionDropdown.addEventListener("change", (event) => {
    const selected = event.target.value;

    const cards = document.querySelectorAll(".player-card");

    cards.forEach(card => {
        const position = card.querySelector("p").innerText.split(':')[1].trim().toLowerCase();

        if (selected.toLowerCase() === "all" || position === selected.toLowerCase()) {
            card.style.display = "block";
        } else {
            card.style.display = "none";
        }
    })
})

Your browser information:

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

Challenge Information:

Build a Set of Football Team Cards - Build a Set of Football Team Cards
https://www.freecodecamp.org/learn/full-stack-developer/lab-football-team-cards/lab-football-team-cards

2

the elements are still present, you are only hiding them, the tests ask for only the cards for the selected players to be present

3

omgg tysmmmmmmmmmmmmmmmmmm!