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

JavaScript
1

Tell us what’s happening:

Not passing tests 12-15, but when I inspect the preview it shows the correct number of .player-card div(s).

Here’s what it looks like when I change the filter to midfielder (there’s only one midfielder):

image
image579×199 11 KB

(Running in Firefox with no extensions)

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 filterDropdown = document.getElementById("players");
const playerCardsDiv = document.getElementById("player-cards");
const teamSpan = document.getElementById("team");
const yearSpan = document.getElementById("year");
const coachSpan = document.getElementById("head-coach");

const footballTeam = {
  team: "Wildcats",
  year: 2006,
  headCoach: "Troy Bolton",
  players: [
    {name: "Sharpay Evans", position: "forward", isCaptain: true},
    {name: "Ryan Evans", position: "midfielder", isCaptain: false},
    {name: "Chad Danforth", position: "defender", isCaptain: false},
    {name: "Gabriella Montez", position: "goalkeeper", isCaptain: false},
    {name: "Gabriella Montez 2", position: "goalkeeper", isCaptain: false}
  ],
};

function createCard (name, position, isCaptain){
  const playerDiv = document.createElement("div");
  playerDiv.setAttribute("class", "player-card");
  
  const nameH2 = document.createElement("h2");
  if (isCaptain) {
    nameH2.innerText = "(Captain) " + name;
  } else {
    nameH2.innerText = name;
  }
  playerDiv.appendChild(nameH2);

  const positionP = document.createElement("p");
  positionP.innerText = "Position: " + position;
  playerDiv.appendChild(positionP);

  playerCardsDiv.appendChild(playerDiv);
}

function getCards (filterOption){
  const playerList = filterOption === "all"
    ? footballTeam.players
    : footballTeam.players.filter(player => player.position === filterOption);
  
  for (const player of playerList){
    createCard(player.name, player.position, player.isCaptain);
  }
}

teamSpan.innerText = footballTeam.team;
yearSpan.innerText = footballTeam.year;
coachSpan.innerText = footballTeam.headCoach;
getCards(filterDropdown.value);

filterDropdown.addEventListener("input", function () {
  playerCardsDiv.innerHTML = "";
  getCards(filterDropdown.value);
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0

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.

1 Like
3

I don’t think input is the right event type to listen for here, maybe there is something more appropriate for a select element?

4

I have made the change :wink: thank you!