Como fazer um Pomodoro Timer usando Angular em Typescript

Depois de ter procurado muito na internet (até no ChatGPT) não consegui achar algo concreto de como fazer um Timer Pomodoro que é uma técnica bastante usada por estudantes onde você estuda 25 minutos e descansa 5 minutos, assim atraindo mais produtividade (claro que vai de pessoa pra pessoa).

É um projetinho muito bacana pra quem está começando a aprender Angular e/ou TypeScript.

Sem muita delonga, bora lá!

Primeiro vamos criar o projeto dentro do diretório de sua escolha:

ng new pomodoro-timer

Nesse projeto eu usei bootstrap para estilização:

npm i bootstrap bootstrap-icons / yarn add bootstrap bootstrap-icons

No seu component.html podemos

<div class="container">
    <div class="wrapper">
        <div class="d-flex flex-column align-items-center justify-content-center">
            <div class="d-flex flex-row mt-3 justify-content-between w-100">
                <button (click)="decreaseMinutes()" class="btn btn-light btn-sm"><i class="bi bi-dash"></i></button>
                <h1>{{ minutes }}:{{ seconds === 0 ? '00' : seconds }}</h1>
                <button (click)="increaseMinutes()" class="btn btn-light btn-sm"><i class="bi bi-plus"></i></button>
            </div>
            <div class="d-flex mt-3">
                <button (click)="startTimer()" class="btn btn-dark me-2">Start Timer</button>
                <button (click)="stopTimer()" class="btn btn-outline-dark">Stop Timer</button>
            </div>
            <div class="d-flex flex-column mt-3 w-100">
                <button (click)="restartTimer()" class="btn btn-outline-dark w-100">re-start</button>
            </div>
        </div>
    </div>
</div>

Hora da Lógica!!! Dentro do nosso component.ts primeiro declaramos duas constantes, uma para minutos e outra para os segundos:

minutes: number = 25
seconds: number = 0

Logo em seguida podemos criar nossas funções de iniciar o timer, aumentar e diminuir o tempo, parar e reiniciar:

increaseMinutes(){
  this.minutes = this.minutes + 1
}

decreaseMinutes(){
  this.minutes = this.minutes - 1
}

startTimer() {
  this.intervalId = setInterval(() => {
    if (this.seconds > 0) {
      this.seconds--;
    } else if (this.minutes > 0) {
      this.minutes--;
      this.seconds = 59;
    }
  }, 1000);
}

stopTimer() {
  clearInterval(this.intervalId);
}

restartTimer(){
  this.minutes = 25
  this.seconds = 0
} 

Para rodar no localhost:4200, vá no seu terminal e inicie o server com:

ng s

Se você quiser que o timer inicie junto com a página quando carregada, apenas coloque a função de iniciar o timer dentro do ngOnInit dessa forma:

ngOnInit() {
  startTimer()
}

Agora é só usar! Bons estudos.

Obs.: talvez para a frente eu venha fazer upgrades nesse código, não tem uma estrutura ainda, mas foi realmente pra ser algo rápido e eficaz, aceito e fico aberto a melhorias. O repositório com o código é: https://github.com/user-matth/pomodoro-timer fique a vontade!