hi, totally blind. using Jaws for windows 2025, Windows 11 pro, and using google chrome. and doing the build a series of football cards. now running into an issue, it passes from step 1 to 9, then fails with step 10 to 15. Have reset the step, deleted the code for the html, stylesheet and javascript. so is fcc being buggy. Can you confirm if it is buggy, or just very picky. So, will paste the link to the lab, my html, css and javascript code. the errors that it is failling and the tests. can any one give me some tehcnical help, why it is failling and how to get it to pass. Have written the code and have not added extra code. so, can you help me out.
thank you.
Marvin Hunkin from Seaford Rise, South Australia, australia.
ps: so pasting the link to the lab below.hps: pasting my html, css and javascript below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Football Team Cards</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1 id="team"></h1>
<h3>Head Coach: <span id="head-coach"></span></h3>
<h4>Year: <span id="year"></span></h4>
</header>
<section>
<label for="position-filter">Filter by position:</label>
<select id="position-filter">
<option value="all">All Players</option>
<option value="forward">Forward</option>
<option value="midfielder">Midfielder</option>
<option value="defender">Defender</option>
<option value="goalkeeper">Goalkeeper</option>
</select>
</section>
<main id="player-cards">
<!-- Player cards will appear here -->
</main>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
margin: 0;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
}
#position-filter {
display: block;
margin: 0 auto 20px;
padding: 5px;
font-size: 16px;
}
#player-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.player-card {
background: white;
border: 2px solid #333;
border-radius: 10px;
width: 200px;
padding: 15px;
text-align: center;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.player-card h2 {
margin: 0 0 10px;
font-size: 18px;
}
.player-card p {
margin: 0;
font-size: 16px;
}
const footballTeam = {
team: "Adelaide United",
year: 2025,
headCoach: "Carl Veart",
players: [
{ name: "Ryan Kitto", position: "defender", isCaptain: false },
{ name: "Nestory Irankunda", position: "forward", isCaptain: false },
{ name: "Isaias Sanchez", position: "midfielder", isCaptain: true },
{ name: "James Delianov", position: "goalkeeper", isCaptain: false }
]
};
// Display team info
document.getElementById("team").textContent = footballTeam.team;
document.getElementById("head-coach").textContent = footballTeam.headCoach;
document.getElementById("year").textContent = footballTeam.year;
// Function to display player cards
function displayPlayers(players) {
const container = document.getElementById("player-cards");
container.innerHTML = "";
players.forEach(player => {
const card = document.createElement("div");
card.className = "player-card";
const name = document.createElement("h2");
name.textContent = player.isCaptain ? `(Captain) ${player.name}` : player.name;
const position = document.createElement("p");
position.textContent = `Position: ${player.position}`;
card.appendChild(name);
card.appendChild(position);
container.appendChild(card);
});
}
// Initial display: show all players
displayPlayers(footballTeam.players);
// Filter dropdown
document.getElementById("position-filter").addEventListener("change", function() {
const selected = this.value;
if (selected === "all") {
displayPlayers(footballTeam.players);
} else {
const filtered = footballTeam.players.filter(player => player.position === selected);
displayPlayers(filtered);
}
});
-
Passed:1. You should have a
footballTeamvariable. -
Passed:2. The
footballTeamvariable should be an object with four properties:team,year,headCoachandplayers. -
Passed:3. The
teamproperty should be a string. -
Passed:4. The
yearproperty should be a number. -
Passed:5. The
headCoachproperty should be a string. -
Passed:6. The
playersproperty should be an array of at least four objects, each object should have the keysname,position,isCaptain. -
Passed:7. The
nameproperty should have value of a string. -
Passed:8. The
positionproperty should have one of values"forward","midfielder","defender", or"goalkeeper". -
Passed:9. The
isCaptainproperty should have value of a boolean, and there should be only one captain. -
Failed:10. You should display the
coach,teamandyearvalues from thefootballTeamobject in the HTML elements with theidvalues ofhead-coach,teamandyear. -
Failed:11. When the option
All Playersis selected, all players should be present within#player-cards. -
Failed:12. When the option
Position Forwardis selected, only forward players should be present within#player-cards. -
Failed:13. When the option
Position Midfielderis selected, only midfielder players should be present within#player-cards. -
Failed:14. When the option
Position Defenderis selected, only defender players should be present within#player-cards. -
Failed:15. When the option
Position Goalkeeperis selected, only goalkeeper players should be present. -
// running tests 10. You should display the coach, team and year values from the footballTeam object in the HTML elements with the id values of head-coach, team and year. 11. When the option All Players is selected, all players should be present within #player-cards. 12. When the option Position Forward is selected, only forward players should be present within #player-cards. 13. When the option Position Midfielder is selected, only midfielder players should be present within #player-cards. 14. When the option Position Defender is selected, only defender players should be present within #player-cards. 15. When the option Position Goalkeeper is selected, only goalkeeper players should be present. // tests completedfootball-team-cards