1
resposta

Não remove a linha padrão

Fui acompanhando a aula e fazendo igual, mas ao criar o botão de remover ele remove as linhas novas criadas ao clicar na lixeirinha, mas não remove a linha padrão que fica lá.

Meu código JS:

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

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 inserePlacar(){
    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Fábio";
    var numPalavras = $("#contador-palavras").text();

    var linha = novaLinha(usuario, numPalavras);
    linha.find(".botao-remover").click(removeLinha);
    //corpoTabela.append(linha); adiciona no final da tabela/ depois
    corpoTabela.prepend(linha);  // adiciona antes
}

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

    colunaRemover.append(link);

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

    return linha;
}

function removeLinha(event){
    event.preventDefault();
    $(this).parent().parent().remove();
}


function reiniciaJogo(){
  campo.attr("disabled", false);
  campo.val("");
  $("#contador-palavras").text("0");
  $("#contador-caracteres").text("0");
  $("#tempo-digitacao").text(tempoInicial);
  inicializaCronometro();
  //campo.removeClass("campo-desativado");
  campo.toggleClass("campo-desativado");
  campo.removeClass("borda-verde");
  campo.removeClass("borda-vermelha");
}
1 resposta

Oi Fábio como esse projeto é construído de maneira gradual não sei ao certo em que parte você está, mas vou deixar meu código do meu projeto pra você tentar identificar algum erro assim só olhando um script não deu pra identificar. Obs: Alguns nomes de variáveis diferem

var tempoInicial = $("#tempoRestante").text();
var campo = $(".campodigitacao");
var frase = $(".frase").text();

$(function () {
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();

    $("#botaoReiniciar").click(reiniciaJogo);

});

function atualizaTamanhoFrase() {
    var numPalavras = frase.split(" ").length;
    var tamanhoFrase = $("#quantidadepalavras");
    tamanhoFrase.text(numPalavras);
}

function inicializaContadores(){
    campo.on("input", function () {
        var conteudo_digitado = campo.val();
        var palavrasdigitadas = conteudo_digitado.split(/\S+/).length - 1;
        $('#contador-palavras').text(palavrasdigitadas);
        var caracteresdigitados = conteudo_digitado.length;
        $("#contador-caracteres").text(caracteresdigitados);
    });
}


function inicializaCronometro() {
    var tempoRestante = $('#tempoRestante').text();
    campo.one("focus", function () {
        var id = setInterval(function () {
            tempoRestante--;
            $('#tempoRestante').text(tempoRestante);
            if (tempoRestante < 1) {
                campo.attr("disabled", true);
                clearInterval(id);
                campo.addClass("campodesabilitado");
                inserePlacar();
            }
        }, 1000);
    });
}


function reiniciaJogo(){
    campo.attr("disabled", false);
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempoRestante").text(tempoInicial);
    inicializaCronometro();
    campo.removeClass("campo-correto");
    campo.removeClass(("campo-incorreto"));
    campo.removeClass("campodesabilitado")
}



function inicializaMarcadores(){
    campo.on('input',function () {
        var digitado = campo.val();
        var comparavel = frase.substr(0,digitado.length)
        // console.log(frase);
        console.log(digitado);
        console.log(comparavel);
        if (digitado==comparavel){
            campo.addClass("campo-correto");
            campo.removeClass("campo-incorreto");
        }else{
            campo.addClass("campo-incorreto");
            campo.removeClass("campo-correto");
        }
    });
}



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

Espero ter ajudado e bons estudos.

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