Build a Set of Football Team Cards - Build a Set of Football Team Cards: Step 11-15

JavaScript
1

Tell us what’s happening:

Tests #11-15 fail even though the filtering works fine, as far as I can tell. I’m not sure what to do.

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: "The Golden Deer",
  year: 2015,
  headCoach: "Byleth Eisner",
  players: [
    {
      name: "Claude Riegan",
      position: "goalkeeper",
      isCaptain: true
    },
    {
      name: "Lorenz Gloucester",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Raphael Kirsten",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Ignatz Victor",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Lysithea Ordelia",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Marianne Edmund",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Hilda Goneril",
      position: "goalkeeper",
      isCaptain: false
    },
    {
      name: "Leonie Pinelli",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Holst Goneril ",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Balthus Albrecht ",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Erwin Gloucester ",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Jeralt Eisner",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: " Edelgard Hresvelg",
      position: "forward",
      isCaptain: false
    },
    {
      name: "Dimitri Blaiddyd",
      position: "forward",
      isCaptain: false
    }
  ]
}

const coach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");

coach.innerText = footballTeam.headCoach;
team.innerText = footballTeam.team;
year.innerText = footballTeam.year;

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

function makePlayerCards(playersArr){
  playerCards.innerHTML = "";
  for(const player of playersArr){
    let div = document.createElement("div");
    div.setAttribute("class", "player-card");
    if(player.isCaptain === true){
      div.innerHTML = `
      <h2>(Captain) ${player.name}</h2>
      <p>${player.position}</p>
     `
     playerCards.appendChild(div);
    }else{
      div.innerHTML = `
      <h2>${player.name}</h2>
      <p>${player.position}</p>
      `
      playerCards.appendChild(div);
    }
  }
}

const selection = document.getElementById("players")
selection.addEventListener("input", () => {
  let option = selection.value;
  return filterPlayers(option);
  });

function filterPlayers(option){
  if(option === "all"){
    makePlayerCards(footballTeam.players)
  }else{
    let filteredPlayers = footballTeam.players.filter((player) => player.position === option);
    makePlayerCards(filteredPlayers);
  } 
}

window.addEventListener("load",() => makePlayerCards(footballTeam.players))

Your browser information:

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

Challenge Information:

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

2

Welcome to the forum :wave:

You should check this

a p containing Position: and the position of the player.

Although it does not seem to make a difference here.

I’ll need to check some other threads but I think it might have to do with hiding/showing divs instead of fully removing them

EDIT: It’s not that you are doing it correctly:

3

If you use the event “change” instead of “input” it passes the last test.

Seems like some implementation detail like this