my code works fine but test wont pass why? i need to know
<!-- 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">Blue Lock</span></p>
<p>Year: <span id="year">2025</span></p>
<p>Head coach: <span id="head-coach">Blue Otino</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)Blue</h2>
<p>position: forward</p>
</div>
<div class="player-card">
<h2>Beta</h2>
<p>position: forward</p>
</div>
<div class="player-card">
<h2>Sash</h2>
<p>position: midfielder</p>
</div>
<div class="player-card">
<h2>Bech</h2>
<p>position: defender</p>
</div>
<div class="player-card">
<h2>Demo</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: 'Blue Lock',
year: 2025,
headCoach: 'Blue Otino',
players: [
{
name: 'Bech',
position: 'defender',
isCaptain: false
},
{
name: 'Demo',
position: 'goalkeeper',
isCaptain: false
},
{
name: 'Blue',
position: 'forward',
isCaptain: true
},
{
name: 'Beta',
position: 'forward',
isCaptain: false
},
{
name: 'Sash',
position: 'midfielder',
isCaptain: false
}
]
}
let players = document.getElementById('players')
let cards = document.querySelector('.cards')
function playerCards(playerPosition) {
let filteredplayers =
playerPosition === 'all'
? footballTeam.players
: footballTeam.players.filter(({ position }) => position === playerPosition);
return filteredplayers.map(({ name, position }) => {
return `<div class="player-card">
<h2>${name}</h2>
<p>${position}</p></div>`
}).join('');
}
players.addEventListener('change', function () {
cards.innerHTML = playerCards(players.value)
})
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Build a Set of Football Team Cards - Build a Set of Football Team Cards
You’re displaying only the name and position of the player, but not indicating whether the player is the captain of the team.
For example, when selecting Position Forward from the list, the player named Blue is a captain, but that is not being displayed.
here is the user story:
an h2 containing the name of the player, and (Captain) in case of the player being captain
let footballTeam = {
team: 'Blue Lock',
year: 2025,
headCoach: 'Blue Otino',
players: [
{
name: 'Bech',
position: 'defender',
isCaptain: false
},
{
name: 'Demo',
position: 'goalkeeper',
isCaptain: false
},
{
name: 'Blue',
position: 'forward',
isCaptain: true
},
{
name: 'Beta',
position: 'forward',
isCaptain: false
},
{
name: 'Sash',
position: 'midfielder',
isCaptain: false
}
]
}
let players = document.getElementById('players')
let cards = document.getElementById('player-cards')
function playerCards(playerPosition) {
let filteredplayers =
playerPosition === 'all'
? footballTeam.players
: footballTeam.players.filter(({ position }) => position === playerPosition);
return filteredplayers.map(({ name, position, isCaptain }) => {
return `<div class="player-card">
<h2>${isCaptain ? '(Captain)' : ''}${name}</h2>
<p>position: ${position}</p></div>`
}).join('');
}
players.addEventListener('change', function () {
cards.innerHTML = playerCards(players.value)
})
cards.innerHTML = playerCards('all')
document.getElementById('team').textContent = footballTeam.team
document.getElementById('year').textContent = footballTeam.year
document.getElementById('head-coach').textContent = footballTeam.headCoach
Here are some troubleshooting steps you can follow. Focus on one test at a time:
What is the requirement of the first failing test?
Check the related User Story and ensure it’s followed precisely.
What line of code implements this?
What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)
Are there any errors or messages in the console?
If this does not help you solve the problem, please reply with answers to these questions.
i followed every step and the code is running correctly
1 Like
Ok, you’ve passed the tests? Glad you got it! You didn’t mention that so I thought you still needed help.
Please do not post solution code to the forum though
thats what i’m saying.the test isn’t passing but output is correct
Ok, why didn’t you say that? If you post code with no explanation no one can read your mind.
Please answer these questions
Focus on one test at a time:
What is the requirement of the first failing test?
Check the related User Story and ensure it’s followed precisely.
What line of code implements this?
What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)
Are there any errors or messages in the console?
all this steps are well checked but still not passing.can you please just run the code and see?
ILM
August 6, 2025, 12:47pm
10
so you are 100% sure you followed all the user stories? you may want to check again
also please try to answer those questions
Nope, I’m helping you to solve your problem yourself and teaching you how to communicate. It’s not enough to just dump code and expect someone to do it all for you.
The fact is that you have all the skills and tools to solve this on your own. I’m giving you a framework to investigate and solve any problem.
If this does not help you solve the problem, please reply with answers to the questions. Once you’ve done that I will be more than happy to assist!
no i’m not asking you to do it for me . i’m just asking if you could please verify my code and just atleast indicate where the problem is and i’ll try to modify
That’s what we are doing. Do you want to move forward or keep arguing?
Great! Looking forward to the answers to those questions.
i dont understand what first failing test is refering to
ILM
August 6, 2025, 12:56pm
17
When you click the button Run the tests you will see these:
be marked with a X or a
you would see the failed tests also in the console
you would start debugging with the first one that fails
1 Like
It’s going to be really hard to pass the tests if you don’t know what they are, right?
There are tests right? And some of them are failing? What is the first one?
Here are some troubleshooting steps you can follow. Focus on one test at a time:
What is the requirement of the first failing test?
Check the related User Story and ensure it’s followed precisely.
What line of code implements this?
What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)
Are there any errors or messages in the console?
If this does not help you solve the problem, please reply with answers to these questions.
, the X means it failed, the checkmark that it passed