Pomodoro timer com JavaScript

Construa o seu próprio cronômetro de estudos. Nesse mini projeto você irá utilizar apenas HTML, CSS e JavaScript para criar um cronômetro para dividir seus estudos em períodos de 25 minutos, separados por breves intervalos, baseado na Técnica Pomodoro que é um método de gerenciamento de tempo (mais informações sobre a Técnica Pomodoro aqui).

🔨 Requisitos

• Utilize apenas HTML, CSS e JavaScript.
• O cronômetro deverá possuir 3 botões:
  • Botão "Pomodoro" para contagem de 25 minutos.
  • Botão "Intervalo Curto" para contagem de 05 minutos.
  • Botão "Intervalo Longo" para contagem de 25 minutos.
• Exiba a contagem do cronômetro (que deverá ser regressiva).
  • O campo deve ter como valor padrão 25:00 e alterar conforme o tipo de contagem selecionada.
  • Ele deverá partir do valor inicial e chegar até 00:00.
• Exiba o Botão "Começar" para iniciar a contagem.
  • Ao clicar no botão, a contagem do cronômetro deve acontecer de acordo com o tipo de contagem selecionado (pomodoro, intervalo curto ou intervalo longo).

🔨 Desafio extra para quem quer ir além

• Input para adicionar novas tarefas.
• Exibir a lista de tarefas adicionadas.
  • A lista deve persistir quando a página for fechada e aberta novamente.
• Opção para excluir tarefas da lista de tarefas.
• Mostrar no titulo do site o cronômetro de acordo com o tipo de contagem selecionada.
• Colocar quantidade de pomodoros feitos.

💻 Setup do projeto

O projeto com o design inicial já estará disponível para você na branch principal do repositório. Sua responsabilidade será apenas implementar a lógica referente à contagem do cronômetro e adição na lista de tarefas.

"Mas eu quero me desafiar e construir todo o design do zero"

Neste caso, criamos uma versão em branco do projeto na branch blank_project para que você possa personalizar a página do jeito que quiser! É importante lembrar que, ao fazer o fork no GitHub, é preciso desmarcar a opção que diz 'copiar somente a parte principal' para ter acesso a essa versão em branco.

Deploy

• Faça o deploy da sua solução e submeta no Codante.

🔍 Dicas

• Estude a manipulação do DOM com JavaScript para criar e modificar elementos na página.
• Entenda o funcionamento de eventos e como utilizá-los através do DOM com JavaScript.
• Estude sobre armazenamento local (localStorage) para um domínio específico.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

Tecnologias sugeridas

• HTML, CSS e JavaScript.

❓ FAQ

Posso utilizar React ou outras bibliotecas?

Você pode utilizar as ferramentas que desejar para implementar esse projeto. Porém, o objetivo principal aqui é exercitar os fundamentos de HTML, CSS e JavaScript, e a resolução oficial será implementada dessa maneira.

Posso utilizar frameworks de estilo?

Sim! Apesar do objetivo principal desse projeto ser exercitar suas habilidades com CSS puro, fique à vontade para utilizar as ferramentas que desejar.