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

A inserção de placar não funciona

A inserção de placar não funciona. Não sei se está faltando algum código no material da aula, ou se eu digitei algo errado. Mas não consigo identificar o erro.

Arquivo "main.js":

var campo = $(".campo-digitacao");
var tempoInicial = $("#tempo-digitacao").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 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.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 reiniciaJogo(){
    campo.attr("disabled", false);    
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");        
    $("#tempo-digitacao").text(tempoInicial);

    inicializaCronometro();
    campo.toggleClass("campo-desativado");    
    campo.removeClass("borda-vermelha");
    campo.removeClass("borda-verde");
};

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

    var linha = novaLinha(usuario, numPalavras);
}

function novaLinha(){
    var linha = $("<tr>");
    var colunaUsuario = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(numPalavras);
    var colunaRemover = $("<td>");

    var link = $("<a>").attr("href","#").addClass("botao-remover");
    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;

    corpoTabela.append(linha);
}

Arquivo "principal.html":

<!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>Alura Typer</h1>
        <p class="frase">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do             eius                mod 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">19</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" rows="8" cols="40"></textarea>
        <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
            <i class="material-icons">restore</i>
        </a>
        <ul>
            <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>Usuario</th>
                        <th>No. de palavras</th>
                        <th>Remover</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Usuario exemplo</td>
                        <td>99</td>
                        <td>
                            <a href="#">
                                <i class="small material-icons">delete</i>
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
2 respostas

Boa tarde, Anderson! Como vai?

Vc chegou a dar uma olhada no console do navegador e verificou se lá é apresentado algum log de erro? Se houver alguma mensagem por lá, vc poderia colar aqui o log completo para que eu possa dar uma olhada e tente te ajudar?

solução!

Bem. Obrigado, Gabriel,

Reli o código novamente comparando com o da aula e encontrei o que tinha passado despercebido antes. Faltaram os parâmetros "usuario" e "numPalavras" na função "novaLinha" :

function novaLinha(usuario, numPalavras){
    //cod...
}