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

Fica salvando um nome e nº de palavras em branco

consigo adicionar e remover normalmente ao servidor, mas fica sempre salvando um conteúdo em branco

<!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">Por conseguinte, o comprometimento entre as equipes nos obriga à análise das condições financeiras e administrativas exigidas. Todavia, a crescente influência da mídia prepara-nos para enfrentar situações atípicas decorrentes do sistema de formação de quadros que corresponde às necessidades.</p>

        <div class="center">
            <img src="img/spinner.gif" alt="Spinner" id="spinner">
            <p id="erro">ocorreu um erro</p>
        </div>

        <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">5</span> segundos
            </li>
        </ul>

        <!-- se colocar espaço na área de conteúdo, vai gerar erro na contagem -->
        <textarea class="campo-digitacao" rows="8" cols="40"></textarea>

        <div class="botoes" id="botoes">
            <a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar">
                <i class="material-icons">restore</i>
            </a>
            <a class="btn-floating btn-large waves-effect waves-light green" id="botao-placar">
                <i class="material-icons">assignment</i>
            </a>
            <a class="btn-floating btn-large waves-effect waves-light blue" id="botao-frase">
                <i class="material-icons">shuffle</i>
            </a>
            <a class="btn-floating btn-large waves-effect waves-light cyan" id="botao-frase-id">
                <i class="material-icons">repeat_one</i>
            </a>
            <input type="number" id="frase-id" min="0">
            <a class="btn-floating btn-large waves-effect waves-light yellow" id="botao-sync">
                <i class="material-icons">swap_vert</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>Nome</th>
                        <th>Nº de Palavras</th>
                        <th>Remover</th>
                    </tr>    
                </thead>
                <tbody>
                    <tr>

                    </tr>
                </tbody>
            </table>
        </section>

    </div>

    <!-- para o jquery usar as funções do main, o jquery tem de aparecer antes -->
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    <script src="js/placar.js"></script>
    <script src="js/frase.js"></script>
</body>
</html>
2 respostas
solução!
/* chama o id botão ao clicar para a funcão mostraPlacar */
$("#botao-placar").click(mostraPlacar);

$("#botao-sync").click(sincronizaPlacar);

function inserePlacar(){
    /* procura dentro de placar o tbody da tabela para realizar inserção */
    var corpoTabala = $(".placar").find("tbody");
    var usuario = "Misa";
    var numPalavras = $("#contador-palavras").text();

    /* cria a linha no html */
    var linha = novaLinha(usuario,numPalavras);

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

    /* insere os dados que foram passdos para a linha no corpo da tabela */
    /* append insere no fim da tabela e prepend no incio dela */
    corpoTabala.prepend(linha);

    /* ao terminar o jogo ele mostra placar */
    $(".placar").slideDown(500);
    /* e depois rola para o placar adicionado */
    scrollPlacar();
}

function scrollPlacar(){
    /* seta com offset um scroll a partir do top */
    var posicaoPlacar = $(".placar").offset().top;
    $("html, body").animate(
    {
        scrollTop: posicaoPlacar+"px"
    },1000);
}

function novaLinha(usuario,palavras){
    /* assim você está criando um elemento linha(tr) dentro do html */
    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");

    /* coloca o icone dentro do link */
    link.append(icone);
    /* coloca link dentro da coluna */
    colunaRemover.append(link);

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

    return linha;

}

function removeLinha(event){
        /* para não rolar ao topo da tela */
        event.preventDefault();
        var linha = $(this).parent().parent();
        linha.fadeOut(1000);
        setTimeout(function(){
            linha.remove();           
        },1000);
}

/* ao clicar no botão a funcao ativa a tabela */
function mostraPlacar(){
    /* o .stop serve para fazer uma animação por vez. sem ele se fossem dados vários clicks ocorreria um bug */
    $(".placar").stop().slideToggle(600);
}


function sincronizaPlacar(){
    /* cria array */
    var placar = [];
    /* passar todas as tr's filhas de tbody */
    var linhas = $("tbody>tr");

    /* passa linha por linha para objeto */
    linhas.each(function(){
       /* envolve o elemento 'this' que é html com o '$' para poder usar jquery */
        /* find busca o primeiro td do tebody que é nomes, e o text captura o nome */
        var usuario =  $(this).find("td:nth-child(1)").text();
        var palavras = $(this).find("td:nth-child(2)").text();

        /* para salvar, criamos o objeto conforme as caracteristicas do banco em http://localhost:3000/placar */
        /* transforma em objeto */
        /* o id o banco quem cria */
        var score = {
            usuario: usuario,
            pontos: palavras 
        };

        /* para salvar dentro do array */
        placar.push(score);
    });
        /* para subir para p banco em http://localhost:3000/placar o array tem de virar objeto */
        var dados = {
            placar: placar
        };
    /* usando o metodo post para subir */
    $.post("http://localhost:3000/placar",dados,function(){
       console.log("salvou no servidor"); 
    });
}

/* esta função vai carregar a página com os dados do banco */
function atualizaPlacar(){
    $.get("http://localhost:3000/placar", function(data){
        /* para cada objeto, crie uma linha */
        $(data).each(function(){
            /* que já criamos anteriormente na function novalinha */
            var linha = novaLinha(this.usuario, this.pontos);

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

            $("tbody").append(linha);
        });

    });

}

Descobri qual era o problema.

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

                    </tr>
                </tbody>
            </table>
        </section>

eram esses tr's dentro do tbody