Olá, pessoal! O botão que deveria trazer frases aleatórias do servidor não está funcionando. Eu já conferi os meus códigos com os downloads de projetos e não consegui identificar o erro. Eu consegui baixar o servidor na minha máquina (velha, rs), o servidor "está aberto" no terminal, todos os arquivos do projeto estão no drive C (para não confundir com outros arquivos de outros caminhos), consigo acessar minha aplicação através de localhost:3000/principal.html e também consigo acessar a lista de frases através de http://localhost:3000/frases (se bem que a lista de frases não aparece bonitinha como a do instrutor, com uma frase embaixo da outra, aqui está uma frase seguida da outra na mesma linha). Eu fui seguindo com o curso para ver se eu conseguia identificar o erro, mas não consegui. Agora creio que é hora de tentar identifica-lo antes de prosseguir. Enfim, seguem os códigos:
MAIN.JS var tempoInicial = $("#tempo-digitacao").text(); var campo = $(".campo-digitacao");
$(function(){ atualizaTamanhoFrase(); inicializaContadores(); inicializaCronometro(); inicializaMarcadores(); $("#botao-reiniciar").click(reiniciaJogo); });
function atualizaTempoInicial(tempo){ tempoInicial = tempo; $("tempo-digitacao").text(tempo); }
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 inicializaMarcadores(){ campo.on("input", function(){ var frase = $(".frase").text(); 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(){ campo.one("focus", function(){ var tempoRestante = $("#tempo-digitacao").text(); 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 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"); }
PLACAR.JS $("#botao-placar").click(mostraPlacar);
function inserePlacar(){ var corpoTabela = $(".placar").find("tbody"); var usuario = "Maisa"; var numPalavras = $("#contador-palavras").text(); var linha = novaLinha(usuario, numPalavras); linha.find(".botao-remover").click(removeLinha); corpoTabela.append(linha); $(".placar").slideDown(500); scrollPlacar(); }
function scrollPlacar(){ var posicaoPlacar = $(".placar").offset().top; $("body").animate( { scrollTop: posicaoPlacar + "px" }, 1000); }
function novaLinha(usuario, palavras){ var linha = $("
| ").text(usuario); var colunaPalavras = $(" | ").text(palavras); var colunaRemover = $(" | ");
var link = $("").addClass("botao-remover").attr("href","#");
var icone = $("").addClass("small").addClass("material-icons").text("delete");
link.append(icone);
colunaRemover.append(link);
linha.append(colunaUsuario);
linha.append(colunaPalavras);
linha.append(colunaRemover);
return linha;
}
function removeLinha(){ event.preventDefault(); var linha = $(this).parent().parent(); linha.fadeOut(1000); setTimeout(function(){ linha.remove(); },1000); } function mostraPlacar(){ $(".placar").stop().slideToggle(600); } FRASE.JS $("botao-frase").click(fraseAleatoria); function fraseAleatoria(){ $("#spinner").toggle(); $.get(" http://localhost:3000/frases", trocaFraseAleatoria).fail(function(){ $("#erro").toggle(); setTimeout(function(){ $("#erro").toggle(); },1500); }).always(function(){ $("#spinner").toggle(); }); }function trocaFraseAleatoria(data){ var frase = $(".frase"); var numeroAleatorio = Math.floor(Math.random()*data.length); frase.text(data[numeroAleatorio].texto); atualizaTamanhoFrase(); atualizaTempoInicial(data[numeroAleatorio].tempo);} Vou mandar o código do principal.html em outro post, não cabe aqui. |
