Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Botão reiniciar com bug.

Boa tarde, Galera! Preciso de ajuda com meu código.. Agradeço desde já.

Não está colocando borda verde ou vermelha no campo de digitação quando a frase é compatível ou não.

O campo de digitação não fica mais na cor lightgray quando o tempo acaba.

O Botão reiniciar voltou a ter aquele bug falado na aula anterior, no qual eu já tinha corrigido. (Ele pode ser reiniciado antes do tempo acabar, o que não deveria).

HTML:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Alura Typer</title>
        <link rel="stylesheet" href="css/libs/materialize.min.css">
        <link rel="stylesheet" href="css/libs/google-fonts.css">
        <link rel="stylesheet" href="css/estilos.css">
    </head>
    <body>
        <div class="container">
            <h1>Alura Type</h1>
            <p class="frase">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <ul class="informacoes center">
                <li>
                    <i class="small material-icons icones">description</i>
                    <span id="tamanho-frase">19</span> palavras
                </li>
                <li>
                    <i class="small material-icons icones">query_builder</i>
                    <span id="tempo-digitacao">10</span> segundos
                </li>
            </ul>

            <textarea class="campo-digitacao" rows="8" cols="40"></textarea>
            <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
                <i class="material-icons">restore</i>
            </a>

            <ul>
                <li><span id="contador-caracteres">0</span> caracteres</li>
                <li><span id="contador-palavras">0</span> palavras</li>
            </ul>
        </div>

        <script src="js/jQuery.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

JavaScript:

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

$(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();

    inicializaMarcadores();

    $("#botao-reiniciar").click(reiniciaJogo);
});

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);
                campo.toggleClass("campo-desativado");
                $("#botao-reiniciar").attr("disabled", false);

            }
        }, 1000);
    });
};

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

    campo.removeClass("borda-vermelha");
    campo.removeClass("borda-verde");
};

function inicializaMarcadores() {
    var frase = $(".frase").text();
    campo.on("input", function() {
        var digitado = campo.val();
        var comparavel = frase.substr(0 , digitado.length);

        if(digitado == comparavel) {
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelha");
        } else {
            campo.addClass("borda-vermelha");
            campo.removeClass("borda-verde");
        }
    });
}

CSS:

.campo-digitacao {
    font-size: 20px;
    height: 130px;
};

.frase {
    font-size: 20px;
    text-align: left;
};

.campo-desativado {
    background-color: lightgray;
};

.icones {
    vertical-align: middle;
};

.borda-verde {
    border: 3px solid green;
};

.borda-vermelha {
    border: 3px solid red;
};
4 respostas

Resolvi os demais problemas que citei. O único que continuou, foi o bug do botão que deveria ficar habilitado para o clique apenas quando o tempo estiver zerado ...

Mychel, tudo bem ?

Acredito que por você estar usando a tag <a> você não vai conseguir deixar ele desabilitado. Se fosse um button ou input type=submit ai você teria mais controle

Mychel, parece que você se esqueceu de um detalhe na funcão reiniciaJogo: o parâmetro event para chamar o método event.preventDefault() e impedir o seguimento do link. Isso talvez resolva seu problema, vamos ver.

Outra coisa, outro assunto: tente evitar utilizar o toggleClass em situações onde você sabe qual o estado que você quer. Se precisa que a classe esteja presente, prefira utilizar o addClass e se precisa que esteja ausente prefira o removeClass sempre.

solução

Isso passou a ocorrer após alterar o elemento de button para uma anchor, onde, como já foi dito, o atributo disabled passou a não funcionar (não especificado para anchor).

Você pode criar uma classe CSS em estilos.css para esconder o botão:

.invisivel{
    visibility: hidden;
}

Em seguida, nos locais onde você anteriormente especificava o atributo disabled você adiciona ou remove essa classe do botão, conforme o caso.

Tentei utilizar o event.preventDefault() mas não surtiu efeito.