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

JavaScript
1

Tell us what’s happening:

I understand the array.functions better now. But I got two troubles that adress with commentary in the code.

  1. Is it possible to stop filtering with a value for .filter that would accept any value and filter none?
    2.Is there way to nest an if statement, or check for specific value of a line, inside the .map function or something ?

I am having trouble explaining my self.

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: "Miou's balling team",
  year: 1990,
  headCoach:"Mimiou",
  players:[
    {
      name:"MIOUUUU",
      position:"forward",
      isCaptain: false
    },
    {
      name:"Meow",
      position:"defender",
      isCaptain: true
    },
    {
      name:"Waf waf",
      position:"midfielder",
      isCaptain: false
    },
    {
      name:"zZzZzZz",
      position:"goalkeeper",
      isCaptain: false
    }
  ]
}

const hC = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");

team.innerText = footballTeam["team"];
year.innerText = footballTeam["year"];
hC.innerText = footballTeam["headCoach"];

const playerCards = document.querySelector("#player-cards");

const filterEl = document.getElementById("players")

filterEl.addEventListener("change", () => getFiltered(filterEl.value));

function getFiltered(filter){
  if(filter == "all"){
    filter = "all"; //(1.)I want filter to filter nothing if filter value is "all" D:
    //For now, filter value is the same, is there any value that could stop filtering ?
  };
  if(filter == "all"){
    playerCards.innerHTML = footballTeam["players"].map(player => //(2.)Is there way to add an if function inside here to put the (Captain) word before captain player if any ?
    `<div class="player-card">
  <h2>${player.name}</h2>
  <p>Position: ${player.position}</p>
</div>`)
    return
  }
  let filteredFootballTeam = footballTeam["players"].filter(player => player.position == filter)
  playerCards.innerHTML = filteredFootballTeam.map(player => 
    `<div class="player-card">
  <h2>${player.name}</h2>
  <p>Position: ${player.position}</p>
</div>`)
}

getFiltered("all");

Your browser information:

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

Challenge Information:

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

2

you can write a callback for filter that does that, yes, you need to write the correct return statement inside it

you can, but map will always return the same number of elements, you can’t use it to filter an array

3

I am completly lost right now. Can I change this line :

let filteredFootballTeam = footballTeam["players"].filter(player => player.position == filter)

Or should i write every time a new array of object players ?

I don’t really understand what you mean by a good return thingy inside of a callback. I can’t understand what i would need to return to satisfy the .filter(player => player.position == filter) and filter is filtering nothing…

I am lost LMAO.

I could write it with a huge portion of code repeating. I am avoiding that. I don’t understand what your clues are.

4

if filter is all, don’t you want to return all players? how do you check if filter is set to all?

5

Well, i can do it with that :

 if(filter == "all"){
    filter = "all"; //(1.)I want filter to filter nothing if filter value is "all" D:
    //For now, filter value is the same, is there any value that could stop filtering ?
  };
  if(filter == "all"){ //Right here !
    playerCards.innerHTML = footballTeam["players"].map(player => //(2.)Is there way to add an if function inside here to put the (Captain) word before captain player if any ?
    `<div class="player-card">
  <h2>${player.name}</h2>
  <p>Position: ${player.position}</p>
</div>`)
    return

But what i mean is that i need to rewrite again all the code for the HTML.

I don’t want that if i can do it otherwise. It would be cool. But that way works right ?

6

write the if inside the callback, or a ternary, make sure to have (Captain) in the thing returned when needed, and not have it when you don’t need it

remember that what you return inside the callback determines the new elements in the new array

7

Thank you so much, I didn’t realise how easy it was with a ternary !

I still have to write many lines, but it feels much more compact to do so.

8

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.