Campo de Digitação X Fundo Cinza | jQuery: domine a biblioteca mais popular do mercado parte 1

A ideia da aplicação é deixar o usuário digitar um texto definido, e quando o tempo estourar, o campo de digitação fica cinza e não se pode digitar nada. Este modus operandi funciona quando perfeitamente quando a página é carregada. Quando se estoura o tempo e o campo se torna cinza, é acionado o botão de reiniciar e digitamos novamente. Só que neste momento, quando se estoura o tempo, o campo não se torna cinza. Gostaria de saber onde eu estou falhando. Existem duas partes no código inserido: Arquivo HTML e Arquivo JS.

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 class="center">Alura Typer</h1>
        <p class="frase center">Algumas empresas são moderadamente bem-sucedidas sem ter uma declaração de missão clara. Mas elas lutam para crescer porque não está claro para a liderança por que o produto foi bem-sucedido e como expandir a sua linha de produtos. O resultado é um portfólio de produtos que se sente muito desconectado.</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>
        <div class="botoes">
            <a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar"><i class="material-icons">restore</i></a>
        </div>

        <ul class="center">
            <li><span id="contador-caracteres">0</span> caracteres</li>
            <li><span id="contador-palavras">0</span> palavras</li>
        </ul>
    </div>
        <script src="jquery-3.6.0.js"></script>
        <script src="main-limpo.js"></script>
  </body>
</html>

var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");
$(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    $("#botao-reiniciar").click(reiniciaJogo);
});
function atualizaTamanhoFrase() {
      var frase = $(".frase").text();
      //console.log(frase);
      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() { 
          var cronometroID = setInterval(function() {
                tempoRestante--;               
                $("#tempo-digitacao").text(tempoRestante);
                if (tempoRestante < 1) {
                      campo.attr("disabled", true); 
                      clearInterval(cronometroID);
                      campo.addClass("campo-desativado");                      
                }
          },1000);
  });
}
function inicializaMarcadores() {
    var frase = $(".frase").text();
    campo.on("input",function() {
      var digitado = campo.val();
      var comparavel = frase.substr(0, digitado.length);
    console.log("Digitado:" + digitado);
          console.log("Frase C." + comparavel);
      if(digitado == comparavel) {
        campo.addClass("borda-verde");
        campo.removeClass("borda-vermelha");
      } else {
        campo.addClass("borda-vermelha");
        campo.removeClass("borda-verde");
      }
    });
}
function reiniciaJogo() {
     campo.attr("disabled", false);
      campo.val("");
      $("#contador-palavras").text("0");
      $("#contador-caracteres").text("0");
      $("#tempo-digitacao").text(tempoInicial);
      inicializaCronometro();
      campo.addClass("campo-ativado");
      campo.removeClass("borda-vermelha"); 
      campo.removeClass("borda-verde");
}

Oi Marcos!

Vamos analisar o que acontece com o campo de digitação no seu código:

página inicia
componente é renderizado
script main é carregado
função inicializaCronômetro é rodada
usuário clica no input e o evento `one` é acionado
o tempo acaba, e a classe `campo-desativado` é adicionada ao input
ao clicar no botão de reiniciar a classe `campo-ativado` é adicionada ao input
cronômetro roda normalmente

Note que seu código adiciona classes ao input, porém nunca as remove. Sendo assim, na primeira vez que o código roda, tudo acontece normalmente, porém na segunda vez ele já está com as classes campo-desativado e campo-ativado nesta ordem. Como a ordem das classes importa, a propriedade background do campo-ativado está sobrescrevendo a do campo-desativado, pois ela foi declarada por último.

Para que seu código funcione da maneira correta, você tem que remover a classe campo-ativado quando for adicionar campo-desativado e removê-lo quando for adicionar campo-ativado novamente:

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

function reiniciaJogo() {
     campo.attr("disabled", false);
      campo.val("");
      $("#contador-palavras").text("0");
      $("#contador-caracteres").text("0");
      $("#tempo-digitacao").text(tempoInicial);
      inicializaCronometro();
      campo.addClass("campo-ativado");
      campo.removeClass("campo-desativado"); //removendo campo-desativado
      campo.removeClass("borda-vermelha"); 
      campo.removeClass("borda-verde");
}

Durante as aulas, o instrutor utiliza a função .toggleClass(), que remove a classe caso ela já exista ou adiciona se não existir. Desta forma, eliminamos a necessidade da classe campo-ativado e para habilitar o campo novamente basta remover a classe campo-desativado do input.

Espero ter ajudado! Qualquer outra dúvida pode postar aqui! :)

Mergulhe em programação