lab-football-team-cards
Voltar Ă  Trilha
InstruçÔes

Crie um conjunto de cartÔes de times de futebol

Neste laboratĂłrio, vocĂȘ irĂĄ construir um conjunto de cartĂ”es de times de futebol. O usuĂĄrio deve ser capaz de usar o menu suspenso e filtrar entre os diferentes jogadores com base em suas posiçÔes. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratĂłrio. HistĂłrias de UsuĂĄrio: 1. VocĂȘ deve criar um objeto footballTeam com as seguintes propriedades: team, year, headCoach, players. 1. A propriedade team deve conter o nome da equipe como uma string. 1. A propriedade year deve conter o ano como um nĂșmero. 1. A propriedade headCoach deve conter o nome do treinador principal como uma string. 1. A propriedade players deve ser um array contendo pelo menos quatro elementos. 1. Cada elemento no array players deve ser um objeto com as propriedades name, position, isCaptain. 1. A propriedade name deve conter o nome do jogador como uma string. 1. A propriedade position deve ter um dos seguintes valores: "forward", "midfielder", "defender" ou "goalkeeper". 1. A propriedade isCaptain deve ter valor booleano. Um dos jogadores deve ter sua propriedade isCaptain definida como true. 1. VocĂȘ deve exibir os valores headCoach, team e year na pĂĄgina. Esses valores devem ser exibidos nos elementos HTML com os valores de id head-coach, team e year. 1. VocĂȘ deve exibir os dados dos jogadores na pĂĄgina dentro do elemento #player-cards, cada jogador deve ser exibido em um div com a classe player-card, e aninhado nele, um h2 contendo o nome do jogador e (Captain) no caso do jogador ser capitĂŁo, e um p contendo Position: e a posição do jogador. Aqui estĂĄ um exemplo de como o HTML deve ser: 
<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. Quando o menu suspenso é usado para selecionar uma das posiçÔes, apenas os elementos .player-card dos jogadores dessa posição devem estar presentes. Se a opção "Todos os Jogadores" for selecionada, então todos os jogadores devem ser exibidos na pågina.

O que fazer:

Testes:

  • VocĂȘ deve ter uma variĂĄvel `footballTeam`.
  • A variĂĄvel `footballTeam` deve ser um objeto com quatro propriedades: `team`, `year`, `headCoach` e `players`.
  • A propriedade `team` deve ser uma string.
  • A propriedade `year` deve ser um nĂșmero.
  • A propriedade `headCoach` deve ser uma string.
  • A propriedade `players` deve ser um array com pelo menos quatro objetos, cada objeto deve conter as chaves `name`, `position`, `isCaptain`.
  • A propriedade `name` deve ter um valor do tipo string.
  • A propriedade `position` deve ter um dos valores `"forward"`, `"midfielder"`, `"defender"` ou `"goalkeeper"`.
  • A propriedade `isCaptain` deve ter valor booleano, e deve haver apenas um capitĂŁo.
  • VocĂȘ deve exibir os valores `headCoach`, `team` e `year` do objeto `footballTeam` nos elementos HTML com os valores de `id` `head-coach`, `team` e `year`.
  • Quando a opção `Todos os Jogadores` estiver selecionada, todos os jogadores devem estar presentes dentro de `#player-cards`.
  • Quando a opção `Position Forward` estiver selecionada, apenas jogadores de ataque devem estar presentes dentro de `#player-cards`.
  • Quando a opção `Position Midfielder` estiver selecionada, apenas jogadores meio-campistas devem estar presentes dentro de `#player-cards`.
  • Quando a opção `Position Defender` estiver selecionada, apenas jogadores defensores devem estar presentes dentro de `#player-cards`.
  • Quando a opção `Position Goalkeeper` estiver selecionada, apenas jogadores goleiros devem estar presentes.
Preview