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

JavaScript
1

Tell us what’s happening:

I am not sure what is going wrong. The names will print in the console but on the actual page there are just empty white box cards, and more of them than there needs to be. I feel like I have tried everything, if someone could help, thanks in advance!

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: "Argentina",
  year: 1986,
  headCoach: "Carlos Bilardo",
  players: [
    { name: "Sergio Almirón",
      position: "forward",
      isCaptain: false
    }, 
    {
      name:"Diego Maradona",
      position: "midfielder",
      isCaptain: true
    }, 
    {
      name: "Luis Islas",
      position: "goalkeeper",
      isCaptain: false
      }, 
      {
        name: "Daniel Passarella",
        position: "defender",
        isCaptain: false
      }]
}
const teamDis = document.getElementById("team")
const yearDis = document.getElementById("year")
const headCoachDis = document.getElementById("head-coach")
const playerCards = document.getElementById("player-cards")
const players = document.getElementById("players")

teamDis.innerText = footballTeam.team;
yearDis.innerText = footballTeam.year;
headCoachDis.innerText = footballTeam.headCoach;
 let filteredPlayers = [];




const showPlayerCards = () => {
const input = players.value
 filteredPlayers = input === "all" ? footballTeam.players :
    footballTeam.players.filter((p) => p.position === input)


  filteredPlayers.forEach((player) => {
    const newDiv = document.createElement("div")
    newDiv.classList.add("player-card")
    
    newDiv.innerHTMl += `
  <h2>${player.isCaptain ? "(Captain)" : ''}</h2>
  <p>Position: ${player.position}${player.name}</p>
 
`  
  playerCards.appendChild(newDiv)
  console.log(filteredPlayers)  
})
} 
showPlayerCards()  
playerCards.addEventListener("change", showPlayerCards())

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 Edg/138.0.0.0

Challenge Information:

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

2

There is a syntax issue here. Do we call the function or do we reference the function?

Also, are you sure this is the element you should be this listening on?

1 Like
3

thank you, I fixed it to players.addEventListener(“change”, () => showPlayerCards()) and it took away the problem of the extra cards that were showing up, but the cards are still blank and not showing anything… is there any issues in my showPlayerCards function, or is it a problem somewhere else?

4

One thing at a time. Here is an example of a simple event listener:

button.addEventListener('click', handleClick);

handleClick is the function that is triggered when the button is clicked.

Do you see how this is different from yours?

5

so from my original code just take away the parenthesis yeah? like this: players.addEventListener(“change”, showPlayerCards)

6

Yes. Now, please add all of the missing semi-colons in your code.

7

K, that didn’t change anything though. Is there anything wrong with the forEach statement or the function?

8

It should have. Please post your updated code.

9 
const footballTeam = {
  team: "Argentina",
  year: 1986,
  headCoach: "Carlos Bilardo",
  players: [
    { name: "Sergio Almirón",
      position: "forward",
      isCaptain: false
    }, 
    {
      name:"Diego Maradona",
      position: "midfielder",
      isCaptain: true
    }, 
    {
      name: "Luis Islas",
      position: "goalkeeper",
      isCaptain: false
      }, 
      {
        name: "Daniel Passarella",
        position: "defender",
        isCaptain: false
      }]
};
const teamDis = document.getElementById("team");
const yearDis = document.getElementById("year");
const headCoachDis = document.getElementById("head-coach");
const playerCards = document.getElementById("player-cards");
const players = document.getElementById("players");

teamDis.innerText = footballTeam.team;
yearDis.innerText = footballTeam.year;
headCoachDis.innerText = footballTeam.headCoach;
 let filteredPlayers = [];




const showPlayerCards = () => {
const input = players.value;
 filteredPlayers = input === "all" ? footballTeam.players :
    footballTeam.players.filter((p) => p.position === input);


  filteredPlayers.forEach((player) => {
    const newDiv = document.createElement("div");
    newDiv.classList.add("player-card");
    
    newDiv.innerHTMl += `
  <h2>${player.isCaptain ? "(Captain)" : ''}</h2>
  <p>Position: ${player.position}${player.name}</p>
 ` 
  playerCards.appendChild(newDiv);
 
});
};
showPlayerCards();
players.addEventListener("change", showPlayerCards);
10

Check this bit. After you fix that, you can easily see what needs to be fixed in your cards.

And you’re missing a semi-colon after the string literal. I’m making a big deal about adding the semi-colons because not adding those can cause some very difficult to find bugs. And it’s a good idea to get in the habit of doing that now while you’re learning.

Introduction to JavaScript - What Is the Role of Semicolons in JavaScript, and Programming in General? | Learn | freeCodeCamp.org

11

I didn’t think that semicolons made that much of a difference. Thank you for pointing that out. Also I have been over that bit of code over and over I can’t believe I missed that lol its fixed now. The text is showing up on the cards like they should.

1 Like