Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Sugestão] recarregar página após finalizar o tempo.

A princípio fiquei incomodado com o beep de alerta que toca até o final, mesmo quando a gente clica no alert. Vi aqui no fórum uma solução de outra pessoa e achei massa a ideia de adicionar um trecho para interromper o beep após clicar no alert:

const contagemRegressiva = () => {
    if (timer === 0) {
        zerar();
        audioBeep.play();
        alert("Tempo finalizado.");
        audioBeep.pause();
        return;
        }

Contudo, mesmo encerrando o som do beep, o app fica travado, o pomodoro não retorna ao funcionamento nem mesmo mudando o contexto. Acredito que isso será implementado nas próximas aulas, mas procurei uma solução e adicionei um trecho para recarregar todo o app após clicar no alert:

const contagemRegressiva = () => {
    if (timer === 0) {
        zerar();
        audioBeep.play();
        alert("Tempo finalizado.");
        window.location.reload(true);
    }
    timer --;
    textoBt.innerHTML = "pausar";
    console.log("Temporizador: " + timer);
};

O método Location.reload() do JavaScript fornece os meios para recarregar a página do URL atual.

A sintaxe é a seguinte:

objeto.reload(forcedReload);

onde forceReload é um parâmetro opcional.

Para recarregar a página, simplesmente, você pode inserir window.location como o objeto.

O parâmetro opcional forceReload é um valor booleano que, se for definido como true, recarrega a página a partir do servidor (ou seja, não armazena dados em cache no navegador):

window.location.reload(true);

Se o parâmetro for definido como false, a página é recarregada usando a versão que está em cache no navegador.

window.location.reload(false);

false é o parâmetro padrão. Assim, se o conteúdo do parênteses for deixado em branco, object.reload() recarrega a página usando o que estiver em cache no navegador, do mesmo modo que se usássemos objeto.reload(false).

Optei por recarregar excluindo o cache, pois dessa forma a página não atualiza com o botão da música ativado.

Já o trecho:

    textoBt.innerHTML = "pausar";

... este faz com que o texto dentro do botão mude de começar para pausar. Da mesma maneira, determinei que uma vez pausado o mesmo mude para retomar. Sacrifiquei a utilização do ícone na implementação desse código, estou certo de que há uma maneira de inserir o ícone de pause no texto pausar após iniciar, bem como inserir o ícone de play quando estiver pausado e com o texto retomar, mas uma mistura de preguiça e do pensamento de que não tem tanta relevância eu deixei sem os ícones mesmo... maaaas se alguém aqui tiver uma sugestão dessa implementação, vou ficar agradecido.

3 respostas

Código completo até o momento abaixo:


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

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 banner = document.querySelector(".app__image");
const titulo = document.querySelector(".app__title");
const textoBt = document.querySelector(".app__card-primary-button");

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 = 5;
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>
            `;
    default:
        break;
    }
}

const contagemRegressiva = () => {
    if (timer === 0) {
        zerar();
        audioBeep.play();
        alert("Tempo finalizado.");
        window.location.reload(true);
    }
    timer --;
    textoBt.innerHTML = "pausar";
    console.log("Temporizador: " + timer);
};

function startPause () {
    if(contando) {
        zerar();
        audioPause.play();
        textoBt.innerHTML = "retomar";
        return;
    }
    audioPlay.play();
    contando = setInterval(contagemRegressiva, 1000);
}

function zerar () {
    clearInterval(contando);
    contando = null;
}

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

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

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

longoBt.addEventListener("click", () => {
    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();
    }
});

Sobre a pergunta que deixei no final da minha minha sugestão... já avancei nas aulas e agora o texto já alterna juntamente com o ícone :)

solução!

Olá Estudante, tudo bem?

Fico feliz em ver que você conseguiu resolver a questão do texto que alterna juntamente com o ícone. Você está progredindo bem nas aulas e aplicando os conceitos de forma prática no seu projeto.

A adição do trecho para recarregar a página após o alerta é uma solução válida, especialmente para lidar com o problema de travamento após o alerta. É bom ver que você está com atenção ligada aos detalhes e buscando melhorar a experiência do usuário no seu aplicativo.

Continue o ótimo trabalho e boa sorte com o restante do curso!

Um abraço e bons estudos.