Tell us what’s happening:
The project won’t pass steps 11-15. The project is working correctly. Would greatly appreciate if someone can help me out. Thank you.
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>© 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;
}
.player-card h2 {
margin: 0.5rem 0;
}
.player-card p {
margin: 0.5rem 0;
}
.player-card span {
font-size: 1.2rem;
}
@media (max-width: 768px) {
.team-stats {
flex-direction: column;
}
}
/* file: script.js */
const footballTeam = {
team: "FC Barcelona",
year: 2011,
headCoach: "Pep Guardiola",
players: [{
number: 1,
nationality: "🇪🇸",
name: "Victor Valdes",
position: "goalkeeper",
age: 29,
isCaptain: false,
isViceCaptain: true
},
{
number: 2,
nationality: "🇧🇷",
name: "Dani Alves",
position: "defender",
age: 28,
isCaptain: false,
isViceCaptain: false
},
{
number: 3,
nationality: "🇪🇸",
name: "Gerard Piqué",
position: "defender",
age: 24,
isCaptain: false,
isViceCaptain: false
},
{
number: 5,
nationality: "🇪🇸",
name: "Carles Puyol",
position: "defender",
age: 33,
isCaptain: true,
isViceCaptain: false
},
{
number: 6,
nationality: "🇪🇸",
name: "Xavi",
position: "midfielder",
age: 31,
isCaptain: false,
isViceCaptain: true,
},
{
number: 7,
nationality: "🇪🇸",
name: "David Villa",
position: "forward",
age: 29,
isCaptain: false,
isViceCaptain: false
},
{
number: 8,
nationality: "🇪🇸",
name: "Andrés Iniesta",
position: "midfielder",
age: 27,
isCaptain: false,
isViceCaptain: true
},
{
number: 9,
nationality: "🇪🇸",
name: "Bojan",
position: "defender",
age: 20,
isCaptain: false,
isViceCaptain: false
},
{
number: 10,
nationality: "🇦🇷",
name: "Lionel Messi",
position: "forward",
age: 23,
isCaptain: false,
isViceCaptain: false
},
{
number: 11,
nationality: "🇻🇪",
name: "Jeffrén",
position: "midfielder",
age: 23,
isCaptain: false,
isViceCaptain: false
},
{
number: 13,
nationality: "🇪🇸",
name: "José Manuel Pinto",
position: "goalkeeper",
age: 35,
isCaptain: false,
isViceCaptain: false
},
{
number: 14,
nationality: "🇦🇷",
name: "Javier Mascherano",
position: "midfielder",
age: 26,
isCaptain: false,
isViceCaptain: false
},
{
number: 15,
nationality: "🇲🇱",
name: "Seydou Keita",
position: "midfielder",
age: 31,
isCaptain: false,
isViceCaptain: false
},
{
number: 16,
nationality: "🇪🇸",
name: "Sergio Busquets",
position: "midfielder",
age: 22,
isCaptain: false,
isViceCaptain: false
},
{
number: 17,
nationality: "🇪🇸",
name: "Pedro",
position: "forward",
age: 23,
isCaptain: false,
isViceCaptain: false
},
{
number: 18,
nationality: "🇦🇷",
name: "Gabriel Milito",
position: "defender",
age: 30,
isCaptain: false,
isViceCaptain: false
},
{
number: 19,
nationality: "🇧🇷",
name: "Maxwell",
position: "defender",
age: 29,
isCaptain: false,
isViceCaptain: false
},
{
number: 20,
nationality: "🇳🇱",
name: "Ibrahim Afellay",
position: "midfielder",
age: 25,
isCaptain: false,
isViceCaptain: false
},
{
number: 21,
nationality: "🇧🇷",
name: "Adriano",
position: "defender",
age: 26,
isCaptain: false,
isViceCaptain: false
},
{
number: 22,
nationality: "🇫🇷",
name: "Eric Abidal",
position: "defender",
age: 31,
isCaptain: false,
isViceCaptain: false
},
]
}
function formatYear(year) {
const previousYear = year - 1;
return `${previousYear}-${year.toString().slice(-2)}`;
}
const teamElement = document.getElementById("team");
const yearElement = document.getElementById("year");
const headCoachElement = document.getElementById("head-coach");
teamElement.textContent = footballTeam.team;
yearElement.textContent = footballTeam.year
headCoachElement.textContent = footballTeam.headCoach;
const selectElement = document.getElementById("players");
function getAllPlayers() {
const playerCardsContainer = document.getElementById("player-cards");
const selectedValue = selectElement.value
playerCardsContainer.innerHTML = ""
const filteredPlayers = selectedValue === "all"
? footballTeam.players
: footballTeam.players.filter(player => player.position === selectedValue)
filteredPlayers.forEach(player => {
const playerCard = document.createElement("div");
playerCard.className ="player-card";
const playerName = `${player.name}${player.isCaptain ? "<br>(Captain)" : player.isViceCaptain ? "<br>(Vice Captain)" : ""}`;
playerCard.innerHTML =`
<p><strong>${player.number}</strong></p>
<h2>${playerName}</h2>
<span>${player.nationality}</span>
<p>Age: ${player.age}</p>
<p>Position: ${player.position}</p>
`
playerCardsContainer.appendChild(playerCard);
})
};
selectElement.addEventListener("change", getAllPlayers)
getAllPlayers()
Challenge Information:
Build a Set of Football Team Cards - Build a Set of Football Team Cards