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

JavaScript
1

Tell us what’s happening:

  1. When the option All Players is selected, all players should be shown within #player-cards.
  2. When the option Position Goalkeeper is selected, only goalkeeper players should be shown.
    Tests fail but functionallity is there. theres literally no difference between defender midfileder and goalkeeper yet goalkeeper fails. Please help me :sob::sob:

Your code so far

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


/* file: styles.css */


/* file: script.js */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 OPR/119.0.0.0 (Edition std-2)

Challenge Information:

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

2

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>

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

js

const footballTeam = {
  team: "Shits",
  year: 2025,
  headCoach: "Shit Shak",
  players: [
    {
      name: "Quiff",
      position: "goalkeeper",
      isCaptain: true,
    },
    {
      name: "Gorilla",
      position: "defender",
      isCaptain: false,
    },
    {
      name: "Recycle Bin",
      position: "forward",
      isCaptain: false,
    },
    {
      name: "Three Jack",
      position: "midfielder",
      isCaptain: false,
    },
    {
      name: "Biscuit Joe",
      position: "defender",
      isCaptain: false,
    },
    {
      name: "Lamp Shade",
      position: "midfielder",
      isCaptain: false,
    },
    {
      name: "Toilet Mike",
      position: "goalkeeper",
      isCaptain: false,
    },
    {
      name: "Slipper Dan",
      position: "forward",
      isCaptain: false,
    },
    {
      name: "Breadface",
      position: "defender",
      isCaptain: false,
    },
    {
      name: "Mr. Wiggles",
      position: "midfielder",
      isCaptain: false,
    },
  ],
};

const teamSpan = document.querySelector("#team");
const yearSpan = document.querySelector("#year");
const headCoachSpan = document.querySelector("#head-coach");
teamSpan.textContent = footballTeam.team;
yearSpan.textContent = footballTeam.year;
headCoachSpan.textContent = footballTeam.headCoach;
const playerCards = document.querySelector("#player-cards");
const playersSelection = document.querySelector("#players");

playersSelection.addEventListener("change", () =>
  showPlayers(playersSelection.value)
);

function showPlayers(filter) {
  playerCards.innerHTML = "";

  for (const player of footballTeam.players) {
    if (player.position === filter || filter === "all") {
      playerCards.innerHTML += `<div class="player-card">
        <h2>${player.name}</h2>
        <p>Position: ${player.position}</p>
        </div>`;
    }
  }
}
showPlayers("all");
3 
<div class="player-card">
  <h2>(Captain) Diego Maradona</h2>
  <p>Position: midfielder</p>
</div>

Are you handling this when a player is the captain?