Principais pontos abordados nesse desafio:
- Posicionamento utilizando grid;
- Implantar lógica javascript na web;
- Manipulação de svg pelo js;
- Trabalhar com a DOM,
- Criação de Dark-Mode;
- Trabalhar com o volume dos sons de cada card;
- Trabalhar com eventos,
- Acesso a métodos e atributos de objetos de eventos,
- Object Destructuring
- Injeção de Dependências,
- Factory pattern,
- Modularização,
- Refatoração
Aqui neste link você tem acesso ao Figma do projeto**.**
WebGL não está ativado no seu navegador, siga esses passos.
O resultado final desse desafio deve ser algo em torno de:
Nesse desafio, criamos uma aplicação do tipo Pomodoro (timer de foco), onde, usando os botões + e -, aumentamos ou diminuímos o tempo do temporizador em 5 minutos. Adicionamos também cards do lado direito, que, ao serem selecionados, mudam de cor e emitem sons diferentes. O som e a cor dos cards funcionam em sincronia com o temporizador. Por fim, incluímos na aplicação o 'Dark Mode', onde o ícone muda de acordo com o Modo e é possível alternar entre 'light mode' e 'dark mode'. Há também uma barra de volume para cada card.
Este temporizador tem por finalidade a aplicação da técnica Pomodoro, uma técnica excelente para ser aplicada durante seus estudos. Nesta aplicação, também estão inseridas quatro áudios para ouvir junto, enquanto o cronômetro roda. Esses áudios são de sons ambientes para ajudar na eliminação de ruídos externos e manter o seu foco apenas na sua atividade.
O Pomodoro consiste em um ciclo de duas horas. A cada 25 minutos, sem interrupções, dedicado a uma tarefa, você deve fazer uma pausa de 5 minutos. Ao final do ciclo de duas horas, você deverá fazer uma pausa maior de 30 minutos e depois começar um novo Pomodoro.
Nesta aplicação temos por padrão o tempo de 25 minutos em seu display, funcionando através do método "setTimeout()" em seu código. E sempre que apertar o botão "Stop", o temporizador reiniciará para os 25 minutos de padrão e aguardará o comando para iniciar uma nova contagem.
- Botões "Play" e "Pause", alternam suas posições, iniciando a contagem regressiva e interrompendo o tempo, respectivamente;
- Botão "Stop" resetando o temporizador e e desativanddo todos os botões de controle pressionados;
- Botão "(+)" para adicionar 5 minutos, e botão "(-)", que removerá 5 minutos do temporizador.
Ao lado, possuem cada um, um áudio em loop, de som ambiente do seu respectivo card.
São eles:
- Floresta;
- Chuva;
- Cafeteria;
- e Lareira.
Ao clicar em qualquer um dos cards, o "soundOff" (mute) é desativado e ativa-se o respectivo áudio selecionado. O mesmo procedimento vale para qualquer um dos 4 cards. E ao clicar novamente no botão soundOff, desativa-se novamente o áudio que estiver sendo reproduzido.
Também existe o áudio padrão de botão pressionado, para qualquer um dos botões da aplicação.
Quando o contador chegar em zero, será reproduzido o alarme do áudio KitchenTimer, informando ao usuário que o seu tempo inserido chegou ao fim.
Esse projeto é uma versão otimizada do Focus Timer Pomodoro, contendo duas novas funcionalidades:
- Dark Mode;
- Controle de volume.
No topo da página, encontra-se o botão dark-mode/light-mode, onde ao clicá-lo, muda-se o tema da aplicação, intercalando em tema claro e escuro, mantendo-se o mesmo layout, mas com personalizações de cores distintas.
Foi adicionado também em cada card, um input de volume próprio para cada um deles, totalmente independentes. A aplicação inicia com o som desligado, indicado pelo seu botão "soundOff" (mute) pressionado.
Este é um projeto desenvolvido em treinamento, juntamente com a
Rocketseat 🚀
no decorrer do programa Explorer.
📅 Início: 17.02.2023
📅 Conclusão: 21.02.2023
🕛 Status: Concluído✔️
🌎 Result Preview: https://pomodorodarkmode.netlify.app/