Exercícios: Fetch API

Para cada exercício abaixo crie um repositório com o nome indicado, e publique um site usando o GitHub Pages que atenda ao requisito indicado.

👀 Atenção: Alguns exercícios podem solicitar a criação de um repositório baseado em template. Faça dessa maneira.

O requisito pode ser indicado por uma lista de afazeres, por uma ou mais imagens de referência, ou por ambos.

---

Exercício FraseDoDia

Ao carregar a página, exiba uma frase do dia (e seu autor) obtida da API pública do QuoteGarden.

As frases desta API estão em inglês, exiba-as assim mesmo.

• Endpoint: https://quote-garden.onrender.com/api/v3/quotes/random
  • data[0].quoteText contém o texto da frase;
  • data[0].quoteAuthor contém o autor da frase.

Estilize livremente.

Não recomendamos o uso de imagens as quais você não tenha direito de uso. Este curso se exime de qualquer responsabilidade referente a danos causados à terceiros em trabalhos criados por alunos.

---

Exercício PesquisaCEP

Utilize a API pública Postmon para preencher um formulário com o endereço associado a um CEP digitado pelo usuário.

• Endpoint: https://api.postmon.com.br/v1/cep/CEPDESEJADO
  • Exemplo com o CEP 11730-000, que não possui logradouro.
  • Exemplo com o CEP 05001-100, que possui logradouro.
    • cidade contém o nome da cidade;
    • estado contém a sigla da UF;
    • logradouro contém o nome do logradouro;
    • bairro contém o bairro;
    • complemento contém informações adicionais.

Libere para digitação somente os campos não preenchidos pela API, e inclua um campo para o número do logradouro.

Não recomendamos o uso de imagens as quais você não tenha direito de uso. Este curso se exime de qualquer responsabilidade referente a danos causados à terceiros em trabalhos criados por alunos.

---

Exercício Bandas

Utilize a API pública do MusicBrainz para criar uma página com a seguinte funcionalidade:

Crie um campo de busca, no qual o usuário pode digitar o nome de uma banda/artista. Exiba informações sobre a banda encontrada.

• Endpoint: https://musicbrainz.org/ws/2/artist?fmt=json&query=BANDA
  • Exemplo com a banda U2
  • Exemplo com o cantor Frank Sinatra
  • Exemplo com a banda brasileira Barão Vermelho
  • count contém o número de resultados encontrados;
  • artists contém uma lista dos resultados. Use artists[0] para pegar somente o primeiro, contendo:
    • name contém o nome completo do artista;
    • area.name contém o local de origem da banda;
    • ["life-span"].ended contém um boolean indicando se o artista não está mais na ativa;
    • id contém o identificador do artista no MusicBrainz.

Bônus: Exiba também uma tabela com os trabalhos criados pelo artista.

Endpoint: https://musicbrainz.org/ws/2/release-group?fmt=json&artist=ID-DO-ARTISTA

• Exemplo com Metallica
• ["release-groups"] contém um arranjo com os trabalhos, contendo cada um:
  • title, com o título do trabalho;
  • ["first-release-date"], com o ano do trabalho.

Não recomendamos o uso de imagens as quais você não tenha direito de uso. Este curso se exime de qualquer responsabilidade referente a danos causados à terceiros em trabalhos criados por alunos.

---

Exercício Pokedex

Use a PokeAPI para exibir a imagem de um pokémon geração I, aleatório.

Para isso, sorteie um número entre 1 e 151 e use no endpoint abaixo.

Endpoint: https://pokeapi.co/api/v2/pokemon/NOME-OU-NUMERO-DO-POKEMON

• Exemplo para Pikachu, código 25
• Exemplo para Magikarp, código 129
• name contém o nome original do pokémon;
• sprites.other["official-artwork"].front_default contém a URL da imagem a ser exibida.

Não recomendamos o uso de imagens as quais você não tenha direito de uso. Este curso se exime de qualquer responsabilidade referente a danos causados à terceiros em trabalhos criados por alunos.

---

Exercício TVShowsSearch

Utilize este template e a API pública do TV Maze para exibir programas de TV com o nome similar ao texto digitado pelo usuário.

• Endpoint: https://api.tvmaze.com/search/shows?q=TERMODESEJADO
  • Exemplo buscando por star
  • Exemplo buscando por war
  • O resultado contém um arranjo de programas encontrados:
    • show.name contém o nome do programa;
    • show.image.medium contém o URL da foto de capa do programa, em qualidade média.

Você pode alterar a marcação e a estilização à vontade.

Não recomendamos o uso de imagens as quais você não tenha direito de uso. Este curso se exime de qualquer responsabilidade referente a danos causados à terceiros em trabalhos criados por alunos.

---

🏁 Orientações para entrega (alunos do curso presencial)

Confira no Teams o link da tarefa equivalente. Lá você postará o link do repositório no GitHub site publicado, um para cada exercício.

Repositório de exemplo: Exercício hello-dev-web (Marcação HTML)

Exemplo de link a ser postado: https://ermogenes.github.io/hello-dev-web