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

JavaScript
1

Tell us what’s happening:

Tests 12-15 are failing, and I am unsure why. I am removing the elements in full when the select is changed, and not just hiding players.

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

Challenge Information:

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

2

Hi @saxologist and welcome to our community!

It looks like your code was too long to be ported over automatically when your post was created. Please edit your post to include your full code. Simply paste your code between the triple sets of backticks (```), where indicated.

3

Hello! Thank you for letting me know, here is my code:
JS:

const footballTeam = {
  team: "YSU Penguins",
  year: 2016,
  headCoach: "Jim Umble",
  players: [
    {
      name: "Marty McFly",
      position: "forward",
      isCaptain: false
    },
          {
      name: "Danial Jackson",
      position: "forward",
      isCaptain: true
    },
      {
      name: "Sheldon Cooper",
      position: "midfielder",
      isCaptain: false
    },
      {
      name: "Spencer Reed",
      position: "defender",
      isCaptain: false
    },

      {
      name: "Luke Skywalker",
      position: "goalkeeper",
      isCaptain: false
    }
  ]
}

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

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

const dropdown = document.getElementById("players");

coachEl.textContent = footballTeam.headCoach;
yearEl.textContent = footballTeam.year;

teamEl.textContent = footballTeam.team;

function displayPlayers(arrPlayers) {

  arrPlayers.forEach((player) => {
    var playerDiv = document.createElement('div');
    var playerName = document.createElement('h2');
    var playerPos = document.createElement('p');


    if(player.isCaptain) {
      playerName.textContent = `(Captain) ${player.name}`;
    } else {
      playerName.textContent = player.name;

    }

  playerPos.textContent = `Position: ${player.position}`;
    playerDiv.setAttribute('class', 'player-card');
    playerDiv.appendChild(playerName);
    playerDiv.appendChild(playerPos);


  playersEl.appendChild(playerDiv);
  });
}

displayPlayers(footballTeam.players);
// dropdown.options[0].selected = true;

dropdown.addEventListener( "click", () => {
  resetPlayers();
  
  var selectedOption = dropdown.value;

  if(selectedOption === 'all') {
    displayPlayers(footballTeam.players);
  } else {
    displayPlayers(footballTeam.players.filter((player) => {

      return player.position === dropdown.value;
    }));
  }


}

);

function resetPlayers() {
  playersEl.replaceChildren();
}

HTML (Unchanged):

<!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 (Unchanged):

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

Thank you!

4

consider for which event you are listening to on your dropdown, is that the best one? could you use a different more appropriate one?