I am not getting the edit option, hence posting the code here.(I have only changed the script file, no changes made to index.html/styles.css
Script.js:
const footballTeam = {
team: "Paris Saint-Germain",
year: 2025,
headCoach: "Luis Enrique",
players: [
{ name: "Marquinhos", position: "defender", isCaptain: true },
{ name: "Lucas Chevalier", position: "goalkeeper", isCaptain: false },
{ name: "Matvey Safonov", position: "goalkeeper", isCaptain: false },
{ name: "Renato Marin", position: "goalkeeper", isCaptain: false },
{ name: "Achraf Hakimi", position: "defender", isCaptain: false },
{ name: "Willian Pacho", position: "defender", isCaptain: false },
{ name: "Illia Zabarnyi", position: "defender", isCaptain: false },
{ name: "Lucas Beraldo", position: "defender", isCaptain: false },
{ name: "Nuno Mendes", position: "defender", isCaptain: false },
{ name: "Lucas Hernández", position: "defender", isCaptain: false },
{ name: "Vitinha", position: "midfielder", isCaptain: false },
{ name: "João Neves", position: "midfielder", isCaptain: false },
{ name: "Warren Zaïre-Emery", position: "midfielder", isCaptain: false },
{ name: "Fabián Ruiz", position: "midfielder", isCaptain: false },
{ name: "Senny Mayulu", position: "midfielder", isCaptain: false },
{ name: "Lee Kang-in", position: "midfielder", isCaptain: false },
{ name: "Ousmane Dembélé", position: "forward", isCaptain: false },
{ name: "Khvicha Kvaratskhelia", position: "forward", isCaptain: false },
{ name: "Bradley Barcola", position: "forward", isCaptain: false },
{ name: "Gonçalo Ramos", position: "forward", isCaptain: false },
{ name: "Désiré Doué", position: "forward", isCaptain: false },
{ name: "Ibrahim Mbaye", position: "forward", isCaptain: false },
{ name: "Quentin Ndjantou", position: "forward", isCaptain: false }
]
};
const playerCards = document.querySelector("#player-cards");
const team = document.querySelector("#team");
const headCoach = document.querySelector("#head-coach");
const year = document.querySelector("#year");
const playersFilter = document.querySelector("#players");
playersFilter.addEventListener("change", () => {
showCards(playersFilter.value);
});
function init() {
team.innerText = footballTeam.team;
year.innerText = footballTeam.year;
headCoach.innerText = footballTeam.headCoach;
playersFilter.value = "all";
showCards("all");
}
function showCards(filterKey) {
let filteredArray = [];
if (filterKey === "all") {
filteredArray = [...footballTeam.players];
} else {
filteredArray = footballTeam.players.filter(
(player) => player.position === filterKey,
);
}
const HTMLString = filteredArray
.map((player) => {
return `<div class="player-card"><h2>${player.name}</h2><p>Position: ${player.position}</p><p>${player.isCaptain ? "Captain" : " "}</p></div>`;
})
.join("");
playerCards.innerHTML = HTMLString;
}
window.onload = init();
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>
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;
}
}
