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

Curriculum Help
1

Tell us what’s happening:

  1. When the option All Players is selected, all players should be present within #player-cards.
  2. When the option Position Midfielder is selected, only the midfielder players should be present within #player-cards.

Not able to pass these two.
My preview is showing all players as required but it still not passing the test.

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


/* file: script.js */
const footballTeam = {
  team: "Argentina",
  year: 1987,
  headCoach: "Carlos Bilardo",
  players: [
    {name: "Sergio Almirón", position:"forward", isCaptain: false}, {name:"Sergio Batista", position:"midfielder", isCaptain: false},
    {name: "Ricardo Bochini", position: "midfielder", isCaptain: true}, {name: "Claudio Borghi",position: "midfielder", isCaptain: false},
    {name: "José Luis Brown", position: "defender", isCaptain: false}, {name: "Daniel Passarella", position: "defender", isCaptain: false}, {name: "Jorge Burruchaga", position: "forward", isCaptain: false},  {name: "Néstor Clausen", position: "defender", isCaptain: false}, {name: "Luis Islas", position: "goalkeeper", isCaptain: false},  {name: "Oscar Ruggeri", position: "defender", isCaptain: false}
  ]
}

const team = document.getElementById("team");
const year = document.getElementById("year");
const headCoach = document.getElementById("head-coach");
const choosePosition = document.getElementById("players");
const playerCards = document.getElementById("player-cards");
team.textContent = footballTeam.team;
year.textContent = footballTeam.year;
headCoach.textContent = footballTeam.headCoach;

function filterTeammates(position) {
  let playersArr = [];
  let playerHTMLArr = [];
  let abc = footballTeam.players;
  
  abc.forEach(player => {
    if (player.position === position) {
       if (player.isCaptain) {
      player.name = `(Captain) ${player.name}`;
    }
      playersArr.push(player)
    } else if (position === "all") {
      playersArr.push(player);
    }
  })

  playersArr.forEach(player => {
    playerHTMLArr.push(`<div class="player-card">
    <h2>${player.name}</h2>
    <p>Position: ${player.position}</p>
    </div>`);
    playerCards.innerHTML = `${playerHTMLArr.join("")}`
  })
}

choosePosition.addEventListener("change", (e) => filterTeammates(e.target.value));

Your browser information:

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

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-football-team-cards/66e7ee20b79186306fc12da5.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

hello!

here you are changing/mutating the name property of the original player object, but the tests use the original player object’s properties to verify that the rendered information is correct.

try not to change the original player object. it is generally a good practice to not mutate the original arrays or objects in your functions.

one more thing is, when all players are rendered, there is no (Captain) indicator for the captain. please try to fix it.

3

Thanks it worked. I removed that statement there and added it in innerHTML