Esse desáfio prático consiste em desenvolver um player de músicas, para isso você usará o layout figma que se encontra nesse link.
Caso você queira importar o arquivo do figma no seu computador, ele está nessa pasta com o nome Cubos Player.fig
Os detalhes do que você precisará desenvolver está nos vídeos introdutórios da aula...
... mas o layout que você irá encontrar no figma é esse:
- Quando clicar na imagem de uma música, a música deve ser iniciada;
- Deve mostrar no player o nome e o artista da música que está tocando;
- Se pressionar no botão de pause, a música deve parar;
- Se pressionar novamente no botão de pause, a música deve continuar;
- Se pressionar o botão de avançar, trocar para a próxima música;
- Se pressionar o botão de retroceder, trocar para a música anterior;
- Se pressionar o botão de parar, parar de tocar a música;
- Fazer o layout o mais fiel possível com a proposta do figma, porém, você pode fazer alguns ajustes pessoais se quiser, para deixar o projeto mais com sua cara;
- Calcular e mostrar o tempo restante da música de acordo com a música que está tocando;
- Fazer a barra de progresso da música;
- Se pressionar o botão de avançar e segurar, avançar no tempo da música;
- Se pressionar o botão de retroceder e segurar, retroceder no tempo da música;
Não sabe por onde começar? Que tal começar olhando o que já existe dentro do projeto, após isso pense no projeto final e defina pequenas tarefas para chegar a esse resultado.
No desafio será necessário:
- Criar e manipular estado
- Criar e manipular referências
- Utilizar eventos de clique
- Passar propriedades
- Importar imagens
- Executar uma ação várias vezes de tempo em tempo
- Importar dados do arquivo json
- Procurar itens
As duas aulas anteriores são as mais importantes para você conseguir desenvolver esse projeto.
Preencha a checklist para fazer os exercícios:
- Fazer o fork do repositório para sua conta
- Executar
git clonedo seu fork no terminal para clonar o repositório, ou clonar de outra maneira - Após fazer e commitar todos os exercícios fazer o
git pushpara seu fork - Copiar a url do seu fork e enviar na plataforma