[Sugestão] Implementação do Reset do temporizador.

Refazendo o código, para aprendizado, me desafiei a criar um botão que resetasse o temporizador e voltasse para o front o tempo do modo que estava na tela.

adicionei no htm um botão com a mesma classe do começar/pausar, e defini um id novo para ele, assim poderia acessar ele em específico para adicionar um evento de "click"e passar para que quando ele fosse clicado, ele verificasse qual data-contexto estava, definisse o tempo decorrido para o mesmo do inicial de cada opção, ai chamei a função de resetar e logo em seguida chamei a de mostrar na tela.

evento do botão:

btReset.addEventListener("click", () => {
  if (html.getAttribute("data-contexto") === "foco") {
    tempoDecorrido = 1500;
    resetar();
    mostrarTela();
  }
  if (html.getAttribute("data-contexto") === "descanso-curto") {
    tempoDecorrido = 300;
    resetar();
    mostrarTela();
  }

  if (html.getAttribute("data-contexto") === "descanso-longo") {
    tempoDecorrido = 900;
    resetar();
    mostrarTela();
  }
});

função resetar:

function resetar() {
  clearInterval(intervalo_id);
  intervalo_id = null;
  imgBtStartPause.setAttribute("src", "/imagens/play_arrow.png");
  btStartPause.textContent = "Começar";
}

função mostrarTela:

function mostrarTela() {
  const tempo = new Date(tempoDecorrido * 1000); // multiplica por 1000 porque é em milisegundos
  const tempoFormatado = tempo.toLocaleTimeString("pt-br", {
    minute: "2-digit",
    second: "2-digit",
  });
  tempoNaTela.innerHTML = `${tempoFormatado}`;
}

Espero que gostem dessa atualiação no projeto.