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

Erro no contador de segundos.

Fala galera, verifiquei meu código com o do instrutor e não consigo achar o erro.

principal.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
</head>
<body>
    <h1>Alura Typer</h1>

    <p class="frase">lorem ipsun .</p>

      <ul class="informacoes">
        <li><span id="tamanho-frase">19</span> palavras</li>
        <li><span id="tempo-digitacao">15</span> segundos</li>
      </ul>

      <textarea class="campo-digitacao" rows="8" cols="40"></textarea>

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


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

main.js

var text = $(".frase").text();
var numPalavras = text.split(" ").length;

var tamanhoFrase = $("#tamanho-frase");
tamanhoFrase.text(numPalavras);

var campo = $(".campo-digitacao");

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);

  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);
      }
    }, 1000);
  });
});
5 respostas

Darlysson, poderia por favor me informar qual aula e exercício seria ?

Opa Matheus, esqueci dessas informações. Perdão. Aula 3, último exercício (Mãos na massa: Game Over).

Obrigado.

solução!

Boa Darlysson, estava analisando aqui, repare que seu evento focus esta dentro do input, quando na verdade deveria ser fora.

Seu codigo:

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);

    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);
            }
        }, 1000);
    });    
});

O correto seria:

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);
});

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);
        }
    }, 1000);
});

Espero ter ajudado

Obrigado pela ajuda Matheus. Além do que você me passou, também corrigi a linha "var tempoRestante = $("tempo-digitacao").text();" onde eu não estava especificando o seletor da classe.

Tks! Darlysson

Mágina, sempre que precisar, não deixe de criar suas dúvidas.