Alura Typer - Parte 2

estilos.css

.campo-digitacao{
  font-size: 20px;
  height: 120px;
  border: 3px solid black;

}

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

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

.icones{
  vertical-align: middle;
}
.borda-verde{
  border: 3px solid green;
}
.borda-vermelha{
  border: 3px solid red;
}
.borda-preta{
  border: 3px solid black;

}
.placar{
  display: none;
}
body{
  overflow: scroll;
}

frase.js

$("#botao-frase").click(fraseAleatoria);

function fraseAleatoria(){
  $.get("http://localhost:3000/frases", trocaFraseAleatoria);
}
function trocaFraseAleatoria(data){
  var frase = $(".frase");
  var numeroAleatorio = Math.floor(Math.random() * data.length);
  frase.text(data[numeroAleatorio].texto);
  atualizaTamanhoFrase();
  atualizaTempoInicial(data[numeroAleatorio].tempo)// .tempo é o nome dado no texto no servidor
}

main.js

var tempoInicial = $("#tempo-digitacao").text();
var frase = $(".frase").text();
var campo = $(".campo-digitacao");
var tempoRestante = $("#tempo-digitacao");
var contaPalavras = $("#contador-palavras");
var contaCaracteres =   $("#contador-caracteres");

$(function(){  // função $(document).ready(function(){}) outra forma rapida de mostrar,
    console.log("Pagina Carregada.");
    atualizaTamanhoFrase();
    resultadoDaFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();


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

  function atualizaTempoInicial(tempo){
    tempoInicial = tempo;
    $("#tempo-digitacao").text(tempo);
  }

function resultadoDaFrase() {
    campo.on("input",function() {
      var resultado = campo.val();
      var tamanhoResultado = $("#meu-resultado");
      var resultFinal = tamanhoResultado.text(resultado);

    });
}
//função Mostra o resultodo da Digitação logo abaixo do textarea
function atualizaTamanhoFrase() {
  var frase = $(".frase").text();
  var numPalavras = frase.split(/\S+/).length - 1;
  var tamanhoFrase = $("#tamanho-frase");
  tamanhoFrase.text(numPalavras);
  
  console.log(" Frase: " + frase);
  console.log("Tamanho da Frase: " + numPalavras);
  //console.log("Numero de Palavras da Frase: " + tamanhoFrase.text(numPalavras));
}

// função inicializa os contadores do Jogo
function inicializaContadores() {
  campo.on("input",function() {
    var conteudo = campo.val();
    var qtdPalavras = conteudo.split(/\S+/).length - 1;//split(/\S+/).length - 1
    contaPalavras.text(qtdPalavras);//conta o numero de palavras

    var qtdCaracteres = conteudo.length; //conta o  números de caracteres;
    contaCaracteres.text(qtdCaracteres);

  });
}
//função inicializa o cronometro do jogo
function inicializaCronometro() {
  campo.one("focus", function(){
    var tempoRestante = $("#tempo-digitacao").text();
    var cronometroID = setInterval(function() {
      tempoRestante --;
      var time = $("#tempo-digitacao").text(tempoRestante);
      if (tempoRestante < 1) {
        clearInterval(cronometroID); //no setInterval o tempo é parado (para de contar)
        finalizaJogo();
      }
    },1000);
  });
}
function finalizaJogo(){
  //inserePlacar();
  campo.toggleClass("campo-desativado"); // pinta a tela de cinza claro
  //campo.css("background-color","lightgray");//não é recomendável. usar um addclass
  //campo.addclass("campo-desativado");  // usando o toggClass ele verifica se esta de um jeito ele inverte
  campo.attr("disabled", true); // .att inseri algo no campo. Coloca desable na textarea ,true assim desabilitando o campo para digitação
  inserePlacar();
}

function inicializaMarcadores(){
  campo.on("input", function(){
    var frase = $(".frase").text();
    var digitado = campo.val();
    var comparavel = frase.substr(0,digitado.length); //substr vare todo o campo da frase palavra por palavra fazendo a comparação com o digitado
    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); //false - habilita o campo para digitação
    campo.val("");
    contaPalavras.text("0");
    contaCaracteres.text("0");
    tempoRestante.text(tempoInicial);
    campo.removeClass("borda-verde");
    campo.removeClass("borda-vermelha");
    inicializaCronometro();
    $("#meu-resultado").text("");
    campo.toggleClass("campo-desativado");

}

placar.js

$("#botao-placar").click(mostraPlacar);

function inserePlacar(){
  var corpoTabela = $(".placar").find("tbody");
  console.log(corpoTabela);
  var usuario = "Emilia";
  var numPalavras = $("#contador-palavras").text();

  var linha = novaLinha(usuario,numPalavras);
  linha.find(".botao-remover").click(removeLinha);
  corpoTabela.prepend(linha);
  $(".placar").slideDown(500); // ao terminar a digitação mostra o Placar
  scrollPlacar();

  //var botaoRemover = "<a href='#'><i class='small material-icons'>delete</i></a>";
  // var linha = "<tr>" +
  //                 "<td>"+ usuario + "</td>"+
  //                 "<td>"+ numPalavras + "</td>"+
  //                 "<td>"+ botaoRemover + "</td>"+
  //             "</tr>";
  //corpoTabela.preppend(linha); //função preppend insere o campo na início da tabela e append insere o campo no final da tabela

}
function scrollPlacar(){
  var posicaoPlacar = $(".placar").offset().top; // mostra a qual posição da tela - numeraçao
  $("body").animate(
  {
    scrollTop: posicaoPlacar + "px"
  },1000)
}

function novaLinha(usuario,palavras){
  var linha = $("<tr>");
  var colunaUsuario = $("<td>").text(usuario);
  var colunaPalavras = $("<td>").text(palavras);
  var colunaRemover = $("<td>");

  var link = $("<a>").addClass("botao-remover").attr("href","#");
  var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

  link.append(icone); //colocar o icone dentro da linha como no html
  colunaRemover.append(link); // colocar a linha dentro da <td> remove igual no gohtml

  linha.append(colunaUsuario);
  linha.append(colunaPalavras);
  linha.append(colunaRemover);

  return linha;
}

function removeLinha(){
    event.preventDefault();
    var linha = $(this).parent().parent();
    linha.fadeOut(1000); // (this) envolve toda a linha e parent(). parent() sobe duas casas para esmaecer devagar a linha toda Pai e avô.
    setTimeout(function(){
      linha.remove(); // (this) envolve toda a linha e parent(). parent() sobe duas casas para remover a linha toda Pai e avô. Depois de 1 segundo(uso do setTimeout)

    },1000);

}

// $(".botao-remover").click(function(event){
//   event.preventDefault();
//   $(this). parent().parent().remove(); // (this) envolve toda a linha e parent(). parent() sobe duas casas para remover a linha toda Pai e avô.
//
// }); // remove linha mas de forma obsoleta.
function mostraPlacar(){
  $(".placar").stop().slideToggle(800);
  scrollPlacar();

}

principal.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"> <!--- Estilizar o css-->
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/libs/selectize.default.css">
    <link rel="stylesheet" href="css/libs/tooltipster.bundle.mim.css">
    <link rel="stylesheet" href="css/estilos.css"> <!--- Estilizar o css-->

  </head>
<body>
    <div class="container">
          <h1 class="center">Alura Typer</h1>
          <P class="center cor frase">O rato roeu a roupa do rei e rainha de Roma.</P>
          <ul class="inicializador center">
            <li>
              <i class="small material-icons icones">description</i>
              <span id="tamanho-frase">0</span> palavras</li>
            <li>
              <i class="small material-icons icones">query_builder</i>
              <span id="tempo-digitacao">5</span> segundos</li>
        </ul>
        <textarea class="campo-digitacao" rows="8" cols="80"></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>
          <a class="btn-floating btn-large waves-effect waves-light green" id="botao-placar"><i class="material-icons">assignment</i></a>
          <a class="btn-floating btn-large waves-effect waves-light blue" id="botao-frase"><i class="material-icons">shuffle</i></a>
        </div>
        <h5 class="center">Meu Resultado</h5>
        <P class="frase center" id="meu-resultado"></P>
        <ul class="center">
          <li><span id="contador-caracteres">0</span> caracteres</li>
          <li><span id="contador-palavras">0</span> palavras</li>
        </ul>
    </div>
    <section class="placar">
        <h5 class="center">Placar</h5>
        <table class="centered bordered">
          <thead>
            <tr>
              <th>Nome</th>
              <th>No. de Palavras</th>
              <th>Remover</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Douglas</td>
              <td>10</td>
              <td>
                <a href="#" class="botao-remover">
                    <i class="small material-icons">delete</i>
                </a>
              </td>
            </tr>

          </tbody>
        </table>
    </section>

    <!-- Seja bem vindo ao curso de jQuery :) -->
  <script src="js/jquery.js"></script>
  <script src="js/main.js"></script>
  <script src="js/placar.js"></script>
  <script src="js/frase.js"></script>
</body>
</html>

Está acontecendo ERRO no números de palavras, quando eu busco do sevidor: http://localhost:3000/principal.html uma frase aleatória no servidor: http://localhost:3000/frases.
A função atualizaTamanhoFrase(); está me dando um numero de palavras diferente com o tamanho do texto. Quando dou um F5 na primeira vez ele conta certo, mas quando clico no botão buscar nova frase, ele já me dá a quantidade de palavra errada. Nesse caso como descubro esse erro.
a versão que baixei do servidor node é: node-v10.8.0-x64

Ao fazer outros testes e usar a função console.log... reparei que o testo na função
function atualizaTamanhoFrase() {
var frase = $(".frase").text();
var numPalavras = frase.split(/\S+/).length - 1;
var tamanhoFrase = $("#tamanho-frase");
tamanhoFrase.text(numPalavras);

console.log(" Frase: " + frase);
console.log("Tamanho da Frase: " + numPalavras);
//console.log("Numero de Palavras da Frase: " + tamanhoFrase.text(numPalavras));

Está copiando o texto duas vezes. Por isso que o números de palavras está duplicando. poderia me informar qual o motivo da duplicação?
Não consegui descobrir.

Descobrir o Erro. Na verdade é porque estava colocando a class: "frase" duas vezes no HTML e ao fazer o calculo ele estava duplicando;

1. Alura Typer

   O rato roeu a roupa do rei e rainha de Roma.

   • Meu Resultado

Após corrigir o problema foi solucionado.

Meu Resultado

Obrigado;