2
respostas

A linha padrão não é mais removida depois das alterações para remover as novas linhas

Boa tarde, após as modificações do capítulo para ser possível remover as novas linhas adicionadas, parei de conseguir remover a linha padrão, segue o código:

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


$(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 qtdCaracters = conteudo.length;
        $("#contador-caracteres").text(qtdCaracters);
    });
}
function inicializaCronometro(){
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus",function(){
        $("#botao-reiniciar").attr("disabled",true);
        var cronometroId = setInterval(function(){
            tempoRestante--;
            console.log(tempoRestante);
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1){
                clearInterval(cronometroId);
                finalizaJogo();
                $("#botao-reiniciar").attr("disabled", false);
            }
        }, 1000);
    });
}
function finalizaJogo(){
    campo.attr("disabled", true);
    campo.addClass("campo-desativado");
    inserePlacar();

}

function inicializaMarcadores(){
    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("bora-verde");
        }
    });

}

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

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

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

    corpoTabela.prepend(linha);
}

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();
}
2 respostas

Boa noite, Felipe! Como vai?

No console do navegador é apresentado algum log de erro? Se sim, vc poderia colar aqui o log completo para eu dar uma olhada e tentar te ajudar?

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Não apresenta nenhum erro. Vou enviar o código em HTML também.

<!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">Altura Typer</h1>
    <p class="frase center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <ul class="informacoes center">
        <li>
            <i class="small material-icons icones">description</i>
            <span id="tamanho-frase">5</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" cols="30" rows="10"></textarea>
    <div class="butoes">
        <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-caracteres">0</span> caracteres</li>
        <li><span id="contador-palavras">0</span> palavras</li>
    </ul>
    <section class="placar">
        <h3 class="center">Placar</h3>
        <table class="centered bordered">
            <thead>
                <tr>
                    <th>Usuário</th>
                    <th>No. de palavras</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Felipe</td>
                    <td>10</td>
                    <td><a href="#"><i class="small material-icons">delete</i></a></td>
                </tr>
            </tbody>
        </table>
    </section>

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