Eu estava fazendo o exercício e até ao momento antes de inserir o ícone do botão reinciar o mesmo não poderia ser pressionado enquanto o tempo fosse menor que 1 segundo. Agora, eu consigo pressionar o botão, mesmo com o jogo em andamento, causando um bug igual o instrutor havia mostrado. Eu inspecionei o elemento e a tag "a" se encontra com a propriedade disabled. Gostaria de entender o por que disso estar ocorrendo. Segue código abaixo :
HTML - principal.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
<link rel="stylesheet" type="text/css" href="css/libs/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<link rel="stylesheet" href="css/libs/google-fonts.css">
</head>
<body>
<div class="container">
<h1 class="center"> Alura Typer </h1>
<p class="frase center">Lorem ipsum dolor sit amet, per eu vocent accommodare, te propriae pertinax assueverit per, eum an tamquam consetetur. Et duo sadipscing necessitatibus. Mea no etiam gloriatur, ullum appetere ne vim. Ea illud fastidii sensibus eum.</p>
<ul class="informacoes center">
<li> <i class="small material-icons icones">description</i> <span id="tamanho-frase">30 </span> palavras</li>
<li> <i class="small material-icons icones">query_builder</i> <span id="tempo-digitacao">10</span> segundos</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols="40"></textarea>
<a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">restore</i>
</a>
<ul class="center">
<li><span id="contador-caracteres">0</span> caracteres</li>
<li><span id="contador-palavras">0</span> palavras</li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>Javascript - main.js
var campo = $(".campo-digitacao");
var tempoInicial = $("#tempo-digitacao").text();
$(function(){
atualizaTamanhoFrase();
inicializaCronometro();
inicializaContadores();
inicializaMarcadores();
$("#botao-reiniciar").click(reiniciaJogo);
});
function reiniciaJogo(){
campo.attr("disabled",false);
campo.val("");
$("#contador-caracteres").text("0");
$("#contador-palavras").text("0");
$("#tempo-digitacao").text(tempoInicial);
inicializaCronometro();
//.toggleClass() serve para ao invés de ficar se preocupando se classe existe no HTML, ele automaticamente coloca se não tiver
// e tira se já existir.
campo.toggleClass("campo-inativo");
campo.removeClass("borda-vermelha");
campo.removeClass("borda-verde");
}
function atualizaTamanhoFrase(){
// Função .text() acessa o conteúdo de texto do retorno da função do jQuery.
// Se passar por parâmetro na função .text(), ele substitui o texto.
var frase = $(".frase").text();
//Função .split() separa as palavras de acordo com a regra passada por parâmetro, no caso espaço em branco.
var numPalavras = frase.split(" ").length;
//Selecionar o ID do HTML e colocar o número de palavras no seu texto.
var tamanhoFrase = $("#tamanho-frase").text(numPalavras);
}
function inicializaContadores(){
//Associa o evento de input no campo.
campo.on("input", function(){
//Retorna o valor do campo.
var conteudo = campo.val();
// /\S+/ é uma expressão regular que separa as palavras através dos espaços.
// A subtração de -1 corrige se quando apagar as palavras, ele não deve mostrar o contador como 1.
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();
// Função .one() executa o evento apenas uma vez, enquanto o .on() executa a todo momento o evento.
campo.one("focus", function(){
$("#botao-reiniciar").attr("disabled",true);
//A função setInterval() retorna um ID com o nome da variável.
var cronometroID = setInterval(function(){
tempoRestante--;
$("#tempo-digitacao").text(tempoRestante);
if(tempoRestante < 1){
//Função .attr() serve para adicionar ou alterar qualquer propriedade e atributo do HTML.
//Para alterar um atributo, deve passar o elemento ou propriedade e o valor dele como segundo parâmetro.
campo.attr("disabled",true);
//A função clearInterval impede que o tempo fique negativo
clearInterval(cronometroID);
$("#botao-reiniciar").attr("disabled",false);
campo.toggleClass("campo-inativo");
}
},1000)
});
}
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");
}
});
}
