Esse projeto é um temporizador no estilo pomodoro com modo escuro e controle de volume dos sons.
-
O projeto está finalizado, mas talvez tenha melhorias no futuro.
-
Esse projeto é uma versão mais avançada do Focus Timer 2.0 por isso boa parte do projeto foi trazida para cá.
-
Para testar o projeto basta CLICAR AQUI!
-
O layout foi baseado nesse projeto do figma.
Este é um dos projetos propostos no programa Explorer da Rocketseat, os detalhes estão aqui, mas basicamente é apresentado um temporizador onde o usuário pode aumentar e diminuir uma contagem regressiva, e ao final desse tempo tocará um alarme.
Além de melhorar exercitar o HTML, CSS e Git, o projeto tem a intenção de trabalhar com alguns conceitos do clean code, para melhor entendimento do código, e experimentar a utilização de alguns conteúdos mais avançados do JS:
- Desestruturação;
- Injeção de dependências;
- Modularização;
- Objetos com o padrão factory.
- HTML - usada para fazer a estrutura do conteúdo;
- CSS - utilizada para fazer a estilização dos elementos;
- JS - usada para fazer a interatividade da página;
- Git - utilizada para realizar o versionamento do código.
- Iniciar uma contagem regressiva;
- Parar o temporizador;
- Adicionar sons aos cards;
- Mudar o volume do som
- O som deverá ser ativado/desativado se o usuário clicar no card;
- O controle de volume funciona apenas se o card está ativado;
- Aumentar o temporizador;
- Diminuir o temporizador;
- Adicionar som quando o temporizador for encerrado.
- Escolher entre o tema claro e o escuro.
Feito com ❤️ por Dev Gustavo Santos 😀 Veja meu LinkedIn.