HTML code
<!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>
CSS code
*,
*::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;
}
}
JavaScript code
const footballTeam = {
team: "RealMadrid",
year: 1903,
headCoach: "Carlo Ancelotti",
players: [
{name:"Iker Casillas", position: "goalkeeper", isCaptain: true},
{name: "Raphael Varane", position: "defender", isCaptain: false},
{name: "Pepe", position: "defender", isCaptain: false},
{name: "Sergio Ramos", position: "defender", isCaptain: false},
{name: "Fabio Coentrao", position: "defender", isCaptain: false},
{name: "Sami Khedira", position: "midfielder", isCaptain: false},
{name: "Cristiano Ronaldo", position: "forward", isCaptain: false},
{name: "Karim Benzema", position: "forward", isCaptain: false},
{name: "Gareth Bale", position: "forward", isCaptain: false},
{name: "Marcelo", position: "defender", isCaptain: false},
{name: "Jesus", position: "goalkeeper", isCaptain: false},
{name: "Xabi Alonso", position: "midfielder", isCaptain: false},
{name: "Dani Carvajal", position: "defender", isCaptain: false},
{name: "Casemiro", position: "midfielder", isCaptain: false},
{name: "Alvaro Arbeloa", position: "defender", isCaptain: false},
{name: "Nacho Fernandez", position: "defender", isCaptain: false},
{name: "Luka Modrich", position: "midfielder", isCaptain: false},
{name: "Jese", position: "forward", isCaptain: false},
{name: "Alvaro Morata", position: "forward", isCaptain: false},
{name: "Angel Di Maria", position: "forward", isCaptain: false},
{name: "Isco", position: "midfielder", isCaptain: false},
{name: "Asier Illaramendi", position: "midfielder", isCaptain: false},
{name: "Diego Lopes", position: "goalkeeper", isCaptain: false},
]
}
const headCoach = document.getElementById("head-coach");
const team = document.getElementById("team");
const year = document.getElementById("year");
headCoach.innerText = footballTeam.headCoach;
team.innerText = footballTeam.team;
year.innerText = footballTeam.year;
const playerDiv = document.getElementById("player-cards");
const selectPlayerPositions = document.getElementById("players");
selectPlayerPositions.addEventListener("click", selection);
function playerCardGenerator(item){
const divNode = document.createElement("div"); // creating div node
const h2Node = document.createElement("h2"); // creating h2 node
const h2TextNode = document.createTextNode(item.name); // creating content for h2 node as text
const pNode = document.createElement("p"); // creating p node
const pTextNode = document.createTextNode("position: " + item.position); // creating content for p node as text
divNode.appendChild(h2Node, pNode); // adding h2node to divNode
divNode.appendChild(pNode); // adding pNode to divNode
h2Node.appendChild(h2TextNode); // adding h2TextNode to h2Node
pNode.appendChild(pTextNode); // adding pTextNode to pNode
divNode.setAttribute("class", "player-card" ); // adding a class attribute to divNode
playerDiv.appendChild(divNode); // adding divNode to existing playerDiv node
};
function selection(){
if(this.value === "all"){
playerDiv.innerHTML = ""; // this line of code delete all old content of the playerDiv so we can add new ones
footballTeam.players.forEach(playerCardGenerator);
}else if(this.value === "forward"){
playerDiv.innerHTML = "";
for(let i=0; i<footballTeam.players.length;i++){
if(footballTeam.players[i].position === "forward")
playerCardGenerator(footballTeam.players[i]);
}
}else if(this.value === "midfielder"){
playerDiv.innerHTML = "";
for(let i=0; i<footballTeam.players.length;i++){
if(footballTeam.players[i].position === "midfielder")
playerCardGenerator(footballTeam.players[i]);
}
}else if(this.value === "defender"){
playerDiv.innerHTML = "";
for(let i=0; i<footballTeam.players.length;i++){
if(footballTeam.players[i].position === "defender")
playerCardGenerator(footballTeam.players[i]);
}
}else if(this.value === "goalkeeper"){
playerDiv.innerHTML = "";
for(let i=0; i<footballTeam.players.length;i++){
if(footballTeam.players[i].position === "goalkeeper")
playerCardGenerator(footballTeam.players[i]);
}
}
};
