flavio-magela/frase.js

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

function fraseAleatoria(){
  $("#spinner").toggle();
  $.get("http://localhost:3000/frases", trocaFraseAleatoria).fail(function(){
      $("#erro").toggle();
      setTimeout(function(){
      $("#erro").toggle();
    },5000);
    }).always(function(){
      $("#spinner").toggle();// apos a frase aparecer (always) sempre executa a função errada ou nao escode o spinner (icone de rodando o  aplicativo)

  });
}

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
}
function buscaFrase(){
  $("#spinner").toggle();
  var fraseId = $("#frase-id").val(); // busca o digito que vc digitou na pagina
  setTimeout(function(){
  $("#frase-id").val("");
},3000);
  console.log("Id da minha frase: " + fraseId);
  var dados = {id:fraseId}; // enviar um obj JavaScript p/ segundo parametro e ela vai enteder que vc quer o id que está no servidor.
  $.get("http://localhost:3000/frases",dados,trocaFrase).fail(function(){ //colocar o sempre na segunda posiçao para dar certo - dados
      $("#erro").toggle();
      setTimeout(function(){
      $("#erro").toggle();
    },5000);
    }).always(function(){
      $("#spinner").toggle();// apos a frase aparecer (always) sempre executa a função errada ou nao escode o spinner (icone de rodando o  aplicativo)

  });// pega no servidor o numero que foi digitado na pagina e apresenta o texte vinculado com id
}
function trocaFrase(data){
  var frase = $(".frase");
  frase.text(data.texto);
  console.log("Minha Frase: " + data.texto);
  atualizaTamanhoFrase();
  atualizaTempoInicial(data.tempo)// .tempo é o nome dado no texto no servidor
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <!--Import materialize.css-->
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <!-- Import Google Material Icons -->
    <link href="css/libs/google-fonts.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <section class="container">
        <h1 class="center titulo header">Alura typer</h1>
        <div class="slider">
            <img src="img/slide1.png" class="imagem-jogo">
            <img src="img/slide2.png" class="imagem-jogo">
            <img src="img/slide3.png" class="imagem-jogo">
        </div>
        <hr>
        <p class="flow-text center">Teste sua velocidade competindo contra seus amigos!</p>
        <div class="card">
           <div class="card-image">
             <!-- <img src="images/sample-1.jpg"> -->
           </div>
           <div class="card-content">
             <p>Placar dinâmico! Sincronizando com o servidor!</p>
           </div>
           <div class="card-action">
             <a href="principal.html">Experimente agora!</a>
           </div>
         </div>
         <div class="card">
           <div class="card-image">
             <!-- <img src="img/sl.jpg"> -->
           </div>
           <div class="card-content">
             <p>Frases aleatórias ou escolha diretamente em qual delas você quer competir!</p>
           </div>
           <div class="card-action">
             <a href="principal.html">Experimente agora!</a>
           </div>
         </div>

         <a class="waves-effect waves-light btn-large orange" id="botao-jogue" href="principal.html">Jogue agora!</a>

    </section>

    <script src="js/jquery.js"></script>
    <script src="slick/slick.min.js"></script>
    <script src="js/slider.js"></script>

</body>
</html>

## 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();
    //inserePlacar();
    atualizaPlacar();


    $("#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);
$("#botao-sync").click(sincronizaPlacar);

function inserePlacar(){
  var corpoTabela = $(".placar").find("tbody");
  console.log(corpoTabela);
  var usuario = "Geraldo";
  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();

}
function sincronizaPlacar(){
  var placar = [];
  var linhas = $("tbody>tr"); // cria um tabela com os seu tr e td´s
  linhas.each(function(){
      var usuario = $(this).find("td:nth-child(1)").text(); //mostra o primeiro posição(usuario) do primeiro array na pagina html
      var palavras = $(this).find("td:nth-child(2)").text();//mostra o segundo posição(palavra) do primeiro array da pagina html

      var score = { //fazer o score(resultado) igual o texto que está no servidor http://.../placar
        usuario: usuario,
        pontos: palavras
      };//a cada linha foi salvo um objeto diferente
      placar.push(score); //coloca dentro do array placar os valores digitado na página
  }); //igual o for{} de array
  var dados = {  //criação do objeto JavaScript para vincular ao POST
    placar: placar
  }
  $.post("http://localhost:3000/placar",dados,function(){

    console.log("Salvou placar no servidor!!");
  });
}

function atualizaPlacar(){
  $.get("http://localhost:3000/placar",function(data){
    $(data).each(function(){
        var linha = novaLinha(this.usuario, this.pontos); //usuario e ponnto os nomes dados no placar do servidor
        linha.find(".botao-remover").click(removeLinha);
        $("tbody").append(linha); //adiciona/jogar a linha dentro da tabela do html

    });

  });

}

## 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">
            <div>
              <img src="img/spinner.gif" alt="Spinner" id="spinner">
              <p id="erro"> Ocorreu um erro. Verifique a conexão do seu servidor. Tente novamente mais tarde.</p>

            </div>
            <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>
          <a class="btn-floating btn-large waves-effect waves-light orange" id="botao-frase-id"><i class="material-icons">repeat_one</i></a>
          <input type="number" id="frase-id" min="0">
          <a class="btn-floating btn-large waves-effect waves-light yellow" id="botao-sync"><i class="material-icons">swap_vert</i></a>
        </div>
        <h5 class="center">Meu Resultado</h5>
        <P class="meuTexto 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>

## slider.js
$.(function(){
  $(".slider").slick({
      dots: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      adaptiveHeight: true

  });
});
// $(document).ready(function(){
//   $('.slider').slick({
//     setting-name: setting-value
//   });
// });
	$("#botao-frase").click(fraseAleatoria);
	$("#botao-frase-id").click(buscaFrase);

	function fraseAleatoria(){
	$("#spinner").toggle();
	$.get("http://localhost:3000/frases", trocaFraseAleatoria).fail(function(){
	$("#erro").toggle();
	setTimeout(function(){
	$("#erro").toggle();
	},5000);
	}).always(function(){
	$("#spinner").toggle();// apos a frase aparecer (always) sempre executa a função errada ou nao escode o spinner (icone de rodando o aplicativo)

	});
	}

	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
	}
	function buscaFrase(){
	$("#spinner").toggle();
	var fraseId = $("#frase-id").val(); // busca o digito que vc digitou na pagina
	setTimeout(function(){
	$("#frase-id").val("");
	},3000);
	console.log("Id da minha frase: " + fraseId);
	var dados = {id:fraseId}; // enviar um obj JavaScript p/ segundo parametro e ela vai enteder que vc quer o id que está no servidor.
	$.get("http://localhost:3000/frases",dados,trocaFrase).fail(function(){ //colocar o sempre na segunda posiçao para dar certo - dados
	$("#erro").toggle();
	setTimeout(function(){
	$("#erro").toggle();
	},5000);
	}).always(function(){
	$("#spinner").toggle();// apos a frase aparecer (always) sempre executa a função errada ou nao escode o spinner (icone de rodando o aplicativo)

	});// pega no servidor o numero que foi digitado na pagina e apresenta o texte vinculado com id
	}
	function trocaFrase(data){
	var frase = $(".frase");
	frase.text(data.texto);
	console.log("Minha Frase: " + data.texto);
	atualizaTamanhoFrase();
	atualizaTempoInicial(data.tempo)// .tempo é o nome dado no texto no servidor
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Alura Typer</title>
	<!--Import materialize.css-->
	<link rel="stylesheet" href="css/libs/materialize.min.css">
	<!-- Import Google Material Icons -->
	<link href="css/libs/google-fonts.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
	<link href="css/index.css" rel="stylesheet">
	</head>
	<body>
	<section class="container">
	<h1 class="center titulo header">Alura typer</h1>
	<div class="slider">
	<img src="img/slide1.png" class="imagem-jogo">
	<img src="img/slide2.png" class="imagem-jogo">
	<img src="img/slide3.png" class="imagem-jogo">
	</div>
	<hr>
	<p class="flow-text center">Teste sua velocidade competindo contra seus amigos!</p>
	<div class="card">
	<div class="card-image">
	<!-- <img src="images/sample-1.jpg"> -->
	</div>
	<div class="card-content">
	<p>Placar dinâmico! Sincronizando com o servidor!</p>
	</div>
	<div class="card-action">
	<a href="principal.html">Experimente agora!</a>
	</div>
	</div>
	<div class="card">
	<div class="card-image">
	<!-- <img src="img/sl.jpg"> -->
	</div>
	<div class="card-content">
	<p>Frases aleatórias ou escolha diretamente em qual delas você quer competir!</p>
	</div>
	<div class="card-action">
	<a href="principal.html">Experimente agora!</a>
	</div>
	</div>

	<a class="waves-effect waves-light btn-large orange" id="botao-jogue" href="principal.html">Jogue agora!</a>

	</section>

	<script src="js/jquery.js"></script>
	<script src="slick/slick.min.js"></script>
	<script src="js/slider.js"></script>

	</body>
	</html>
	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();
	//inserePlacar();
	atualizaPlacar();


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

	}

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

	function inserePlacar(){
	var corpoTabela = $(".placar").find("tbody");
	console.log(corpoTabela);
	var usuario = "Geraldo";
	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();

	}
	function sincronizaPlacar(){
	var placar = [];
	var linhas = $("tbody>tr"); // cria um tabela com os seu tr e td´s
	linhas.each(function(){
	var usuario = $(this).find("td:nth-child(1)").text(); //mostra o primeiro posição(usuario) do primeiro array na pagina html
	var palavras = $(this).find("td:nth-child(2)").text();//mostra o segundo posição(palavra) do primeiro array da pagina html

	var score = { //fazer o score(resultado) igual o texto que está no servidor http://.../placar
	usuario: usuario,
	pontos: palavras
	};//a cada linha foi salvo um objeto diferente
	placar.push(score); //coloca dentro do array placar os valores digitado na página
	}); //igual o for{} de array
	var dados = { //criação do objeto JavaScript para vincular ao POST
	placar: placar
	}
	$.post("http://localhost:3000/placar",dados,function(){

	console.log("Salvou placar no servidor!!");
	});
	}

	function atualizaPlacar(){
	$.get("http://localhost:3000/placar",function(data){
	$(data).each(function(){
	var linha = novaLinha(this.usuario, this.pontos); //usuario e ponnto os nomes dados no placar do servidor
	linha.find(".botao-remover").click(removeLinha);
	$("tbody").append(linha); //adiciona/jogar a linha dentro da tabela do 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">
	<div>
	<img src="img/spinner.gif" alt="Spinner" id="spinner">
	<p id="erro"> Ocorreu um erro. Verifique a conexão do seu servidor. Tente novamente mais tarde.</p>

	</div>
	<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>
	<a class="btn-floating btn-large waves-effect waves-light orange" id="botao-frase-id"><i class="material-icons">repeat_one</i></a>
	<input type="number" id="frase-id" min="0">
	<a class="btn-floating btn-large waves-effect waves-light yellow" id="botao-sync"><i class="material-icons">swap_vert</i></a>
	</div>
	<h5 class="center">Meu Resultado</h5>
	<P class="meuTexto 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>
	$.(function(){
	$(".slider").slick({
	dots: true,
	infinite: true,
	speed: 300,
	slidesToShow: 1,
	adaptiveHeight: true

	});
	});
	// $(document).ready(function(){
	// $('.slider').slick({
	// setting-name: setting-value
	// });
	// });