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

JavaScript
1

Tell us what’s happening:

stuck with test 11 to 15 in football team stats problem. no error and working well . 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 */
let footballTeam={team:"brazil",year:2026,headCoach:"ancelloti",players:[{name:"neymar",position:"forward",isCaptain:true},{name:"raphino",
position:"midfielder",isCaptain:false},
{name:"vinicious",position:"midfielder",isCaptain:false},{name:"martino",position:"defender",isCaptain:false},{name:"Allison Becker",position:"goalkeeper",isCaptain:false}
]}
let selected;
let team=document.getElementById("team");
team.innerText=footballTeam.team;
let teamYear=document.getElementById("year");
teamYear.innerText=footballTeam.year;
let teamCoach=document.getElementById("head-coach");
teamCoach.innerText=footballTeam.headCoach;


let playerCards=document.getElementById("player-cards");

let select = document.getElementById("players");

selected = select.value;
function showPlayers() {
  playerCards.innerHTML = ""; // clear old cards

  let playerToShow = footballTeam.players.filter((player) => {
    if (selected === "all") return true;
    return player.position === selected;
  });

  playerToShow.forEach((player) => {
    let playerCard = document.createElement("div");
    playerCard.setAttribute("class", "player-card");

    let playerName = document.createElement("h3");
    playerName.innerText = player.isCaptain
      ? `(Captain) ${player.name}`
      : player.name;

    let playerPosition = document.createElement("p");
    playerPosition.innerText = `Position: ${player.position}`;

    playerCard.appendChild(playerName);
    playerCard.appendChild(playerPosition);
    playerCards.appendChild(playerCard);
  });
}

// initial load
showPlayers();

// update when dropdown changes
select.addEventListener("change", () => {
  selected = select.value;   // update global variable
  console.log("Now selected:", selected);
  showPlayers();             // refresh cards
});

Your browser information:

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

Challenge Information:

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

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

3

I have the same question.

4

Then I would give you the same answer.

However, you will need to open your own thread

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.