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

Aula 04 - Exercício Opcional

No exercício opcional da aula 04, não ficou claro onde colocar o código que irá ativar novamente o botão.

O código é:

$("#botao-reiniciar").attr("disabled", false);

Tentei inserir em uma nova função, conforme mostra a explicação do exercício. Também tentei colocá-lo na função reiniciaJogo, ou na invocação das funções no início do arquivo.

Porém, nada funcionou.

Apesar de opcional, achei o recurso interessante e queria fazê-lo funcionar. Segue meu código completo, onde na função inicializaCronometro inativo o botão, mas neste código não sei onde ativá-lo novamente :

var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");


$(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    $("#botao-reiniciar").click(reiniciaJogo);
    finalizaJogo();
});

function atualizaTamanhoFrase(){
    var frase = $(".frase").text();
    var numPalavras = frase.split(" ").length;
    var tamanhoFrase = $("#tamanho-frase");
    tamanhoFrase.text(numPalavras);
}

function inicializaContadores(){
    campo.on("input", function(){
        var conteudo = campo.val();
        var qtdPalavras = conteudo.split(/\S+/).length - 1;
        $("#contador-palavras").text(qtdPalavras);

        var qtdCaracteres = conteudo.length;
        $("#contador-caracteres").text(qtdCaracteres);
    });
}

function inicializaCronometro(){
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function(){
        $("#botao-reiniciar").attr("disabled", true);
        var cronometroID = setInterval(function(){
            tempoRestante --;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1){
                campo.attr("disabled", true);
                clearInterval(cronometroID);
            }
        }, 1000);
    });
}

function reiniciaJogo(){
    campo.attr("disabled", false);
    campo.val("");
    $("#contador-caracteres").text("0");
    $("#contador-palavras").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
};

Desde já, muito obrigado! =)

3 respostas

Você teria também o HTML e CSS do que você já fez?

solução!

Boa tarde Marcelo,

Só um detalhe, faltou o método 'finalizaJogo' que você chamou na função inicial. Mas tente incluir seu código para habilitar o botão de reinicio dentro do if (tempoRestante < 1)

function inicializaCronometro(){
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function(){
        $("#botao-reiniciar").attr("disabled", true);
        var cronometroID = setInterval(function(){
            tempoRestante --;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1){
                campo.attr("disabled", true);
                $("#botao-reiniciar").attr("disabled", false); // coloque o código aqui
                clearInterval(cronometroID);
            }
        }, 1000);
    });
}

Pela lógica, o botão deve habilitar para reiniciar o jogo quando o tempo acaba.

Espero que isso te ajude. Abraço.

Muito obrigado Marco Aurélio!

E principalmente, muito obrigado Silvio, eu mesmo havia esquecido ali a invocação do "finalizaJogo". =P

E claro, habilitar o botão quando o tempo acaba, funcionou. Por mais óbvio que parecia, eu não consegui enxergar isso

Muito obrigado pessoal, vocês são feras!

Grande abraço!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software