Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Ajuda para encontrar erro, pois não achei após árdua análise.

Referente ao curso jQuery: domine a biblioteca mais popular do mercado parte 1

por Lucas Correa Gomes dos Anjos
| 79.8k xp | 26 posts

Olá, solicito cordialmente ajuda para encontrar o erro em meu códio, não está armazenando os resultados no placar. Obrigado desde já!

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 class="center">Alura Typer</h1>
        <p class="frase center">Lorem ipsum dolor sit amet, consectetur adipisicing 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" 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>Nome</th>
                        <th>No. de palavras</th>
                        <th>Remover</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </section>
    </div>

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

</body>
</html>

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

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

    corpoTabela.append(linha);
}

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

    var link = $("<a>").addClass("botao-remover").attr("href", "#");
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

    // Ícone dentro do <a>
    link.append(icone);

    // <a> dentro do <td>
    colunaRemover.append(link);

    // Os dois <td> dentro do <tr>
    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;
}

function removeLinha(event) {//revisado
    event.preventDefault();
    $(this).parent().parent().remove();
}
4 respostas
por Lucas Correa Gomes dos Anjos
| 79.8k xp | 26 posts

main.js

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

//chama todas as funções
$(function() {
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    $("#botao-reiniciar").click(reiniciaJogo);
});

function atualizaTamanhoFrase() { //revisado
    var frase = $(".frase").text();
    var numPalavras = frase.split(" ").length;
    var tamanhoFrase = $("#tamanho-frase");

    tamanhoFrase.text(numPalavras);
}

function inicializaContadores() { //revisado
    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 inicializaMarcadores() {//revisado
    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 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() {//revisado
    campo.attr("disabled", true);
    campo.toggleClass("campo-desativado");
    inserePlacar();
}

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");
}
  • jquery.js (não alterado)
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Lucas, tudo bem?

Aparece algum erro no console do navegador? De que aula é referente esse código?

por Lucas Correa Gomes dos Anjos
| 79.8k xp | 26 posts

Oi, Laís. Tudo bem e você?

Esse código é referente a aula 06 do curso de jQuery parte 1. É o projeto final. Não aparece mensagem de erro, porém não está salvando no placar após o término do tempo estipulado para digitar as palavras. Comparei com o projeto final disponibilizado pelo instrutor e não achei diferença alguma.

solução!
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Lucas, tudo bem?

Corriga essa linha: var colunaPalavras = $("<td>").text(numPalavras); coloque a variável palavras var colunaPalavras = $("<td>").text(palavras);. No console do navegador apresentou o erro direcenionado a essa linha. Faça a correção e me fala se deu certo :}