Desenvolvido com JavaScript, HTML e CSS, este cronômetro tem como objetivo ajudar na gestão do tempo utilizando a técnica Pomodoro. Ele alterna ciclos de foco e descanso para melhorar a produtividade. A aplicação utiliza manipulação de DOM, controle de tempo com 'setInterval' e lógica de estados para gerenciar as sessões de trabalho e descanso.
A técnica Pomodoro é um método de gestão de tempo que consiste em alternar períodos de trabalho focado com pausas. O objetivo é melhorar a concentração e a produtividade O processo é simples:
- Escolha uma tarefa.
- Trabalhe nela por 25 minutos (um pomodoro).
- Faça uma pausa curta (5 minutos).
- A cada 4 pomodoros, faça uma pausa mais longa (15-30 minutos).
Essa abordagem ajuda a manter o foco e evita o esgotamento mental.
- 🎯 Início do ciclo de foco (25 minutos).
- ⏸️ Pausar e retomar o cronômetro.
- 🔄 Resetar o tempo a qualquer momento.
- 😌 Timer de descanso proporcional ao número de sessões completadas. A cada 4 ciclos o tempo de descanso é de 30 minutos.
- ⏲️ Permite ao usuário ajustar a duração do ciclo de foco, personalizando os minutos conforme sua preferência.
- 🔔 Alerta sonoro ao término de um ciclo.
- 🧠 Lógica de estados: controle de sessões, pausas e descanso.
- 📱 Interface responsiva e estilizada com CSS
- HTML5
- CSS3
- JavaScript
| Botão | Função |
|---|---|
Start! |
Inicia o cronômetro de 25 minutos. |
Pause/Resume |
Pausa ou retoma o tempo atual. |
Reset |
Interrompe o tempo atual e reinicia o contador para 25:00. |
Take a rest |
Inicia o tempo de descanso proporcional aos ciclos concluídos (5min/ciclo). |
Set time |
Altera o tempo da sessão para a quantidade de minutos desejada. |
Este projeto foi desenvolvido com base no tutorial do blog da Codedex.io, e adaptado com funcionalidades adicionais e melhorias na lógica de controle de tempo e layout.
Você pode acessar o projeto online através deste link:
🔗 Pomodoro Timer - Acesse aqui
Feito com 💻 e ☕ por @giordanamartins