Tutorial

Pomodoro timer com JavaScript

Nível
4 aulas
1h08

Assistir agora

1. Introdução do Pomodoro Timer

Sobre o Tutorial

Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Pomodoro timer com JavaScript.

Descrição do projeto

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.

Seu Instrutor

Ícaro Harry

Codante.io

Aulas

  1. 1.

    Introdução do Pomodoro Timer

    11:36
  2. Implementando a lógica do cronômetro

    26:20
  3. Criando a lista de tarefas

    26:29
  4. Fazendo o deploy do Pomodoro Timer

    03:39