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

JavaScript
1

Tell us what’s happening:

Failing test of: 12-15
Although the code works as expected and has been verified as bug-free by ChatGPT

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: "Shaolin Soccer",
  year: 1986,
  headCoach: "Robert",
  players: [{
    name: "Sergio Almirón",
    position: "forward",
    isCaptain: false,
  }, {
    name: "Diego Maradona",
    position: "midfielder",
    isCaptain: true,
  }, {
    name: "Mr Pei",
    position: "defender",
    isCaptain: false,
  }, {
    name: "Hanma",
    position: "goalkeeper",
    isCaptain: false,
  }],
}


const teamName = document.getElementById('team');
const year = document.getElementById('year');
const dCoach = document.getElementById('head-coach');
const playerCards = document.getElementById('player-cards');
const selectPlayers = document.getElementById('players');

//display names to dom
teamName.innerText = footballTeam.team;
year.innerText = footballTeam.year;
dCoach.innerText = footballTeam.headCoach;

//extract array from object
const players = footballTeam["players"];


//iterate over array and assign values to the dom nodes
for(let player of players) {
  // create a div node element
  const playerCard = playerCards.appendChild(document.createElement('div'));
  //add class to the node
  playerCard.classList.add('player-card');
  //create h2 and P element node
  const heading = document.createElement('h2');
  const details = document.createElement('p');
  //append to the div node created earlier
  playerCard.append(heading, details);

  //Modify the created dom nodes with the iiterated values from the array of objects
  heading.innerText = `${player.isCaptain? '(Captain)': ""} ${player.name}`;
  details.innerText = `Position: ${player.position}`

  //shows and hides the nodes based on the select element value
  selectPlayers.addEventListener('change', (e)=> {
    if(e.target.value !== player.position && e.target.value !== 'all') {
      playerCard.style.display = 'none';
    } else {
      playerCard.style.display = 'block';
    }
  })
}

Your browser information:

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

Challenge Information:

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

2

GPT doesn’t actually verify if code is bug free or not.

What are tests 12-15? What have you done to manually verify that your code meets those requirements? Which lines do you think meet those requirements?

3

the tests expect the cards to not be on the page at all

4

From a performance perspective, hiding and showing elements using CSS is a good choice.

But it could be argued that the point of the challenge is to do dynamic DOM updating of the actual content, but the requirements do not actually state this. So I’m not sure if we should allow it, but I’m also not sure that it is clear why we do not allow it.

5

honestly, because it’s what the workshop this is based on does
and we have an issue open, but it seems no one had time to look at it

6 
removed by moderator

Okay, got it. This passed the test even with Uncaught NotFoundError: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.

7

My Ideal Approach
removed by moderator

8

Please do not post solution code to the forums