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

JavaScript
1

Tell us what’s happening:

Tests 12 - 15 aren’t popping like they should.
Okay, I’ve tested this multiple times now, the code works the way the lab requests it to work. There are no hidden blocks, I nuke them all every time a new option is selected and generate new blocks each time. I’m not sure what else I should be doing. Help?

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: "Tigers",
  year: 2001,
  headCoach: "Jason Moa",
  players: [
    {name:"Mason Jefferson",
    position: "midfielder",
    isCaptain: false
    },
    {name:"Lau Shia",
    position: "defender",
    isCaptain: false
    },
    {name:"Noah Kinderson",
    position: "goalkeeper",
    isCaptain: true
    },
    {name:"Blau Hind",
    position: "forward",
    isCaptain: false
    }
  ]
}
const teamElement = document.getElementById("team");
const headCoachElement = document.getElementById("head-coach");
const yearElement = document.getElementById("year");
const playerSelect = document.getElementById("players")
const playerCardsDiv = document.getElementById("player-cards")

function displayPlayers(obj){
  if(obj.isCaptain){
    console.log("hi")
    const newDiv = document.createElement('div');
    newDiv.classList.add("player-card")
    newDiv.innerHTML = `<h2> (Captain) ${obj.name}</h2>
    <p>Position: ${obj.position}</p>`
    playerCardsDiv.appendChild(newDiv);
  }
  else{
    console.log("working")
    const newDiv = document.createElement('div');
    newDiv.classList.add("player-card")
    newDiv.innerHTML = `<h2> ${obj.name}</h2>
    <p>Position: ${obj.position}</p>`
    playerCardsDiv.appendChild(newDiv);

  }
}
function initialDisplay(obj){
  teamElement.innerText = obj.team;
  headCoachElement.innerText = obj.headCoach;
  yearElement.innerText = obj.year
  obj.players.forEach((player)=>{displayPlayers(player)})
}
window.onload = initialDisplay(footballTeam)

playerSelect.addEventListener("input", ()=>{
  playerCardsDiv.replaceChildren();
  if(playerSelect.value == "all"){
    footballTeam.players.forEach((player)=>{displayPlayers(player)})
  }
  else{
    footballTeam.players.filter((player)=>player.position == playerSelect.value).forEach((player)=>{displayPlayers(player)})
  }
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

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

Welcome back, @checkers,

Is input the best event choice for this listener?

From MDN:
The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key or selecting a value from a list of options.

Happy coding

3

Well, change worked, so in this case, I guess? Not sure why it would matter to the checklist program that determines this though. Still, thank you for the help!