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

JavaScript
1

Tell us what’s happening:

Hello,I didn’t find my bug here ! could you help me ?

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 class="player-card">

<h2>(Captain)Husni</h2>

<p>Position: Forward</p>

</div>

<div class="player-card">

<h2>Khalid</h2>

<p>Position: Forward</p>

</div>

<div class="player-card">

<h2>Anas</h2>

<p>Position: Goal Keeper</p>

</div>

<div class="player-card">

<h2>Ahmad</h2>

<p>Position: midfielder</p>

</div>

<div class="player-card">

<h2>Bilal</h2>

<p>Position: Midfielder</p>

</div>

<div class="player-card">

<h2>Omar</h2>

<p>Position: Defender</p>

</div>

<div class="player-card">

<h2>Ali</h2>

<p>Position: Defender</p>

</div>

</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:"Hamdan",
  year: 2025,
  headCoach: "Mohamad",
  players : [{name :"Khalid", position:"forward", isCaptain:false},       
      {name:"Husni", position :"forward", isCaptain:true},
  {name: "Anas", position :"goalkeeper", isCaptain:false},
  {name: "Bilal",position:"midfielder", isCaptain:false},
  {name: "Ahmad",position:"midfielder", isCaptain:false},
  {name: "Omar",position:"defender", isCaptain:false},
  {name: "Ali",position:"defender", isCaptain:false}]
}

const teamName = document.getElementById("team");
teamName.textContent = footballTeam.team;

const headCoachName = document.getElementById("head-coach");
headCoachName.textContent = footballTeam.headCoach;

const yearA = document.getElementById("year");
yearA.textContent = footballTeam.year;




const cards = document.getElementById("player-cards");




function playersSelected(arg){
let i=0;
let selected = [];
while(i<footballTeam.players.length){
if(footballTeam.players[i].position === arg){
  selected.push(footballTeam.players[i])
  i++;
}
else i++;

}

let selectedHtml ;
let j=0 ;
while (j<selected.length){
  if(selected[j].isCaptain !== true){
  selectedHtml += `<div class="player-card">
  <h2>${selected[j].name}</h2>
  <p>Position: ${arg}</p>
</div>`;
j++;}
else{
  selectedHtml += `<div class="player-card">
  <h2>(Captain) ${selected[j].name}</h2>
  <p>Position: ${arg}</p>
</div>`;
j++;
}
}
return selectedHtml;
}
console.log(playersSelected("forward"))











select.addEventListener("change", (event) => {
  const selectElement = document.getElementById('players');
  const selectedValue = selectElement.value;
  if (selectedValue ==="forawrd"){
    cards.innerHTML = playersSelected(forward);
  }
   else if (selectedValue ==="midfielder"){
    cards.innerHTML = playersSelected(midfielder);
  }
   else if (selectedValue ==="defender"){
    cards.innerHTML = playersSelected(defender);
  }
  else if (selectedValue ==="goalkeeper"){
    cards.innerHTML = playersSelected(goalkeeper);
  }
  else {
    cards.innerHTML = `<div class="player-card">
  <h2>(Captian)Husni</h2>
  <p>Position: Forward</p>
</div>
<div class="player-card">
  <h2>Khalid</h2>
  <p>Position: Forward</p>
</div>
<div class="player-card">
  <h2>Anas</h2>
  <p>Position: Goal Keeper</p>
</div>
<div class="player-card">
  <h2>Ahmad</h2>
  <p>Position: midfielder</p>
</div>
<div class="player-card">
  <h2>Bilal</h2>
  <p>Position: Midfielder</p>
</div>
<div class="player-card">
  <h2>Omar</h2>
  <p>Position: Defender</p>
</div>
<div class="player-card">
  <h2>Ali</h2>
  <p>Position: Defender</p>
</div>
`;
  }
  

})

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Challenge Information:

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

2

Please edit your post to include your code - it was too big to show up automatically

1 Like