Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Botão de frases aleatórias não funciona.

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 = $("

"); var colunaUsuario = $("
").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.

2 respostas

Já encontrei o erro, faltou em colocar # na chamada do botão! Obrigada!

solução!

Fala ai Maisa, tudo bem? Boa, fico feliz que tenha resolvido seu problema.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

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