3
respostas

Não aparece nenhum placar de jogo e pontuação por intermédio das palavras

Não aparece nenhum placar de jogo e pontuação por intermédio das palavras, e não consegui resolver.

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 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">20</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>
                    </tr>
                </thead>
                <tbody>

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

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

</body>
</html>

estilos.css

.campo-digitacao{
    font-size: 20px;
    height: 150px;
    border: 3px solid black;
}

.frase{
    font-size: 20px;
}

.campo-desativado {
    background-color: lightgray;
}

.icones{
    vertical-align: middle;

}

.borda-verde{
    border: 3px solid green;
}

.borda-vermelha{
    border: 3px solid red;
}

Main.js

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

$(document).ready(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);
        console.log("Digitado:" + digitado);
        console.log("Frase C.:" + comparavel);
        if(digitado == comparavel) {
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelha");
        }else{
            campo.addClass("borda-vermelha");
            campo.removeClass("borda-verde");
        }
    });
}

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

    var linha = "<tr"+
                    "<td>"+ usuario + "</td>"+
                    "<td>"+ numPalavras + "</td>"+
                "</tr>";    

    corpoTabela.append(linha);
}

    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");
    }
3 respostas

Oi, Lucas, tudo bem?

Faltou você chamar o <script src="js/placar.js"></script> dentro do html. Dessa forma, o placar vai ser adicionada na aplicação.

Olá Laís, eu carreguei a página e ela demorou bastante para abrir mas agora está rápida.

Eu chamei e não fex nada, eu tirei da função e carreguei novamente e percebi que ele criou dois layouts do placar com o texto Alura Typer e etc.

Eu achei muito estranho ele replicar a tela novamente.

Oi, Lucas!

Talvez tenha algo errado no seu código do placar.js, já que o problema inicial era aparece o layout do placar, mas se agora tem um problema quando você tenta adicionar dados ao placar, pode compartilhar aqui o arquivo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software