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

Usuário padrão não é removido só os novos usuario criados

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

//selecionado o campo textarea
var campo = $(".campo-digitacao");


//funcao q chamo outras funcoes depois que a pagina foi carregada
$(document).ready(function(){  // atalho $(function(){}

    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    $("#botao-reiniciar").click(reiniciaJogo); // chamando a  funcao reinica jogo quando clicar no botao

});


function atualizaTamanhoFrase(){

    //selecionando com jQuery
    var frase = jQuery(".frase").text();   // jQuery = $ atalho
    var numPalavras = frase.split(" ").length; // separa as palavras por espaco dentro de um array e mostra qtd de palavras com .length
    // console.log(numPalavras);
    var tamanhoFrase = $("#tamanho-frase"); // pegando o conteudo do span atraves do id
    tamanhoFrase.text(numPalavras);  //troca o valor do span com o numero de palavras

}

function inicializaContadores(){

    campo.on("input", function(){   //evento input é executado enquanto é digitado um valor no input

        var conteudo = campo.val(); // pega o valor do input 
        var qtdPalavras = conteudo.split(/\S+/).length -1;  //regexp para contar so um espaco -1
        $("#contador-palavras").text(qtdPalavras);

        var qtdCaracteres = conteudo.length; // contando caracteres da string q esta dentro do input
        $("#contador-caracteres").text(qtdCaracteres);
    });

}

function inicializaCronometro(){

    //funcao game-over
    var tempoRestante = $("#tempo-digitacao").text(); // pegando o conteudo do span
    campo.one("focus", function(){ // seleciona o textarea por click ou por tab   //funcao one só executa uma vez
    var cronometroID = setInterval(function(){ // funcao retorna seu id
        tempoRestante--;
        $("#tempo-digitacao").text(tempoRestante); // alterando o conteudo do span a cada 1 segundo
        if(tempoRestante < 1){
            clearInterval(cronometroID); // quando tempo for menor q 1 o set interval para de funcionar
            finalizaJogo();

        }

    },1000); // a cada 1 segundo o valor do spam é decrementado
});

}

function finalizaJogo(){

    campo.attr("disabled",true);
    // campo.css("background-color","lightgray"); // alterando o css do textarea
    campo.addClass("campo-desativado"); // adicionado a classe do css com o fundo cinza
    inserePlacar();
}

function inicializaMarcadores(){

    var frase = $(".frase").text();
    campo.on("input",function(){

        var digitado = campo.val();
        var comparavel = frase.substr(0,digitado.length); // pega o tanto q foi digitado
        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"); // .find procura por um elemento filho de outro elemento
    var usuario = "Lucas";
    var numPalavras = $("#contador-palavras").text(); // selecionado o span com as palavras
    // var botaoRemover = "<a href='#'><i class='small material-icons'>delete</i></a>"

    var linha = novaLinha(usuario,numPalavras);
    linha.find(".botao-remover").click(removeLinha);

    // "<tr>"+
    //                 "<td>" + usuario + "</td>"+
    //                 "<td>" + numPalavras + "</td>"+
    //                 "<td>" + botaoRemover + "</td>"+
    //             "</tr>";
    corpoTabela.prepend(linha); // adicionando linha no comeco da tabela                


}

function novaLinha(usuario,palavras){  // recebendo usuario da function insere placar  // rec numPalavras
    var linha = $("<tr>"); // criando um elemtento html
    var colunaUsuario = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(palavras);
    var colunaRemover = $("<td>");
    var link = $("<a>").attr("href","#").addClass("botao-remover");
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

    link.append(icone); // adicionado tag i dentro de <a>
    colunaRemover.append(link); // colocando tag <a> dentro da <td>

    //colocando as td dentro da tr
    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;
}

function removeLinha(event){



        event.preventDefault();
        $(this).parent().parent().remove(); // removendo o pai do pai do elemento <a>


    }

function reiniciaJogo(){
    campo.attr("disabled", false)  //removendo o disable do text area com false
    campo.val(""); // limpa conteudo do textarea
    $("#contador-caracteres").text("0"); // zerando contadores
    $("#contador-palavras").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
    campo.removeClass("campo-desativado");
    campo.removeClass("borda-vermelha");
    campo.removeClass("borda-verde");

}
5 respostas

Fala José!

Tranquilo?

Analisando o seu código, só vi o código para remover a linha implementado na função inserePlacar(), sendo assim só as novas linhas recebem o comando

    linha.find(".botao-remover").click(removeLinha);

Essa linha deveria estar dentro de alguma função que é chamada quando a página é carregada, assim ele iria colocar essa função para todos os botões de remover que inicializam na página e para os que você inserir.

Se eu não me engano em alguma aula mais pra frente ele irá comentar isso, pois ele irá gerar o placar de acordo com o que vem de uma base de dados ;)

Espero ter ajudado!

Abraços!

tentei colocar nessa funcao mais sem sucesso

$(document).ready(function(){  // atalho $(function(){}

    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    removeLinha();
    linha.find(".botao-remover").click(removeLinha);
    $("#botao-reiniciar").click(reiniciaJogo); // chamando a  funcao reinica jogo quando clicar no botao

});
solução!

E ai José,

Então, olhando aqui já vejo dois problemas, pelo que eu me lembro na aula, não precisa ter esse removeLinha(); quando você carrega toda a página, pois você ao carregar não quer remover nenhuma linha, pode tirar esse código.

Outro problema é que você está fazendo linha.find(".botao-remover").click(removeLinha);, mas nessa parte do código quem é o objeto linha? você ainda não criou ele, você cria ele apenas lá no inserePlacar(), sendo assim nesse bloco você deveria procurar pelos elementos de remover na página, coloca esse comando no lugar e vê se funciona ;)

$(".botao-remover").click(removeLinha);

funcionou valeu obrigado

De nada cara ;)

Muitos anos quebrando a cabeça a gente começa a achar os erros mais rapidamente hehehe