Build a Set of Football Team Cards

JavaScript
1

Tell us what’s happening:

I dont know why test 12, 13, 14 and 15 cant be passed, the code works perfectly but the tests are not passing, what could be the potential problem?

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 class="player-card">
          <h2>(Captain) Sergio Almirón</h2>
          <p>Position: forward</p>
        </div>

        <div class="player-card">
          <h2>Jorge Burruchaga</h2>
          <p>Position: forward</p>
        </div>

        <div class="player-card">
          <h2>Ricardo Bochini</h2>
          <p>Position: midfielder</p>
        </div>

        <div class="player-card">
          <h2>Claudio Borghi</h2>
          <p>Position: midfielder</p>
        </div>

        <div class="player-card">
          <h2>José Luis Brown</h2>
          <p>Position: defender</p>
        </div>

        <div class="player-card">
          <h2>Néstor Clausen</h2>
          <p>Position: defender</p>
        </div>

        <div class="player-card">
          <h2>Héctor Zelada</h2>
          <p>Position: goalkeeper</p>
        </div>

        <div class="player-card">
          <h2>Nery Pumpido</h2>
          <p>Position: goalkeeper</p>
        </div>
      </div>
    </main>
    <footer>&copy; freeCodeCamp</footer>
    <script src="./script.js"></script>
  </body>
</html>


/* file: styles.css */


/* file: script.js */
let footballTeam = {
  team: 'Argentina',
  year: 1986,
  headCoach: 'Carlos Bilardo',
  players: 
[{
  name: 'Sergio Almirón',
  position: 'forward',
  isCaptain: true
},
{
  name: 'Jorge Burruchaga',
  position: 'forward',
  isCaptain: false
},
{
  name: 'Ricardo Bochini',
  position: "midfielder",
  isCaptain: false
},
{
  name: 'Claudio Borghi',
  position: "midfielder",
  isCaptain: false
},
{
  name: 'José Luis Brown',
  position: "defender",
  isCaptain: false
},
{
  name: 'Néstor Clausen',
  position: "defender",
  isCaptain: false
},
{
  name: 'Héctor Zelada',
  position: "goalkeeper",
  isCaptain: false
},
{
  name: 'Nery Pumpido',
  position: "goalkeeper",
  isCaptain: false
}]
}; 

let coachEl = document.getElementById('head-coach');
let teamEl = document.getElementById('team');
let yearEl = document.getElementById('year');

coachEl.innerHTML = footballTeam.headCoach;
teamEl.innerHTML = footballTeam.team;
yearEl.innerHTML = footballTeam.year;

let dropdown = document.getElementById('players');
dropdown.addEventListener('change', () => {
  let selected = dropdown.value;
  let allPlayerCards = document.querySelectorAll('.player-card');

  allPlayerCards.forEach(card => {
   let currentCardP = card.querySelector('p');
   let cardPCont = currentCardP.textContent;
   let pos = cardPCont.split(':')[1].trim();

   if(selected == 'all' || selected == pos){
     card.style.display = 'block';
   } else {
     card.style.display = 'none'
   }
  });
})

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

Please re-read User Story #12.

When the dropdown menu is used to select one of the positions, only the .player-card elements for players of that position should be present.

In other words, the tests will not be expecting you to simply hide the cards that were not selected.

3

so, you mean i need to delete them from .player-card (from HTML file)?

4

Yes. Currently, you have each .player-card hard coded in your HTML inside the #player-cards div. Can you think of a way you can generate those cards dynamically in your JavaScript so that each time a new position is selected only cards for players in that position are added to #player-cards?

1 Like