mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-03 14:01:27 -05:00
fix(curriculum): combining steps 7-9 in build a football team cards (#55474)
This commit is contained in:
@@ -37,164 +37,156 @@
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "63cf91b0ff6e9300ead140cc",
|
||||
"id": "63cf93472de77d01bf8474bf",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "63cf920228531a0145abd0b3",
|
||||
"id": "63d120a05ee93f38353b84c0",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "63cf93472de77d01bf8474bf",
|
||||
"id": "63d1214a0ac7a9389793269b",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "63d120a05ee93f38353b84c0",
|
||||
"id": "63d128eaedcc773d2ded2128",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "63d1214a0ac7a9389793269b",
|
||||
"id": "63d12b9c7aaee43de1ba265d",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "63d128eaedcc773d2ded2128",
|
||||
"id": "63e02a333354343b595d64ca",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "63d12b9c7aaee43de1ba265d",
|
||||
"id": "63e0334b7a24bd3c96aca4de",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "63e02a333354343b595d64ca",
|
||||
"id": "63e036373fc9173d284e165a",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "63e0334b7a24bd3c96aca4de",
|
||||
"id": "63e03b86008bbb3e1c3de846",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "63e036373fc9173d284e165a",
|
||||
"id": "63e042661ad2663f0d468740",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "63e03b86008bbb3e1c3de846",
|
||||
"id": "63e050bf935ac341b88326d6",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "63e042661ad2663f0d468740",
|
||||
"id": "63e05557016dfd45ea49152c",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "63e050bf935ac341b88326d6",
|
||||
"id": "63e05c00b615bb46ac87273a",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "63e05557016dfd45ea49152c",
|
||||
"id": "63e060df21bca347b2d2b374",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "63e05c00b615bb46ac87273a",
|
||||
"id": "63e062d6090ebb486a4eda3a",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "63e060df21bca347b2d2b374",
|
||||
"id": "63e949b8327aa2aca2ca8eac",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "63e062d6090ebb486a4eda3a",
|
||||
"id": "63e94dae6dcedbad73f2f6ee",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "63e949b8327aa2aca2ca8eac",
|
||||
"id": "63e954321b0a77ae4f6d9650",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "63e94dae6dcedbad73f2f6ee",
|
||||
"id": "63e95a45dce95baf41dd4f78",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "63e954321b0a77ae4f6d9650",
|
||||
"id": "63e95e39860dc5b01ebe9be0",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "63e95a45dce95baf41dd4f78",
|
||||
"id": "63e9667c881b61b1e338d276",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "63e95e39860dc5b01ebe9be0",
|
||||
"id": "63e96938d2a347b2734a1587",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "63e9667c881b61b1e338d276",
|
||||
"id": "63e96eb94c97b6b31ee50f63",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "63e96938d2a347b2734a1587",
|
||||
"id": "63e9718d7d490bb3940d5a0a",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "63e96eb94c97b6b31ee50f63",
|
||||
"id": "63e9737f686c76b4078a60f4",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "63e9718d7d490bb3940d5a0a",
|
||||
"id": "63f28972973504e7bb58b0b3",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "63e9737f686c76b4078a60f4",
|
||||
"id": "63f28ef082d771e8bf71f94a",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "63f28972973504e7bb58b0b3",
|
||||
"id": "63f293c804d6f9e9a83ca4c5",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "63f28ef082d771e8bf71f94a",
|
||||
"id": "63f29804e3ec00ea6fab1ec4",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "63f293c804d6f9e9a83ca4c5",
|
||||
"id": "63f29ce62aea65eb041758c8",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "63f29804e3ec00ea6fab1ec4",
|
||||
"id": "63f2a0a860790eebe61bf908",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "63f29ce62aea65eb041758c8",
|
||||
"id": "641fc88d8fa7127f76e0324f",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "63f2a0a860790eebe61bf908",
|
||||
"id": "641fcfd468185384ac218b7d",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "641fc88d8fa7127f76e0324f",
|
||||
"id": "63f2a4a8087e6dec8ec47f16",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "641fcfd468185384ac218b7d",
|
||||
"id": "63f2a5f09a785aed155c0a56",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "63f2a4a8087e6dec8ec47f16",
|
||||
"id": "63f2a8e14fb388edd3242527",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "63f2a5f09a785aed155c0a56",
|
||||
"id": "63f2aa36fcdc63ee4e18fc37",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "63f2a8e14fb388edd3242527",
|
||||
"title": "Step 45"
|
||||
},
|
||||
{
|
||||
"id": "63f2aa36fcdc63ee4e18fc37",
|
||||
"title": "Step 46"
|
||||
},
|
||||
{
|
||||
"id": "63f2ab4f6c52c5eec6d68de4",
|
||||
"title": "Step 47"
|
||||
"title": "Step 45"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,12 @@ dashedName: step-7
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `team` property, add a new property with a key named `sport` and a string value of `"Football"`.
|
||||
Below the `team` property, add four property key-value pairs.
|
||||
|
||||
1. A key named `sport` and a string value of `"Football"`.
|
||||
2. A key named `year` and a number value of `1986`.
|
||||
3. A key named `isWorldCupWinner` and a boolean value set to `true`.
|
||||
4. A new key called `headCoach` with a value of an empty object.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -23,6 +28,60 @@ Your `sport` property should be set to `Football`.
|
||||
assert.equal(myFavoriteFootballTeam.sport, 'Football');
|
||||
```
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have a `year` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'year');
|
||||
```
|
||||
|
||||
Your `year` property should be a number.
|
||||
|
||||
```js
|
||||
assert.isNumber(myFavoriteFootballTeam.year);
|
||||
```
|
||||
|
||||
Your `year` property should be set to `1986`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.year, 1986);
|
||||
```
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'isWorldCupWinner');
|
||||
```
|
||||
|
||||
Your `isWorldCupWinner` property should be a boolean.
|
||||
|
||||
```js
|
||||
assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner);
|
||||
```
|
||||
|
||||
Your `isWorldCupWinner` property should be set to `true`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true);
|
||||
```
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have a `headCoach` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'headCoach');
|
||||
```
|
||||
|
||||
Your `headCoach` value should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(myFavoriteFootballTeam.headCoach)
|
||||
```
|
||||
|
||||
Your `headCoach` value should be an empty object.
|
||||
|
||||
```js
|
||||
assert.equal(Object.keys(myFavoriteFootballTeam.headCoach).length, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
@@ -1,290 +0,0 @@
|
||||
---
|
||||
id: 63cf91b0ff6e9300ead140cc
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `sport` property, add a new property with a key named `year` and a number value of `1986`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have a `year` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'year');
|
||||
```
|
||||
|
||||
Your `year` property should be a number.
|
||||
|
||||
```js
|
||||
assert.isNumber(myFavoriteFootballTeam.year);
|
||||
```
|
||||
|
||||
Your `year` property should be set to `1986`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.year, 1986);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
Learn Modern JavaScript methods by building 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>Sport: <span id="sport"></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="nickname">Nicknames</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>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
--fcc-editable-region--
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -1,291 +0,0 @@
|
||||
---
|
||||
id: 63cf920228531a0145abd0b3
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `year` property, add a new property with a key named `isWorldCupWinner` and a boolean value set to `true`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'isWorldCupWinner');
|
||||
```
|
||||
|
||||
Your `isWorldCupWinner` property should be a boolean.
|
||||
|
||||
```js
|
||||
assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner);
|
||||
```
|
||||
|
||||
Your `isWorldCupWinner` property should be set to `true`.
|
||||
|
||||
```js
|
||||
assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
Learn Modern JavaScript methods by building 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>Sport: <span id="sport"></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="nickname">Nicknames</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>Sergio Almirón</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 1</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Sergio Batista</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 2</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Bochini</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 3</p>
|
||||
<p>Nickname: El Bocha</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Claudio Borghi</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 4</p>
|
||||
<p>Nickname: Bichi</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Brown</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 5</p>
|
||||
<p>Nickname: Tata</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Daniel Passarella</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 6</p>
|
||||
<p>Nickname: El Gran Capitán</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Burruchaga</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 7</p>
|
||||
<p>Nickname: Burru</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Néstor Clausen</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 8</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>José Luis Cuciuffo</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 9</p>
|
||||
<p>Nickname: El Cuchu</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>(Captain) Diego Maradona</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 10</p>
|
||||
<p>Nickname: El Pibe de Oro</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Jorge Valdano</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 11</p>
|
||||
<p>Nickname: The Philosopher of Football</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Enrique</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 12</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Garré</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 13</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Ricardo Giusti</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 14</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Luis Islas</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 15</p>
|
||||
<p>Nickname: El loco</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Julio Olarticoechea</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 16</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Pedro Pasculli</h2>
|
||||
<p>Position: forward</p>
|
||||
<p>Number: 17</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Nery Pumpido</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 18</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Oscar Ruggeri</h2>
|
||||
<p>Position: defender</p>
|
||||
<p>Number: 19</p>
|
||||
<p>Nickname: El Cabezón</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Carlos Tapia</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 20</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Marcelo Trobbiani</h2>
|
||||
<p>Position: midfielder</p>
|
||||
<p>Number: 21</p>
|
||||
<p>Nickname: Calesita</p>
|
||||
</div>
|
||||
<div class="player-card">
|
||||
<h2>Héctor Zelada</h2>
|
||||
<p>Position: goalkeeper</p>
|
||||
<p>Number: 22</p>
|
||||
<p>Nickname: N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>© freeCodeCamp</footer>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
const teamName = document.getElementById("team");
|
||||
const typeOfSport = document.getElementById("sport");
|
||||
const worldCupYear = document.getElementById("year");
|
||||
const headCoach = document.getElementById("head-coach");
|
||||
const playerCards = document.getElementById("player-cards");
|
||||
const playersDropdownList = document.getElementById("players");
|
||||
--fcc-editable-region--
|
||||
const myFavoriteFootballTeam = {
|
||||
team: "Argentina",
|
||||
sport: "Football",
|
||||
year: 1986,
|
||||
|
||||
};
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -1,28 +1,16 @@
|
||||
---
|
||||
id: 63cf93472de77d01bf8474bf
|
||||
title: Step 10
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `isWorldCupWinner` property, add a new key called `headCoach` with a value of an empty object. Inside that object, add a property with a key of `coachName` and a string value of `"Carlos Bilardo"`. Below that property, add another key called `matches` with a number value of `7`.
|
||||
Inside the headCoach object, add a property with a key of `coachName` and a string value of `"Carlos Bilardo"`. Below that property, add another key called `matches` with a number value of `7`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `myFavoriteFootballTeam` object should have a `headCoach` property.
|
||||
|
||||
```js
|
||||
assert.property(myFavoriteFootballTeam, 'headCoach');
|
||||
```
|
||||
|
||||
Your `headCoach` value should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(myFavoriteFootballTeam.headCoach)
|
||||
```
|
||||
|
||||
Your `headCoach` object should have a `coachName` property.
|
||||
|
||||
```js
|
||||
@@ -310,7 +298,9 @@ const myFavoriteFootballTeam = {
|
||||
year: 1986,
|
||||
isWorldCupWinner: true,
|
||||
--fcc-editable-region--
|
||||
|
||||
headCoach: {
|
||||
|
||||
},
|
||||
--fcc-editable-region--
|
||||
};
|
||||
```
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63d120a05ee93f38353b84c0
|
||||
title: Step 11
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63d1214a0ac7a9389793269b
|
||||
title: Step 12
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63d128eaedcc773d2ded2128
|
||||
title: Step 13
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63d12b9c7aaee43de1ba265d
|
||||
title: Step 14
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e02a333354343b595d64ca
|
||||
title: Step 15
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e0334b7a24bd3c96aca4de
|
||||
title: Step 16
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e036373fc9173d284e165a
|
||||
title: Step 17
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e03b86008bbb3e1c3de846
|
||||
title: Step 18
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e042661ad2663f0d468740
|
||||
title: Step 19
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e050bf935ac341b88326d6
|
||||
title: Step 20
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e05557016dfd45ea49152c
|
||||
title: Step 21
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e05c00b615bb46ac87273a
|
||||
title: Step 22
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e060df21bca347b2d2b374
|
||||
title: Step 23
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e062d6090ebb486a4eda3a
|
||||
title: Step 24
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e949b8327aa2aca2ca8eac
|
||||
title: Step 25
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e94dae6dcedbad73f2f6ee
|
||||
title: Step 26
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e954321b0a77ae4f6d9650
|
||||
title: Step 27
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e95a45dce95baf41dd4f78
|
||||
title: Step 28
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e95e39860dc5b01ebe9be0
|
||||
title: Step 29
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e9667c881b61b1e338d276
|
||||
title: Step 30
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e96938d2a347b2734a1587
|
||||
title: Step 31
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e96eb94c97b6b31ee50f63
|
||||
title: Step 32
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e9718d7d490bb3940d5a0a
|
||||
title: Step 33
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63e9737f686c76b4078a60f4
|
||||
title: Step 34
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f28972973504e7bb58b0b3
|
||||
title: Step 35
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f28ef082d771e8bf71f94a
|
||||
title: Step 36
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f293c804d6f9e9a83ca4c5
|
||||
title: Step 37
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f29804e3ec00ea6fab1ec4
|
||||
title: Step 38
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f29ce62aea65eb041758c8
|
||||
title: Step 39
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f2a0a860790eebe61bf908
|
||||
title: Step 40
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f2a4a8087e6dec8ec47f16
|
||||
title: Step 43
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f2a5f09a785aed155c0a56
|
||||
title: Step 44
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f2a8e14fb388edd3242527
|
||||
title: Step 45
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f2aa36fcdc63ee4e18fc37
|
||||
title: Step 46
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 63f2ab4f6c52c5eec6d68de4
|
||||
title: Step 47
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 641fc88d8fa7127f76e0324f
|
||||
title: Step 41
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 641fcfd468185384ac218b7d
|
||||
title: Step 42
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Reference in New Issue
Block a user