[Sugestão] Como parar e Reiniciar o temporizador ao navegar entre os contextos.

Abaixo, o meu código completo após o último vídeo:

// =====================================================

const html = document.querySelector("html");
const botoes = document.querySelectorAll(".app__card-button");
const focoBt = document.querySelector(".app__card-button--foco");
const curtoBt = document.querySelector(".app__card-button--curto");
const longoBt = document.querySelector(".app__card-button--longo");
const startPauseBt = document.getElementById("start-pause");
const iconBt = document.querySelector(".app__card-primary-butto-icon");

const tempoNaTela = document.getElementById("timer");
const textoBt = document.querySelector(".app__card-primary-button span");
const banner = document.querySelector(".app__image");
const titulo = document.querySelector(".app__title");

const musicaFocoInput = document.getElementById("alternar-musica");
const musica = new Audio("/sons/luna-rise-part-one.mp3");
const audioPlay = new Audio("/sons/play.wav");
const audioPause = new Audio("/sons/pause.mp3");
const audioBeep = new Audio("/sons/beep.mp3");

let timer = 1500;
let contando = null;

// =====================================================

function alterarContexto(contexto) {
    botoes.forEach((contexto) => {
        contexto.classList.remove("active");
    });
    html.setAttribute("data-contexto", contexto);
    banner.setAttribute("src", `/imagens/${contexto}.png`);
    switch (contexto) {
    case "foco":
        titulo.innerHTML = `
            Otimize sua produtividade,<br>
                <strong class="app__title-strong">mergulhe no que importa.</strong>
            `;
        break;
    case "descanso-curto":
        titulo.innerHTML = `
            Que tal dar uma respirada?<br>
                <strong class="app__title-strong">Faça uma pausa curta.</strong>
            `;
        break;
    case "descanso-longo":
        titulo.innerHTML = `
            Hora de voltar à superfície.<br>
                <strong class="app__title-strong">faça uma pausa longa.</strong>
            `;
    // eslint-disable-next-line no-fallthrough
    default:
        break;
    }
    mostrarTempo();
}

const contagemRegressiva = () => {
    if (timer === 0) {
        audioBeep.play();
        alert("Tempo finalizado.");
        zerar();
        window.location.reload(true);
        return;
    }
    timer --;
    textoBt.textContent = "Pausar";
    iconBt.setAttribute("src", "/imagens/pause.png");
    mostrarTempo();
};

function startPause () {
    if(contando) {
        zerar();
        audioPause.play();
        textoBt.textContent = "Retomar";
        iconBt.setAttribute("src", "/imagens/play_arrow.png");
        return;
    }
    audioPlay.play();
    contando = setInterval(contagemRegressiva, 1000);
}

function zerar () {
    clearInterval(contando);
    textoBt.textContent = "Começar";
    iconBt.setAttribute("src", "/imagens/play_arrow.png");
    contando = null;
}

function mostrarTempo () {
    const tempo = new Date(timer * 1000);
    const tempoFormatado = tempo.toLocaleTimeString("pt-br", {minute: "2-digit", second: "2-digit"});
    tempoNaTela.innerHTML = `${tempoFormatado}`;
}

// =====================================================

focoBt.addEventListener("click", () => {
    zerar();
    timer = 1500;
    alterarContexto("foco");
    focoBt.classList.add("active");
});

curtoBt.addEventListener("click", () => {
    zerar();
    timer = 300;
    alterarContexto("descanso-curto");
    curtoBt.classList.add("active");
});

longoBt.addEventListener("click", () => {
    zerar();
    timer = 900;
    alterarContexto("descanso-longo");
    longoBt.classList.add("active");
});

startPauseBt.addEventListener("click", startPause);

musicaFocoInput.addEventListener("change", () => {
    if(musicaFocoInput.checked) {
        musica.play();
        musica.volume = 0.7;
        musica.loop = true;
    } else {
        musica.pause();
    }
});

mostrarTempo();

Oi, tudo bem?

Sua abordagem para melhorar a usabilidade do seu aplicativo parece ser bem pensada e eficaz. Ao chamar a função zerar() nos eventos dos botões, você garante que o contador seja reiniciado e o contexto seja alterado conforme necessário. Isso cria uma transição mais suave e intuitiva entre os diferentes modos de trabalho.

A adição da funcionalidade zerar() para atualizar o texto e o ícone do botão "Começar/Pausar" é uma ótima adição. Essa mudança visual fornece um feedback claro para o usuário sobre o estado atual do temporizador, contribuindo ainda mais para a usabilidade geral do aplicativo.

Entender e atender às suas próprias preferências de usabilidade é crucial ao desenvolver aplicativos pessoais. Sua solução mostra uma abordagem consciente e proativa para melhorar a experiência do usuário, o que é louvável.

Se você continuar aprimorando e ajustando seu aplicativo com base em suas necessidades e feedback, certamente proporcionará uma experiência mais fluida e eficiente para os usuários.

Ótimo trabalho na implementação dessas melhorias!

Um abraço e bons estudos.