Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não altera numero de palavras

Não estou conseguindo alterar o Numero de Palavras no Placar, tentei achar o erro, mas não consegui, alguém consegue dar uma olhada no código?

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

$(function(){
   inserePlacar();
   atualizaFrase();

   medidorPalavras();
   inicializaTempo();
   ReiniciarOJogo();
   inicializaMarcadores();
   var reiniciarJogo = $("#reiniciar-jogo").click(ReiniciarOJogo);
});

function atualizaFrase() {
   var frase = $(".frase").text();
   var numPalavras = frase.split(/\S+/).length;
   var tamanhoFrase = $("#tamanho-frase");
   tamanhoFrase.text(numPalavras);
}

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

function inicializaTempo() {
   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 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:" + comparavel);
      if(digitado === comparavel) {

      }   else {

      }
   })
}

function ReiniciarOJogo(){
      campo.attr("disabled", false);
      campo.val("");
      $("#tamanho-palavras").text("0")
      $("#tamanho-caracteres").text("0")
      $("#tempo-digitacao").text(tempoInicial)
      inicializaTempo();

   };

   function inserePlacar(){
      var corpoTabela = $(".placar").find("tbody");
      var usuario = "Giovany";
      var numPalavras = $("#tamanho-palavras").text();

      var linha = "<tr>"+
                      "<td>"+ usuario + "</td>"+
                      "<td>"+ numPalavras + "</td>"+
                  "</tr>";

      corpoTabela.prepend(linha);
  }
<body>
    <div class="container">
        <h1>Alura Typer</h1>
        <p class="frase">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum illum repellat excepturi cupiditate harum aliquam corrupti ea inventore dolore, numquam, temporibus fugit deleniti vel iste, velit rem architecto ullam ex!.</p>

        <ul class="informacoes">
            <li><span id="tamanho-frase">50</span> Palavras</li>
            <li><span id="tempo-digitacao">5</span> segundos</li>
        </ul>

        <textarea class="form-control" id="campo-digitacao" cols="200" rows="10"></textarea>
        <button id="reiniciar-jogo" type="button" class="btn btn-dark">Resetar</button>

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

        <section class="placar">
            <h3>Placar</h3>
            <table class="table table-dark">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Numero Palavras</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Giovany</td>
                        <td>10</td>
                    </tr>
                </tbody>
            </table>
        </section>

    </div>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>




</body>
</html>
1 resposta
solução!

Oi Giovany tudo bem?

Faltou criar a função finalizaJogo() e dentro dela é que tem de estar o inserePlacar. Do jeito que você colocou o inserePlacar é colocado assim que carrega a página, ai ele não guarda o número de palavras mesmo.

Dá uma olhada no código do professor para fazer os ajustes necessários:

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

$(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 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");
        }
    });
}

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

function finalizaJogo() {
    campo.attr("disabled", true);
    campo.toggleClass("campo-desativado");
    inserePlacar();
}

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

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