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).
- 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).
- 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.
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.
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.
- Faça o deploy da sua solução e submeta no Codante.
- 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.
Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.
- HTML, CSS e JavaScript.
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.
Sim! Apesar do objetivo principal desse projeto ser exercitar suas habilidades com CSS puro, fique à vontade para utilizar as ferramentas que desejar.