clock
28/03/2021
Contagem regressiva com JavaScript

Se você tem dificuldades em manter o foco para desenvolver algumas atividades, principalmente durante essa pandemia do novo coronavírus, chamado de Sars-Cov-2, uma possível solução é o uso do Método Pomodoro.

O método consiste em manter o foco em uma determinada tarefa durante 25 minutos, sem interrupções. Assim, cada um desses períodos de 25 minutos são um pomodoro. Entre um período e outro, você pode dar pausas para realizar outras tarefas, verificar as redes sociais, se alimentar, etc.

Mesmo já existindo várias aplicações voltadas especificamente para esse método, você pode criar seu próprio contador para utilizar não só nessa tarefa, mas em quaisquer outras que você desejar. E, para isso, é possível trabalhar com JavaScript para desenvolver uma pequena aplicação para realizar a contagem regressiva.

O código a seguir possui duas funções: start(), que é chamada por um botão, captura o valor informado pelo usuário e inicia a contagem, a partir da execução da segunda função; updateCountdown(), que decrementa o tempo, atualiza o campo para exibir o novo valor e verifica se o tempo foi encerrado, para disparar um alerta.

<script>
    let startingMinutes = 25;
    let time = startingMinutes * 60;
    let countdownEl = document.getElementById('clock');
    let check;

    function start() {
        startingMinutes = document.getElementById('time').value;
        time = startingMinutes * 60;

        document.getElementById('time').value = '';

        check = setInterval(updateCountdown, 1000);
    }

    function updateCountdown() {

        if (time < 0) {
            alert("Acabou!");
            clearInterval(check);
        } else {
            const minutes = Math.floor(time / 60);
            let seconds = time % 60;
            seconds = seconds < 10 ? '0' + seconds : seconds;
            countdownEl.innerHTML = `${minutes}:${seconds}`;
            time--;
        }
    }
</script>

Faça o teste:

Digite quantos minutos:

Gostou?
Veja um exemplo melhor lá no github:
- https://ciromoura.github.io/js-countdown/

Para mais informações, acesse:
- https://www.escolaconquistadora.com.br/blog/metodo-de-estudo-pomodoro/
- https://pt.wikipedia.org/wiki/T%C3%A9cnica_pomodoro
Material complementar:
- https://www.youtube.com/watch?v=x7WJEmxNlEs
- https://www.codingnepalweb.com/2020/08/digital-clock-with-colorful-glowing-effect.html

Postagens relacionadas
Trabalhando com Cookies apenas utilizando JavaScript Ver

Trabalhando com Cookies apenas utilizando JavaScript. Exemplo de como salvar e acessar dados armazenados. Link para repositório e página com demonstração de como trabalhar com mudança de tema.

Gerador de senhas Ver

Este é um simples gerador de senhas. Preencha os campos de acordo com o tipo de senha que você desenha gerar. É possível copiar para sua área de transferência e assim você pode usar em outro formulário, em outro site. Lembre de salvar em algum outro lugar, não adianta gerar a senha perfeita e esquecer […]

Máscaras JavaScript em Strings e campos de formulário Ver

Criar máscaras em campos de texto é algo bastante útil em diferentes contextos, tais como filtrar o que o usuário digitará nos campus ou aplicar determinados formatos aos dados que serão exibidos. Há várias ferramentas disponíveis para auxiliar nessa tarefa, muitas utilizando a linguagem JavaScript. Ela possui uma método chamado replace, que substitue um valor […]