Crie um 🍅 Pomodoro Timer com HTML, CSS e Vanilla JavaScript

Começando

Vamos começar criando a estrutura HTML do timer Pomodoro. O cronômetro contará com três botões, a saber:

• Botão do cronômetro Pomodoro
• Botão de pausa curta
• Botão de pausa longa

Teremos também um display para cada duração do cronômetro e botões de controle para iniciar e parar o cronômetro.

HTML e CSS

A estrutura e o estilo do temporizador são relativamente simples; cores e layout adequados, elementos de contêiner com classes e IDs para direcioná-los adequadamente. Explicarei o que são todos quando mergulharmos no JavaScript, porque é aí que acontece o verdadeiro aprendizado neste tutorial!

Funcionalidade JavaScript

Como mencionei, o aspecto mais importante deste cronômetro é a funcionalidade JavaScript. Comece obtendo os IDs de todos os elementos do botão do cronômetro e atribuindo-os a variáveis.

1

let pomodoro = document.getElementById("pomodoro-timer");

2

let short = document.getElementById("short-timer");

3

let long = document.getElementById("long-timer");

Por padrão, quando um usuário abre o aplicativo de cronômetro Pomodoro, queremos mostrar a exibição do cronômetro de 25 minutos; então vamos criar uma função chamada showDefaultTimer() isso mostrará apenas a tela do cronômetro Pomodoro e ocultará as outras telas.

1

function showDefaultTimer() {

2

    pomodoro.style.display = "block";

3

    short.style.display = "none";

4

    long.style.display = "none";

5

   }

6

7

 showDefaultTimer()

Aqui, estamos usando a propriedade display CSS para alterar a visibilidade das exibições do cronômetro. Os elementos de exibição curto e longo ficarão ocultos, enquanto a exibição do Pomodoro ficará visível. Por fim, chamamos o showDefaultTimer() função para garantir que a funcionalidade seja aplicada aos elementos quando o HTML for carregado.

Ouvintes de eventos

A seguir, criaremos ouvintes de eventos para ouvir eventos de clique em cada botão do cronômetro. Comece declarando uma variável currentTimer e defina seu valor como nulo. O currentTimer designará o cronômetro atualmente em execução.

1

 let currentTimer =null;

A seguir, crie ouvintes de eventos que serão acionados quando um usuário clicar nos botões.

1

document.getElementById("pomodoro-session").addEventListener("click", function(){

2

    hideAll();

3

    pomodoro.style.display = "block"

4

    currentTimer = pomodoro   

5

6

});

7

8

document.getElementById("short-break").addEventListener("click", function(){

9

    hideAll();

10

    short.style.display = "block"

11

    currentTimer =short

12

13

14

});

15

document.getElementById("long-break").addEventListener("click", function(){

16

    hideAll();

17

18

    long.style.display = "block"

19

    currentTimer =long

20

21

});

Os ouvintes de eventos serão acionados quando um usuário clicar nos temporizadores do botão. Por exemplo, quando um usuário clica no botão de intervalo curto, o usuário verá 5:00 exibido e o restante das exibições ficará oculto. Também definirá o valor de currentTimer para o temporizador de intervalo curto.

Ocultar os temporizadores

O hideAll() A função ocultará todos os temporizadores. Como todos os temporizadores são representados pelo mesmo nome de classe, “timer-display”, usamos document.querySelectorAll(".timer-display") para selecionar e iterar através de cada elemento e definir o style.property para nenhum, tornando os elementos invisíveis.

1

function hideAll(){

2

    let timers = document.querySelectorAll(".timer-display");

3

    timers.forEach(timer=> timer.style.display ="none")  

4

};

Funcionalidade de início do temporizador

JavaScript fornece o setInterval() função que nos permite chamar uma função após um tempo especificado. O setInterval() função repete uma função após um determinado período. A sintaxe é semelhante a esta:

1

setInterval(code, delay)

Por exemplo, no nosso caso, queremos diminuir um temporizador em 1 segundo. Vamos criar um startTimer() função que levará a duração do currentTimer()inicie uma contagem regressiva e atualize a exibição com o tempo restante.

1

let myInterval = null;

2

3

