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

JavaScript
1

Tell us what’s happening:

I dont know what is happing I have tried everything I can think of

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: script.js */

const footballTeam = {
  
  team: "Argentina",            
  year: 1986,                   
  headCoach: "Carlos Bilardo",  
  players: [                     
    {
      name: "Diego Maradona",
      position: "midfielder",
      isCaptain: true
    },
    {
      name: "Jorge Valdano",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Oscar Ruggeri",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Nery Pumpido",
      position: "goalkeeper",
      isCaptain: false
    }
  ]
};


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


const playerCardsContainer = document.getElementById("player-cards");

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

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

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

  
  cardDiv.appendChild(nameHeading);
  cardDiv.appendChild(positionPara);

  
  playerCardsContainer.appendChild(cardDiv);
});


const filterEl = document.getElementById("players");
filterEl.addEventListener("change", () => {
  const selectedValue = filterEl.value.toLowerCase();  
  const allCards = document.querySelectorAll(".player-card");
  
  allCards.forEach(card => {
    const positionText = card.querySelector("p").textContent;
    
    const cardPosition = positionText.replace("Position: ", "").toLowerCase().trim();
    
    if (selectedValue === "all") {
      card.style.display = "block";
    } else if (cardPosition === selectedValue) {
      card.style.display = "block";
    } else {
      card.style.display = "none";
    }
  });
});

/* 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;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

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

2

Hi @aiden.pattison27!
Could you give me more details? Which step are you having troubles with?

3

steps 12- 15 are give me a headache

4

Can you try to say specifically how you got stuck debugging? All I can recommend right now is some aspirin.

2 Likes
5

It’s funny. I looked at his code, and it seems like the program is working exactly like the example. The only difference is how many cards there are. It should pass.

6

Its failing, so something is wrong.

7

Ya I fell it should 2 but is not working and here is the specific steps * 12. When the option Position Forward is selected, only forward players should be shown within #player-cards.

  • Failed:13. When the option Position Midfielder is selected, only midfielder players should be shown within #player-cards.

  • Failed:14. When the option Position Defender is selected, only defender players should be shown within #player-cards.

  • Failed:15. When the option Position Goalkeeper is selected, only goalkeeper players should be shown.

8

We can read which tests are failing. Please talk about how you are stuck debugging instead of just saying what tests are failing and expecting us to fix your code for you.

9

That is the thing I pretty sure it spouse to be working I have been trying and trying but I keep getting the same stupid fails so I even tried asking my friend who is a certified coder and he told me It looks fine to him

10

Ok, but can you talk about how specifically you have been trying to debug this? Other than just looking at it and having someone else look at it? Have you tested the functionality? If so, how?

When the dropdown menu is used to select one of the positions, only players of that position should be shown. If the "All Players" option is selected, then all of the players should display on the page.

This means that only the selected players should have HTML elements, and none of the non-selected players should have HTML elements present.

11

just did to no avail

12

You just did what?

13

what is your code that removes the elements with the unwanted positions instead of hiding them?

2 Likes
14

Nvm got it working now