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

JavaScript
1

Tell us what’s happening:

l etape 11 , 12, 13,14,15 ne passe pas voici mon code:
const footballTeam = {
team: “paris”,
year: 2012,
headCoach: “Ensi Flick”,
players: [
{name:“neymar”, position:“forward”, isCaptain: true},
{name:“modric”, position:“midfielder”, isCaptain: false},
{name:“casillas”, position:“goalkeeper”, isCaptain: false},
{name:“ramos”, position:“defender”, isCaptain: false},
],
};
const headCoach = document.getElementById(“head-coach”);
const team = document.getElementById("te

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: "paris",
  year: 2012,
  headCoach: "Ensi Flick",
  players: [
    {name:"neymar", position:"forward", isCaptain: true},
    {name:"modric", position:"midfielder", isCaptain: false},
    {name:"casillas", position:"goalkeeper", isCaptain: false},
    {name:"ramos", position:"defender", isCaptain: false},
    ],
};
const headCoach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");
headCoach.textContent = footballTeam.headCoach;
team.textContent = footballTeam.team;
year.textContent = footballTeam.year;
const playerCard = document.getElementById("player-cards");
playerCard.addEventListener("click", () => {
  if(playerCard.innerText = "All Players"){
    playerCard.innerHTML = footballTeam.players
  } else if(playerCard.innerText = "Position Forward"){
    player.innerHTML = footballTeam.players[0];
  } else if(playerCard.innerText = "Position Midfielder"){
    player.innerHTML = footballTeam.players[1];
  } else if(playerCard.innerText = "Position Defender"){
    player.innerHTML = footballTeam.players[2];
  } else {
    player.innerHTML = footballTeam.players[3];
  }
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

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

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

Hi @whitejr ,

What is playerCard in your HTML? Is that the element that needs to respond to the click event?

Happy coding!

3

Tell us what’s happening:

j ’ ai change mais ca ne passe toujours pas voici mon nouveau code :
const footballTeam = {
team: “paris”,
year: 2012,
headCoach: “Ensi Flick”,
players: [
{name:“neymar”, position:“forward”, isCaptain: true},
{name:“modric”, position:“midfielder”, isCaptain: false},
{name:“casillas”, position:“goalkeeper”, isCaptain: false},
{name:“ramos”, position:“defender”, isCaptain: false},
],
};
const headCoach = document.getElementById(“head-coach”);
const team = document.getE

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: "paris",
  year: 2012,
  headCoach: "Ensi Flick",
  players: [
    {name:"neymar", position:"forward", isCaptain: true},
    {name:"modric", position:"midfielder", isCaptain: false},
    {name:"casillas", position:"goalkeeper", isCaptain: false},
    {name:"ramos", position:"defender", isCaptain: false},
    ],
};
const headCoach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");
headCoach.textContent = footballTeam.headCoach;
team.textContent = footballTeam.team;
year.textContent = footballTeam.year;
const playerCard = document.getElementById("player-cards");
const playerCardinster = document.getElementById("players");
playerCardinster.addEventListener("click", () => {
  if(playerCard.innerText = "All Players"){
    playerCard.innerHTML = footballTeam.players
  } else if(playerCard.innerText = "Position Forward"){
    player.innerHTML = footballTeam.players[0];
  } else if(playerCard.innerText = "Position Midfielder"){
    player.innerHTML = footballTeam.players[1];
  } else if(playerCard.innerText = "Position Defender"){
    player.innerHTML = footballTeam.players[2];
  } else {
    player.innerHTML = footballTeam.players[3];
  }
}) 




;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

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

4

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

5

mon code bloque toujours au meme endroit s il vous plait aide moi

6

Should your dropdown respond as soon as you click on it, or is there another, better event it should respond to?

Also, you are hard coding the players. What if the forward is the object in the 2nd index of your array. Your code should be able to get the player with the specified position regardless of where that player object is in the array.

7

Tell us what’s happening:

mon code ne passe pas le test 11 12 13 14 15 et voici mon code :
const footballTeam = {
team: “paris”,
year:2010,
headCoach: “Ensi Flick”,
players: [
{name:“neymar”, position:“forward”, isCaptain: true},
{name:“modric”, position:“midfielder”, isCaptain: false},
{name:“casillas”, position:“goalkeeper”, isCaptain: false},
{name:“ramos”, position:“defender”, isCaptain: false},
],
};
Object.freeze(footballTeam);
const { players } = footballTeam;
const headCoach = docu

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: "paris",
  year:2010,
  headCoach: "Ensi Flick",
  players: [
    {name:"neymar", position:"forward", isCaptain: true},
    {name:"modric", position:"midfielder", isCaptain: false},
    {name:"casillas", position:"goalkeeper", isCaptain: false},
    {name:"ramos", position:"defender", isCaptain: false},
    ],
};
Object.freeze(footballTeam);
const { players } = footballTeam;
const headCoach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");
headCoach.textContent = footballTeam.headCoach;
team.textContent = footballTeam.team;
year.textContent = footballTeam.year;
const playerCard = document.getElementById("player-cards");
const playerCardinster = document.getElementById("players");
playerCardinster.addEventListener("change", (e) => {
  playerCard.innerHTML = "";
  if(e.target.value === "forward"){
    setPlayerCard(players.filter((player) => player.position = "forward"));
  } else if (e.target.value === "midfielder"){
    setPlayerCard(players.filter((player) => player.position = "midfielder"));
  } else if(e.target.value === "defender"){
    setPlayerCard(players.filter((player) => player.position = "defender"));
  } else {
    setPlayerCard(players.filter((player) => player.position = "goalkeeper"))
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

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

8

Tell us what’s happening:

voici mon code rectifier et il ne passe pas 11 12 13 14 15:
const footballTeam = {
team: “Argentina”,
year:2022,
headCoach: “Lionel Scaloni”,
players: [
{name:“neymar”, position:“forward”, isCaptain: true},
{name:“modric”, position:“midfielder”, isCaptain: false},
{name:“casillas”, position:“goalkeeper”, isCaptain: false},
{name:“ramos”, position:“defender”, isCaptain: false},
],
};
Object.freeze(footballTeam);
const { team, year, headCoach, players } = footballTeam;

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:2022,
  headCoach: "Lionel Scaloni",
  players: [
    {name:"neymar", position:"forward", isCaptain: true},
    {name:"modric", position:"midfielder", isCaptain: false},
    {name:"casillas", position:"goalkeeper", isCaptain: false},
    {name:"ramos", position:"defender", isCaptain: false},
    ],
};
Object.freeze(footballTeam);
const { team, year, headCoach, players } = footballTeam;
const headCoachest = document.getElementById("head-coach");
const teamName = document.getElementById("team");
const yearList = document.getElementById("year");
const playerCards = document.getElementById("player-cards");
const playerCardinster = document.getElementById("players");
headCoachest.textContent = headCoach;
teamName.textContent = team;
yearList.textContent = year;
playerCardinster.addEventListener("change", (e) => {
  playerCards.innerHTML = "";
  if(e.target.value === "forward"){
    setPlayerCards(players.filter((player) => player.position === "forward"));
  } 
  else if (e.target.value === "midfielder"){
    setPlayerCards(players.filter((player) => player.position === "midfielder"));
  } 
  else if(e.target.value === "defender"){
    setPlayerCards(players.filter((player) => player.position === "defender"));
  } 
  else if (e.target.value === "goalkeeper") {
    setPlayerCards(players.filter((player) => player.position === "goalkeeper"))
  } else {
    setPlayerCards();
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

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

9

repondez s il vous plait

10

Tell us what’s happening:

voici mon code rectifier et je bloque toujour sur le test 11 12 13 14 15;
const footballTeam = {
team: “Argentina”,
year:2022,
headCoach: “Lionel Scaloni”,
players: [
{name:“neymar”, position:“forward”, isCaptain: true},
{name:“modric”, position:“midfielder”, isCaptain: false},
{name:“casillas”, position:“goalkeeper”, isCaptain: false},
{name:“ramos”, position:“defender”, isCaptain: false},
],
};
Object.freeze(footballTeam);
const { team, year, headCoach, players } =

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:2022,
  headCoach: "Lionel Scaloni",
  players: [
    {name:"neymar", position:"forward", isCaptain: true},
    {name:"modric", position:"midfielder", isCaptain: false},
    {name:"casillas", position:"goalkeeper", isCaptain: false},
    {name:"ramos", position:"defender", isCaptain: false},
    ],
};
Object.freeze(footballTeam);
const { team, year, headCoach, players } = footballTeam;
const headCoachest = document.getElementById("head-coach");
const teamName = document.getElementById("team");
const yearList = document.getElementById("year");
const playerCards = document.getElementById("player-cards");
const playerCardinster = document.getElementById("players");
headCoachest.textContent = headCoach;
teamName.textContent = team;
yearList.textContent = year;
playerCardinster.addEventListener("change", (e) => {
  playerCards.innerHTML = "";
  if(e.target.value === "forward"){
    setPlayerCards(players.filter((player) => player.position === "forward"));
  } 
  else if (e.target.value === "midfielder"){
    setPlayerCards(players.filter((player) => player.position === "midfielder"));
  } 
  else if(e.target.value === "defender"){
    setPlayerCards(players.filter((player) => player.position === "defender"));
  } 
  else if (e.target.value === "goalkeeper") {
    setPlayerCards(players.filter((player) => player.position === "goalkeeper"))
  } else {
    setPlayerCards();
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

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

1 Like
11

Please do not create duplicate topics for the same challenge/project question(s).

You were asked politely not to create duplicate topics, but you subsequently created not one, but three more duplicate topics! This is unacceptable and you will be silenced if you do it again.

If you need more help then respond back to the original topic you created with your follow up questions and/or your updated code and question.

The duplicate topics have been unlisted.

Thank you.

12

What is this code doing?