Não adiciona, e também não consigo mais remover da tabela... | jQuery: domine a biblioteca mais popular do mercado parte 1

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por ROGERS CALAZANS TRIUMPHO

| 93.4k xp | 115 posts

main.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(" ").length;
        $("#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 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 reiniciaJogo(){
    campo.attr("disabled",false);
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
    campo.removeClass("borda-vermelha"); 
    campo.removeClass("borda-verde"); 

}
function finalizaJogo(){
    campo.toggleClass("campo-desativado");
    campo.attr("disabled", true);
}

placar.js

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


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

    corpoTabela.prepend(linha);
    var linha = novaLinha(usuario,numPalavras);
}

function finalizaJogo(){
    campo.toggleClass("campo-desativado");
    campo.attr("disabled", true);

}
function removeLinha(){

    event.preventDefault();
    $(this).parent().parent().remove();
};



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

4 respostas

por ROGERS CALAZANS TRIUMPHO

| 93.4k xp | 115 posts

19/08/2020

principal.js

<!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="frase">Esta frase tem varias e varias e varias belas palavras.</p>

            <ul class="informacoes center">
                <li>
                <i class="small material-icons">description</i>
                <span id="tamanho-frase">5</span> palavras
                </li>
                <li>
                <i class="small material-icons">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 id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
                <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>
                            <th>Remover</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Padrao</td>
                            <td>999</td>
                            <td>
                                <a href="#" class="botao-remover">
                                    <i class="small material-icons">delete</i>
                                </a>
                            </td>    
                        </tr>
                        <td>Rogers</td>
                    </tbody>
                </table>
            </section>
        <div/>
    </body>             
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    <script src="js/placar.js"></script>
</html>

solução!

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

19/08/2020

Oi, Rogers, tudo bem?

No seu arquivo main.js, função finalizaJogo() faltou você chamar a função inserePlacar(), ficando assim:

function finalizaJogo() {
    campo.attr("disabled", true);
    campo.toggleClass("campo-desativado");
    inserePlacar();
}

E no seu arquivo placar.js na função inserePlacar() você declarou duas vezes a variável linha e a há um erro sintático, não é prepend(linha) é append(linha), ficando assim:

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


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

    corpoTabela.append(linha);
}

E dentro da função novaLinha tem um outro erro sintátio na variável icone, sendo o correto text com t minúsculo e não maiúsculo. E o retorno da função, melhor declarar sem o parênteses, assim return linha .

Elimine a função finalizaJogo ela está igual ao do main, ou seja, duplicada e ela deve estar no arquivo main.js.

E deixe a funções em sequência no placar.js, primeiro, inserePlacar(), novaLinha() e por último removeLinhas()

Fazer as correções o placar será inserido na tabela.

Qualquer dúvida é só falar!

por ROGERS CALAZANS TRIUMPHO

| 93.4k xp | 115 posts

20/08/2020

Oi Laís! Perfeito! Está rodando normal agora.Obrigado!

insira seu código aqui

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

20/08/2020

Oi, Roger!

Que bom que consegui ajudar!

Bons estudos!