Ao apertar o botão de troca frase o gif aparece e depois sai de cena como o esperado, só que assim que ele desaparece a mensagem de erro que criamos vem logo em seguida e depois de um curto tempo ela desaparece.
Como posso arrumar isso?
O correto é apenas o gif aparecer e a mensagem de erro só quando houver alguma implicação na internet ou no servidor.
Oi, Lucas, tudo bem?
Para que possa te ajudar melhor, preciso ver os códigos referentes. Se puder copiar e colar aqui, ajudaria bastante :}
Principal.html
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
$("body").animate(
{
scrollTop: posicaoPlacar+"px"
},1000);
}
function novaLinha(usuario, palavras) {
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(palavras);
var colunaRemover = $("<td>");
var link = $("<a>").addClass("botao-remover").attr("href", "#");
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;
}
function removeLinha() {
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut(1000);
setTimeout(function(){
linha.remove();
},1000);
}
function mostraPlacar(){
$(".placar").stop().slideToggle(2000);
}Frase.Js
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
$("body").animate(
{
scrollTop: posicaoPlacar+"px"
},1000);
}
function novaLinha(usuario, palavras) {
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(palavras);
var colunaRemover = $("<td>");
var link = $("<a>").addClass("botao-remover").attr("href", "#");
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;
}
function removeLinha() {
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut(1000);
setTimeout(function(){
linha.remove();
},1000);
}
function mostraPlacar(){
$(".placar").stop().slideToggle(2000);
}estilos.css
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
$("body").animate(
{
scrollTop: posicaoPlacar+"px"
},1000);
}
function novaLinha(usuario, palavras) {
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(palavras);
var colunaRemover = $("<td>");
var link = $("<a>").addClass("botao-remover").attr("href", "#");
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;
}
function removeLinha() {
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut(1000);
setTimeout(function(){
linha.remove();
},1000);
}
function mostraPlacar(){
$(".placar").stop().slideToggle(2000);
}
Placar.js
$("#botao-placar").click(mostraPlacar);
function inserePlacar() {
var corpoTabela = $(".placar").find("tbody");
var usuario = "Douglas"
var numPalavras = $("#contador-palavras").text();
var linha = novaLinha(usuario, numPalavras);
linha.find(".botao-remover").click(removeLinha);
corpoTabela.prepend(linha);
$(".placar").slideDown(500);
scrollPlacar();
}
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
$("body").animate(
{
scrollTop: posicaoPlacar+"px"
},1000);
}
function novaLinha(usuario, palavras) {
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(palavras);
var colunaRemover = $("<td>");
var link = $("<a>").addClass("botao-remover").attr("href", "#");
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;
}
function removeLinha() {
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut(1000);
setTimeout(function(){
linha.remove();
},1000);
}
function mostraPlacar(){
$(".placar").stop().slideToggle(2000);
}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");
}
Laís, tudo bem?
Na hora de carregar a página do localhost apareceu erro dizendo que eu não conseguiria acessar a página para ver o placar.
Tentei abrir e executar os comandos do terminal com o npm start, mas o computador pediu uma permissão em relação ao firewall eu não fiz nada e fechei a aba. Pois não entendi muito bem o que aquilo devia e achei que poderia ser prejudicial ao computador não sei se é alguma opção de desabilitar ou habilitar o firewall, por que apareceu essa mensagem ou o que devo fazer quando aparece sobre firewall?