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

function atualizaTamanhoFrase(){} - Não está funcionando, não limpa o campo e fica sempre c/ número 2

Por favor alguém consegue verificar o código ? Agradeço a atenção...

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
</head>
<body>
    <!-- Seja bem vindo ao curso de jQuery :) -->

    <h1>Alura Typer</h1>

        <p class="frase">Conta Palavras</p>

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

        <textarea class="campo-digitacao" rows="8" cols ="40"></textarea>
        <button id="botao-reiniciar">Reiniciar Jogo</button>

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

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

$(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro(); 
    $("#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(" ").length; 
        $("#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);
        }
   },1000);
 });
}
function reiniciaJogo(){
      campo.attr("disabled", false);
      campo.val("");
      $("#contador-palavras").text("0");
      $("#contador-caracteres").text("0");
      $("#tempo-digitacao").text(tempoInicial);
      inicializaCronometro();
}
4 respostas

Oi, Christina, tudo bem?

Dentro da classe informacoes há duas as duas li, tamanho-frase e tempo-digitacaoque são referente à classe frase que no caso, você usou duas palavras Conta palavras, ou seja, duas palavras e você só deu 3 segundos para o contador, ai rapidamente ele fechar a área de texto. O contador referente ao que é colado na caixa de texto está abaixo.

Sugiro que aumente o tempo de digitação para que o cronometro não impeça de digitar a frase.

Fala ai Christina, tudo bem? Posso te pedir um favor? Compartilha o projeto completo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Isso porque olhando os códigos posso deixar passar algum detalhe facilmente.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

solução!

Olá Laís e Matheus, eu já entendi aqui o que estava acontecendo, entendimento errado do código pelo estudante iniciante ... Obrigada pela ajuda, me fez pensar mais um pouco.

Boa Christina, fico feliz que tenha resolvido seu problema.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.