function startTimer(timerdisplay){

4

5

    timerDuration = timerdisplay.getAttribute("data-duration").split(":")[0]

6

    let durationinMiliseconds = timerDuration*60*1000;

7

    let endTimestamp = Date.now() + durationinMiliseconds;

8

9

}

Vamos detalhar o que está acontecendo aqui:

• let myInterval = null; declara uma variável e a inicializa com um valor nulo.
• Dentro do startTimer() ,function:timerDuration = timerdisplay.getAttribute("data-duration").split(":")[0];– recupera a duração do currentTimer; por exemplo, se a duração do elemento for 25:00, o valor extraído será 25,
• let durationinMiliseconds = timerDuration*60*1000; – converte a duração do temporizador em milissegundos
• let endTimestamp = Date.now() + durationinMiliseconds; – declara uma variável endTimestampque é igual ao carimbo de data/hora em que o cronômetro terminará.

Crie o cronômetro

A seguir, criaremos nosso cronômetro usando o setInterval() método. Nosso setInterval() O método conterá uma função que usará o tempo restante e será executada a cada 1 segundo (1000 milissegundos) até que o tempo restante acabe. Também atualizaremos nossa exibição com o tempo restante a cada segundo. Quando o cronômetro chegar a 0, exibiremos 00:00 e tocaremos um som de alarme.

Atualize o startTimer () funcionar assim:

1

function startTimer(timerdisplay) {

2

    if (myInterval) {

3

        clearInterval(myInterval);

4

    }

5

6

    timerDuration = timerdisplay.getAttribute("data-duration").split(":")[0];

7

    console.log(timerDuration);

8

9

    let durationinmiliseconds = timerDuration * 60 * 1000;

10

    let endTimestamp = Date.now() + durationinmiliseconds;

11

12

13

    myInterval = setInterval(function() {

14

        const timeRemaining = new Date(endTimestamp - Date.now());

15

16

17

18

        if (timeRemaining <= 0) {

19

20

            clearInterval(myInterval);

21

            timerdisplay.textContent = "00:00";

22

            const alarm = new Audio("https://www.freespecialeffects.co.uk/soundfx/scifi/electronic.wav");

23

            alarm.play();

24

        } else {

25

            const minutes = Math.floor(timeRemaining / 60000);

26

            const seconds = ((timeRemaining % 60000) / 1000).toFixed(0);

27

            const formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`;

28

            console.log(formattedTime);

29

            timerdisplay.textContent = formattedTime;

30

        }

31

    }, 1000);

32

}

Dentro de myInterval() função, declaramos uma variável timeRemaining isso é igual ao tempo restante após o início do cronômetro. Em seguida, verificamos se o timeRemaining é menor ou igual a 0. Se válido, limpamos o cronômetro com o clearInterval() função, que usa o id do intervalo como argumento e limpa o cronômetro em execução. Também atualizamos a hora exibida para 00:00 e tocamos um alarme sonoro para informar ao usuário que o cronômetro atingiu 0.

Se timeRemaining for maior que 0, fazemos o seguinte.

• const minutes = Math.floor(timeRemaining / 60000);: converte o tempo restante em minutos
• const minutes = ((timeRemaining%60000) /1000).toFixed(0);: converte o timeRemaining para segundos
• const formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`;: formata o tempo restante no formato “MM:SS”
• timerdisplay.textContent=formattedTime;: atualiza o conteúdo do texto da exibição do cronômetro com a hora formatada.

Quando o startTimer() é chamado, ele atualiza o tempo exibido a cada segundo para criar nossa contagem regressiva do cronômetro.

Botão de início

Para que o cronômetro exiba uma contagem regressiva, ele precisa ser executado dentro do ouvinte do evento start click. Adicione um ouvinte de clique ao botão Iniciar e execute o startTimer() função.

1

document.getElementById("start").addEventListener("click", function () {

2

    if(currentTimer){

3

        startTimer(currentTimer);

4

    }

5

});

1

function startTimer(timerdisplay){

2

  if (myInterval) {

3

         clearInterval(myInterval); 

4

        }

5

         // the rest of the code here

6

7

    }

1

document.getElementById("pause").addEventListener("click", function () {

2

    if(currentTimer){

3

        clearInterval(myInterval); 

4

        }

5

});