All Tracks/lab football team cards/
Đang tải...
Hướng dẫn thử thách
1 / 1

Build a Set of Football Team Cards

In this lab, you will build a set of football team cards. The user should be able to use the dropdown menu and filter between the different players based on their positions. **Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should create a `footballTeam` object with the following properties: `team`, `year`, `headCoach`, `players`. 1. The `team` property should contain the name of the team as a string. 1. The `year` property should contain the year as a number. 1. The `headCoach` property should contain the name of the head coach as a string. 1. The `players` property should be an array containing at least four elements. 1. Each element in the `players` array should be an object with properties `name`, `position`, `isCaptain`. 1. The `name` property should contain the name of the player as a string. 1. The `position` property should have one of the following values: `"forward"`, `"midfielder"`, `"defender"`, or `"goalkeeper"`. 1. The `isCaptain` property should have value of a boolean. One of the players should have their `isCaptain` property set to `true`. 1. You should display the `headCoach`, `team` and `year` values on the page. These values should be displayed in the HTML elements with the `id` values of `head-coach`, `team` and `year`. 1. You should display the players data on the page inside the `#player-cards` element, each player should be displayed in a `div` with class of `player-card`, and nested in it, an `h2` containing the name of the player, and `(Captain)` in case of the player being captain, and a `p` containing `Position:` and the position of the player. Here is an example of how the HTML should look like: ```html <div class="player-card"> <h2>Sergio Batista</h2> <p>Position: midfielder</p> </div> <div class="player-card"> <h2>(Captain) Diego Maradona</h2> <p>Position: midfielder</p> </div> ``` 1. When the dropdown menu is used to select one of the positions, only the `.player-card` elements for players of that position should be present. If the `"All Players"` option is selected, then all of the players should display on the page.
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.html
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.