1
resposta

usuario duplicado ao adicionar na tabeela

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">
   <link rel="stylesheet" href="css/libs/google-fonts.css">
   <link rel="stylesheet" href="css/estilos.css">

</head>
<body>
   <div class="container">
      <h1 class="center"> alura typer </h1>
      <p class="frases center"> eu me chamo jhonatan barbosa de oliveira </p>

      <ul class="informaçoes center">
         <li>
            <i class="small material-icons icones">description</i>
            <span class="tamanho-frase">10</span> palavras
         </li>
         <li>
            <i class="small material-icons icones">query_builder</i>
            <span id="tempo-digitacao">10</span> Segundos
         </li>
      </ul>

      <textarea class="campo-digitacao" rows="8" cols="40"></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>
      </div>

      <ul class="center">
         <li><span id="contador-caractere"></span> Caractere</li>
         <li><span id="contador-palavra"></span> Palavras</li>

      </ul>

         <section class="placar">
            <h3 class="center">Placar</h3>

            <table class="centered bordered" >
               <thead>
                  <tr>
                     <th>Nome</th>
                     <th>Nº de Palavras</th>
                     <th>remover</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>Jhonatan</td>
                     <td>10</td>
                     <td><a href="#"></a><i class="material-icons">delete</i></td>
                  </tr>
               </tbody>
            </table>
         </section>
   </div>

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



JQUERY


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

$(document).ready(function(){
   inicializaContadores();
   inicializaCronometro();
   reiniciaJogo();
   inicializaMarcadores();
   $('#botao-reiniciar').click(reiniciaJogo);

})

function inicializaContadores(){
   campo.on('input',function(){
      var conteudo = campo.val();

      var qtdPalavra = conteudo.split(/\s+/).length -1;
      $('#contador-palavra').text(qtdPalavra);
      qtdCaractere = conteudo.split(/\s+/).length -1;
      $('#contador-caractere').text(qtdCaractere);

   });
}

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.addClass('campo-desativado');
   inserePlacar();
}


function inicializaMarcadores(){
   var frase = $('.frases').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 inserePlacar(){
   var corpoTabela = $('.placar').find('tbody');
   var usuario = 'jhonatan';
   var numPalavras = $('#contador-palavra').text();
   var botaoRemover = '<a href="#"><i class="material-icons">delete</i></a>'

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

   corpoTabela.prepend(linha);
}

function reiniciaJogo(){
   campo.attr('disabled',false);
   campo.val(' ');
   $('#contador-caractere').text('0');
   $('#contador-palavra').text('0');
   $('#tempo-digitacao').text(tempoInicial);
   inicializaCronometro();
   campo.removeClass('campo-desativado');
   campo.removeClass('borda-vermelha');
   campo.removeClass('borda-verde');

}
1 resposta

Oi, Jhonatan, tudo bem?

Você poderia por favor colocar todo o projeto no GitHub para eu poder analisar melhor?

Aguardo.

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