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

JavaScript
1

Tell us what’s happening:

Cannot pass 11 while others are all good. Need help!!

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
const footballTeam = {
  team: "FC Barcelona",  
  year: 2023,           
  headCoach: "Xavi Hernandez",  
  players: [  
    {
      name: "Lionel Messi",   
      position: "forward",    
      isCaptain: true        
    },
    {
      name: "Sergio Busquets",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "Gerard Piqué",
      position: "defender",
      isCaptain: false
    },
    {
      name: "Marc-André ter Stegen",
      position: "goalkeeper",
      isCaptain: false
    },
      {
      name: "xx1",   
      position: "forward",   
      isCaptain: false        
    },
    {
      name: "xx2",
      position: "midfielder",
      isCaptain: false
    },
    {
      name: "xx3",
      position: "defender",
      isCaptain: false
    },
    {
      name: "xx4",
      position: "goalkeeper",
      isCaptain: false
    }
  ]
};

const team = document.getElementById('team');
const year = document.getElementById('year');
const headCoach = document.getElementById('head-coach');
const playerCards = document.getElementById('player-cards');

team.innerHTML = footballTeam.team;
year.innerHTML = footballTeam.year;
headCoach.innerHTML = footballTeam.headCoach;


playerCards.innerHTML = footballTeam.players.map(player => 
       `<div class="player-card">
      <h2>${player.isCaptain ? `(Captain)` : ""} ${player.name}</h2>
     <p>position: ${player.position}</p>
      </div>`
);

      
const selectBtn = document.getElementById('players');
selectBtn.addEventListener("change", () => {
    let html = [];

    if(selectBtn.value === 'all'){
      html = footballTeam.players.map(player => {
      return `<div class="player-card">
      <h2>${player.isCaptain ? `(Captain)` : ""} ${player.name}</h2>
     <p>position: ${player.position}</p>
      </div>`}
);
    }else{

    footballTeam.players
  .filter(player => player.position === selectBtn.value)
  .forEach(player => {
    html.push(`
      <div class="player-card">
        <h2>${player.isCaptain ? '(Captain) ' : ''}${player.name}</h2>
        <p>Position: ${player.position}</p>
      </div>
    `);
  });

    }

  playerCards.innerHTML = html.join("");

});

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
https://www.freecodecamp.org/learn/full-stack-developer/lab-football-team-cards/lab-football-team-cards

2

Never mind, I figured it out. :laughing:
It’s the word “position” that was not all capitalized.

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.