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

JavaScript
1

Tell us what’s happening:

I am facing issue in using removeChild, till now my program is working well but I am facing issue to remove childElements from previous condition.
Either I face a logical error or scope error, please guide me.

Your code so far

<!-- file: index.html -->


/* file: script.js */
const footballTeam = {
  team: "Champs",
  year: 2002,
  headCoach: "Bill",
  players: [
{
  name: "Aakash",
  position: "forward",
  isCaptain: true
},
{
  name: "Ronaldo",
  position: "midfielder",
  isCaptain: false
},
{
  name: "Messi",
  position: "defender",
  isCaptain: false
},
{
  name: "Neymar",
  position: "goalkeeper",
  isCaptain: false
}
]
};

let team = document.querySelector('#team');
let year = document.querySelector('#year');
let headCoach = document.querySelector('#head-coach');
let cards = document.querySelector('#player-cards');
let players = document.querySelector('#players');

team.innerHTML = footballTeam.team;
year.textContent = footballTeam.year;
headCoach.textContent = footballTeam.headCoach;



function displayInfo() {
  if(players.value === "all") {
    for(let i = 0; i < footballTeam.players.length; i++) {
      function captain() {
        return footballTeam.players[i].isCaptain ? "(Captain)" : ""
      };
      let card = document.createElement('div');
      card.setAttribute("class", "player-card");
      card.innerHTML = `<h2>${captain()} ${footballTeam.players[i].name}</h2><br><p>Position: ${footballTeam.players[i].position}`;
      cards.appendChild(card);
    }
  }


  else if(players.value === "forward") {
    for(let i = 0; i < footballTeam.players.length; i++) {
      function captain() {
        return footballTeam.players[i].isCaptain ? "(Captain)" : ""
      };
      if(footballTeam.players[i].position === "forward") {
        let card = document.createElement('div');
      card.setAttribute("class", "player-card");
      card.innerHTML = `<h2>${captain()} ${footballTeam.players[i].name}</h2><br><p>Position: ${footballTeam.players[i].position}`;
      cards.appendChild(card);
      }
    }
  }


  else if(players.value === "midfielder") {
    for(let i = 0; i < footballTeam.players.length; i++) {
      function captain() {
        return footballTeam.players[i].isCaptain ? "(Captain)" : ""
      };
      if(footballTeam.players[i].position === "midfielder") {
        let card = document.createElement('div');
      card.setAttribute("class", "player-card");
      card.innerHTML = `<h2>${captain()} ${footballTeam.players[i].name}</h2><br><p>Position: ${footballTeam.players[i].position}`;
      cards.appendChild(card);
      }
    }
    }


  else if(players.value === "defender") {
    for(let i = 0; i < footballTeam.players.length; i++) {
      function captain() {
        return footballTeam.players[i].isCaptain ? "(Captain)" : ""
      };
      if(footballTeam.players[i].position === "defender") {
        let card = document.createElement('div');
      card.setAttribute("class", "player-card");
      card.innerHTML = `<h2>${captain()} ${footballTeam.players[i].name}</h2><br><p>Position: ${footballTeam.players[i].position}`;
      cards.appendChild(card);
      }
    }
    }


  else if(players.value === "goalkeeper") {
    for(let i = 0; i < footballTeam.players.length; i++) {
      function captain() {
        return footballTeam.players[i].isCaptain ? "(Captain)" : ""
      };
      if(footballTeam.players[i].position === "goalkeeper") {
        let card = document.createElement('div');
      card.setAttribute("class", "player-card");
      card.innerHTML = `<h2>${captain()} ${footballTeam.players[i].name}</h2><br><p>Position: ${footballTeam.players[i].position}`;
      cards.appendChild(card);
      }
    }
    }
};

displayInfo();
players.addEventListener("change", () => {
  displayInfo();
})

/* file: styles.css */

Your browser information:

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

Challenge Information:

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

3

Please post your CSS and HTML as well. Also which tests are not passing for you?

4

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>


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;
  }
}
5

I am not there yet to pass any of those 5 tests remaining, I am facing one issue(which I mentioned), I need help regarding that only.

6

can you describe more your issue? I do not understand what help you need

7

anyway, here some pointers for things I have observed

you repeat it many times, make it global, so you don’t have to recreate it in each function

you do not need the br, both p and h2 are block elements, they will go on different lines automatically
the p is unclosed

8

When I select an option from select element then new cards are generated on the basis of position but old cards are also present there but cards according to previous position should be gone.

So i thought I should use remove child-

cards.removeChild(card);

But I am not able to think where I should put it. I am getting scope error in global scope and my code breaks because I am not able to think about it.

for e.g. see this-

players.addEventListener("change", () => {
  cards.removeChild(card);
  displayInfo();
})

First I thought, when I change option then previous cards can be removed like this but I thought about scope and which is the preoblem- card not defined.
Please guide me.

9

won’t that “i” in players[i] will give me scope error- i not defined ?

yes your’e right i’ll fix them.

10

well, you can use i it as parameter for the function, and pass it in as argument when you call the function

you are adding all the card elements everytime the dropdown is changed

you could remove the extra elements one by one, you would need to select all the elements and remove them

but you could also empty the innerHTML of the parent element

1 Like
11

yes, youre right. You know I didn’t wrote any JS in last 1 month and 8 days except 1 project. So I forgot.

Thanks a lot. Test passed, project completed.

It was such an easy fix, i just added this line in the event listener-

players.addEventListener("change", () => {
  cards.innerHTML = "";
  displayInfo();
})

Thank you very much :slight_smile: