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

JavaScript
1

Tell us what’s happening:

Need help checking my code please. I’m not able to pass test 11 and 15.

11. 'When the option All Players is selected, all players should be present within #player-cards'

15.‘When the option Position Goalkeeper is selected, only goalkeeper players should be present.’

[optional] I also need help on how to display (Captain) on a player being a captain

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="style.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: `Barcelona`,
  year: 1992,
  headCoach: `Johan Cruyff`,
  players: [
    // Forwards
    { name: `Hristo Stoichkov`, position: `forward`, isCaptain: false },
    { name: `Michael Laudrup`, position: `forward`, isCaptain: false },
    { name: `Julio Salinas`, position: `forward`, isCaptain: false },

    // Midfielders
    { name: `Pep Guardiola`, position: `midfielder`, isCaptain: false },
    { name: `José Mari Bakero`, position: `midfielder`, isCaptain: false },
    { name: `Eusebio Sacristán`, position: `midfielder`, isCaptain: false },

    // Defenders
    { name: `Ronald Koeman`, position: `defender`, isCaptain: false },
    { name: `Albert Ferrer`, position: `defender`, isCaptain: false },
    { name: `Miguel Ángel Nadal`, position: `defender`, isCaptain: false },

    // Goalkeepers
    { name: `Andoni Zubizarreta`, position: `goalkeeper`, isCaptain: true },
    { name: `Carles Busquets`, position: `goalkeeper`, isCaptain: false },
    { name: `Julen Lopetegui`, position: `goalkeeper`, isCaptain: false },
  ],
};

let team = (document.querySelector(
  `#team`
).textContent = `${footballTeam.team}`);
let year = (document.querySelector(
  `#year`
).textContent = `${footballTeam.year}`);
let headCoach = (document.querySelector(
  `#head-coach`
).textContent = `${footballTeam.headCoach}`);

let playersCard = document.querySelector(`#player-cards`);
let teamArr = footballTeam.players.map((player) => player);
let teamPlayers = footballTeam.players.map((player) => player.name);
let playersPosition = footballTeam.players.map((player) => player.position);
let players = document.querySelector(`#players`);

for (let i = 0; i < teamPlayers.length; i++) {
  let div = document.createElement(`div`);
  div.classList.add(`player-card`);
  div.innerHTML = `<h2>${teamPlayers[i]}</h2>
   <p>Position: ${playersPosition[i]}</p>
  `;
  playersCard.appendChild(div);
}

function filterTeamMates() {
  let playerValue = players.value;
  let playerFilter = teamArr.filter((name) => name.position === playerValue);
  let playerName = playerFilter.map((name) => name.name);
  let position = playerFilter.map((position) => position.position);

  let divDetails = ``;

  if (playerValue === `all`) {
    playersCard.innerHTML = teamArr.map(
      (item) =>
        `<div class="player-card"><h2>${item.name}</h2><p>Position: ${item.position}</p></div> `
    );
  } else {
    for (let i = 0; i < playerName.length; i++) {
      let newdiv = document.createElement(`div`);
      divDetails +=
        newdiv.innerHTML = `<div class="player-card"><h2>${playerName[i]}</h2> <p>Position: ${position[i]}</p></div>`;
    }

    playersCard.innerHTML = divDetails;
  }
}

players.addEventListener(`change`, filterTeamMates);

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

that’s not optional, that’s what you need to do to pass those two tests

make sure you understand where the captain indication should go, try an attempt, and show it to us

3

After 10hrs of trying i was able to solve it . thanks