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

JavaScript
1

Tell us what’s happening:

I didn’t pass 11 and 14 which is “All” filter and “defender” filter, other position pass just fine and it work as intended when I try change it in select including the All and defender

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/145.0.0.0 Safari/537.36

Challenge Information:

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

2

It probably something to do with Captain since he is in defender position but that as far as my intuition go

3

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

I can’t edit the post message and I don’t know why so I sent all the code here, HTML and CSS are come with the Lab and I didn’t edit anything in it, I only do the Javascript

```
<!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>

```

```
*,
*::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;
  }
}

```

```
const footballTeam = {
  team: "FC Barcelona",
  year: 2009,
  headCoach: "Pep Guardiola",
  players: [
    {
      name: "Víctor Valdés",
      position: "goalkeeper",
      isCaptain: false
    },
    {
      name: "Dani Alves",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Carles Puyol",
      position: "defender",
      isCaptain: true
    },
    {
      name: "Gerard Piqué",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Eric Abidal",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Sergio Busquets",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Xavi Hernández",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Andrés Iniesta",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Lionel Messi",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Samuel Eto'o",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Thierry Henry",
      position: "forward",
      isCaptain: false
    }
  ]
}

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

const playersArr = footballTeam.players;

playersArr.forEach(player => {
  if (player.isCaptain == true) {
    player.name = `(Captain) ` + player.name;
  }});

function makeHtmlList(role) {
  let playersList = role == "all" 
  ? playersArr : playersArr.filter(player => player.position == role);

  console.log(playersList)

  return playersList.map(({ name, position }) => 
  `<div class="player-card">
  <h2>${name}</h2>
  <p>Position: ${position}</p>
</div>`).join("");
}

const role = document.getElementById("players");
const cardsList = document.getElementById("player-cards");

cardsList.innerHTML = makeHtmlList("all");

role.addEventListener("change", () => cardsList.innerHTML = makeHtmlList(role.value));
```
5

you are adding this to the playersArr, do you think that is a good move?

6

got it, I move the adding (Captain) process from outside to inside makeHtmlList( ) function in the .map() thingy and it work now, Thanks