Eu já comentei diversas vezes sobre a metodologia de aulas do curso de JQUERY. É muito fraca. Antes de iniciar esta aula, o botão REMOVER para a linha padrão funcionava perfeitamente. Após o acompanhamento da aula , ponto a ponto, o botão REMOVER parou de funcionar para linha padrão e para as novas linhas começou a funcionar. Favor rever o vídeo a partir dos 12 minutos e verifica que aula fica pendente de explicar o que ele fez com a linha que foi retirada na função removeLinha. O instrutor fala que será descolocada para outra parte do programa, mas não mostra. Nem tão pouco a explicação está na transcrição. Deprimente ter ficar caçando pelo em ovo . Mais uma vez parado por falhas do instrutor. Está punk se dedicar a este curso de JQUERY. Ninguém toma uma atitude.
var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");
$(function(){
atualizaTamanhoFrase();
inicializaContadores();
inicializaCronometro();
inicializaMarcadores();
$("#botao-reiniciar").click(reiniciaJogo);
});
function atualizaTamanhoFrase() {
var frase = $(".frase").text();
//console.log(frase);
var numPalavras = frase.split(" ").length;
//console.log(numPalavras);
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--;
//console.log(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);
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 = "Marcos";
var numPalavras = $("#contador-palavras").text();
var numCaracteres = $("#contador-caracteres").text();
var linha = novaLinha(usuario,numPalavras,numCaracteres);
linha.find(".botao-remover").click(removeLinha);
corpoTabela.prepend(linha);
}
function novaLinha(usuario,numPalavras,numCaracteres) {
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(numPalavras);
var colunaCaracteres = $("<td>").text(numCaracteres);
var colunaRemover = $("<td>");
var link = $("<a>").addClass("botao-remover").attr("href","#");
var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");
link.append(icone);//Insere o icone em i, no "a".
colunaRemover.append(link);
linha.append(colunaUsuario);
linha.append(colunaPalavras);
linha.append(colunaCaracteres);
linha.append(colunaRemover);
return linha;
}
function removeLinha() {
event.preventDefault();
$(this).parent().parent().remove();
}
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"); //remove a cor da borda, voltando para o original
campo.removeClass("borda-verde"); //remove a cor da borda, voltando para o original
}
