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