Tell us what’s happening:
Hi there,
Please i’ve been stuck on trying to solving this challenge for a while, the code does what it’s supposed to do but i haven’t been able to pass tests 11 & 13, and I can’t figure out why.
Any help would be appreciated.
Thanks.
These are the failed results:
11. When the option All Players is selected, all players should be present within #player-cards.
13. When the option Position Midfielder is selected, only midfielder players should be present within #player-cards.
Your code so far
<!-- file: index.html -->
<html>
<head>
<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="card" id="almirón">
<h2>Sergio Almiró</h2>
<p>Position: forward</p>
</div>
<div class="card" id="batista">
<h2>Sergio Batista</h2>
<p>Position: midfielder</p>
</div>
<div class="card" id="bochini">
<h2>Ricardo Bochini</h2>
<p>Position: midfielder</p>
</div>
<div class="card" id="borghi">
<h2>Claudio Borghi</h2>
<p>Position: midfielder</p>
</div>
<div class="card" id="brown">
<h2>José Luis Brown</h2>
<p>Position: defender</p>
</div>
<div class="card" id="passarella">
<h2>Daniel Passarella</h2>
<p>Position: defender</p>
</div>
<div class="card" id="burruchaga">
<h2>Jorge Burruchaga</h2>
<p>Position: forward</p>
</div>
<div class="card" id="clausen">
<h2>Néstor Clausen</h2>
<p>Position: defender</p>
</div>
<div class="card" id="cuciuffo">
<h2>José Luis Cuciuffo</h2>
<p>Position: defender</p>
</div>
<div class="card" id="maradona">
<h2>(Captain) Diego Maradona</h2>
<p>Position: midfielder</p>
</div>
<div class="card" id="valdano">
<h2>Jorge Valdano</h2>
<p>Position: forward</p>
</div>
<div class="card" id="enrique">
<h2>Héctor Enrique</h2>
<p>Position: midfielder</p>
</div>
<div class="card" id="garré">
<h2>Oscar Garré</h2>
<p>Position: defender</p>
</div>
<div class="card" id="giusti">
<h2>Ricardo Giusti</h2>
<p>Position: midfielder</p>
</div>
<div class="card" id="islas">
<h2>Luis Islas</h2>
<p>Position: goalkeeper</p>
</div>
<div class="card" id="olarticoechea">
<h2>Julio Olarticoechea</h2>
<p>Position: defender</p>
</div>
<div class="card" id="pasculli">
<h2>Pedro Pasculli</h2>
<p>Position: forward</p>
</div>
<div class="card" id="pumpido">
<h2>Nery Pumpido</h2>
<p>Position: goalkeeper</p>
</div>
<div class="card" id="ruggeri">
<h2>Oscar Ruggeri</h2>
<p>Position: defender</p>
</div>
<div class="card" id="tapia">
<h2>Carlos Tapia</h2>
<p>Position: midfielder</p>
</div>
<div class="card" id="trobbiani">
<h2>Marcelo Trobbiani</h2>
<p>Position: midfielder</p>
</div>
<div class="card" id="zelada">
<h2>Héctor Zelada</h2>
<p>Position: goalkeeper</p>
</div>
</div>
</main>
<footer>© 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 : "Argentina",
year: 1986,
headCoach: "Carlos Bilardo",
players: [
{ name: "Sergio Almirón",
position: "forward",
isCaptain: false
},
{
name: "Sergio Batista",
position: "midfielder",
isCaptain: false
},
{
name: "Ricardo Bochini",
position: "midfielder",
isCaptain: false
},
{
name: "Claudio Borghi",
position: "midfielder",
isCaptain: false
},
{
name: "José Luis Brown",
position: "defender",
isCaptain: false
},
{
name: "Daniel Passarella",
position: "defender",
isCaptain: false
},
{
name: "Jorge Burruchaga",
position: "forward",
isCaptain: false
},
{
name: "Néstor Clausen",
position: "defender",
isCaptain: false
},
{
name: "José Luis Cuciuffo",
position: "defender",
isCaptain: false
},
{
name: "Diego Maradona",
position: "midfielder",
isCaptain: true
},
{
name: "Jorge Valdano",
position: "forward",
isCaptain: false
},
{
name: "Héctor Enrique",
position: "midfielder",
isCaptain: false
},
{
name: "Ricardo Giusti",
position: "midfielder",
isCaptain: false
},
{
name: "Luis Islas",
position: "goalkeeper",
isCaptain: false
},
{
name: "Julio Olarticoechea",
position: "defender",
isCaptain: false
},
{
name: "Pedro Pasculli",
position: "forward",
isCaptain: false
},
{
name: "Nery Pumpido",
position: "goalkeeper",
isCaptain: false
},
{
name: "Oscar Ruggeri",
position: "defender",
isCaptain: false
},
{
name: "Carlos Tapia",
position: "midfielder",
isCaptain: false
},
{
name: "Marcelo Trobbiani",
position: "midfielder",
isCaptain: false
},
{
name: "Héctor Zelada",
position: "goalkeeper",
isCaptain: false
}
]
}
let selectContainer = document.getElementById("players");
let playerCards = document.getElementById("player-cards");
let headCoach = document.getElementById("head-coach");
let teamName = document.getElementById("team");
let teamYear = document.getElementById("year");
headCoach.textContent = footballTeam.headCoach;
teamName.textContent = footballTeam.team;
teamYear.textContent = footballTeam.year;
function playerPosition(position){
let filteredPlayers = position === "all" ? footballTeam.players : footballTeam.players
.filter(obj => obj.position === position);
return filteredPlayers.map(obj => `<div class="player-card">
<h2>${obj.name}${obj.isCaptain ? "(Catain)" : ""}</h2>
<p>Position: ${obj.position}</p>
</div>`).join("");
}
playerCards.innerHTML = playerPosition("all");
selectContainer.addEventListener("change", (event) => {
playerCards.innerHTML = playerPosition(event.target.value);
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
Challenge Information:
Build a Set of Football Team Cards - Build a Set of Football Team Cards
