Tell us what’s happening:
I can’t seem to figure out where the problem lies in my code. Every single options filters exactlly but test 11 through 15 keep failing and I don’t know what the problem is. I will greatly appreciate any assistance.
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;
}
@media (max-width: 768px) {
.team-stats {
flex-direction: column;
}
}
/* file: script.js */
const footballTeam = {
team: 'Nigeria (Super Eagle)',
year: 1998,
headCoach: 'Bora Milutinovic',
players: [
{
name: 'Peter Rufai',
position: 'goalkeeper',
isCaptain: false,
jersey: 1
},
{
name: 'Willy Okpara',
position: 'goalkeeper',
isCaptain: false,
jersey: 12
},
{
name: 'Abiodun Baruwa',
position: 'goalkeeper',
isCaptain: false,
jersey: 22
},
{
name: 'Mobi Oparaku',
position: 'defender',
isCaptain: false,
jersey: 2
},
{
name: 'Celestine Babayaro',
position: 'defender',
isCaptain: false,
jersey: 3
},
{
name: 'Uche Okechukwu',
position: 'defender',
isCaptain: true,
jersey: 5
},
{
name: 'Taribo West',
position: 'defender',
isCaptain: false,
jersey: 6
},
{
name: 'Uche Okafor',
position: 'defender',
isCaptain: false,
jersey: 16
},
{
name: 'Augustine Eguavoen',
position: 'defender',
isCaptain: false,
jersey: 17
},
{
name: 'Benedict Iroha',
position: 'defender',
isCaptain: false,
jersey: 19
},
{
name: 'Finidi George',
position: 'midfielder',
isCaptain: false,
jersey: 7
},
{
name: 'Mutiu Adepoju',
position: 'midfielder',
isCaptain: false,
jersey: 8
},
{
name: 'Jay-Jay Okocha',
position: 'midfielder',
isCaptain: false,
jersey: 10
},
{
name: 'Garba Lawal',
position: 'midfielder',
isCaptain: false,
jersey: 11
},
{
name: 'Sunday Oliseh',
position: 'midfielder',
isCaptain: false,
jersey: 15
},
{
name: 'Wilson Oruma',
position: 'midfielder',
isCaptain: false,
jersey: 18
},
{
name: 'Godwin Okpara',
position: 'midfielder',
isCaptain: false,
jersey: 21
},
{
name: 'Nwankwo Kanu',
position: 'forward',
isCaptain: false,
jersey: 4
},
{
name: 'Rashidi Yekini',
position: 'forward',
isCaptain: false,
jersey: 9
},
{
name: 'Tijani Babangida',
position: 'forward',
isCaptain: false,
jersey: 13
},
{
name: 'Daniel Amokachi',
position: 'forward',
isCaptain: false,
jersey: 14
},
{
name: 'Victor Ikpeba',
position: 'forward',
isCaptain: false,
jersey: 20
},
]
}
const {team, year, headCoach, players} = footballTeam;
const teamName = document.getElementById('team');
const wordCupYear = document.getElementById('year');
const coachName = document.getElementById('head-coach');
const playerDropDownList = document.querySelector('#players');
const playerCards = document.getElementById('player-cards');
teamName.textContent = team;
wordCupYear.textContent = year;
coachName.textContent = headCoach;
const setPlayerCards = (arr = players) => {
playerCards.innerHTML = arr
.map(({name, position, isCaptain}) =>`
<div class="player-card">
<h2>
${isCaptain ? "(Captain)": ""} ${name}
</h2>
<p>Position: ${position}</p>
</div>
`)
.join("");
}
setPlayerCards();
playerDropDownList.addEventListener("change", (e) => {
// playerCards.innerHTML = "";
const value = e.target.value;
switch(value) {
// case "all":
// setPlayerCards();
// break;
case "forward":
setPlayerCards(players
.filter(p => p.position === "forward"));
break;
case "midfielder":
setPlayerCards(players
.filter(p => p.position === "midfielder"));
break;
case "defender":
setPlayerCards(players
.filter(p => p.position === "defender"));
break;
case "goalkeeper":
setPlayerCards(players
.filter(p => p.position === "goalkeeper"));
break;
case "all":
default:
setPlayerCards(players);
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36
Challenge Information:
Build a Set of Football Team Cards - Build a Set of Football Team Cards