function inicializaCronometro() { var tempoRestante = $("#tempo-digitacao").text(); campo.one("focus", function() { $("#botao-reiniciar").attr("disabled",true); var cronometroID = setInterval(function() { campo.attr("disabled", true); tempoRestante--; $("#tempo-digitacao").text(tempoRestante); if (tempoRestante < 1) { clearInterval(cronometroID); $("#botao-reiniciar").attr("disabled", false); finalizaJogo(); } }, 1000); }); }
Amigo você poderia colocar o código inteiro para eu te ajudar :) Pois tentei simular aqui, mas eu não sei o que a função "finalizaJogo()" faz. Assim que você colocar o código eu te ajudo :) Até mais!
Boa noite Rogério está da seguinte forma como sugere os exercícios opcionais mais não está funcionando..desde já agradeço.
var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");
$(function() {
atualizaTamanhoFrase();
inicializaContadores();
inicializaCronometro();
inicializaMarcadores();
$("#botao-reiniciar").click(reiniciaJogo);
});
function atualizaTamanhoFrase() {
var frase = $(".frase").text();
var numPalavras = frase.split(" ").length; // SPLIT conta a palavra a cada espaço
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() {
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 inicializaCronometro() {
var tempoRestante = $("#tempo-digitacao").text();
campo.one("focus", function() {
$("#botao-reiniciar").attr("disabled",true); //retirar
var cronometroID = setInterval(function() {
tempoRestante--;
$("#tempo-digitacao").text(tempoRestante);
if (tempoRestante < 1) {
campo.attr("disabled", true); //retirar
clearInterval(cronometroID);
$("#botao-reiniciar").attr("disabled", false); //retirar
finalizaJogo();
}
}, 1000);
});
}
function finalizaJogo() {
campo.attr("disabled", true);
campo.addClass("campo-desativado"); // toggleClass habilita e desabilita
inserePlacar();
}
function reiniciaJogo() {
campo.attr("disabled", false);
campo.val("");
$("#contador-palavras").text(0);
$("#contador-caracteres").text(0);
$("#tempo-digitacao").text(tempoInicial);
inicializaCronometro();
campo.removeClass("campo-desativado");
campo.removeClass("borda-vermelha");
campo.removeClass("borda-verde");
}
Amigo desculpa pedir tanto de você, mas eu não fiz esse curso, poderia colocar o html tbm hahaha, valeu cara, e já vou vendo aqui.
Não esta dando certo o envio vou verificar aqui.
Amigo clica no botão inserir código e coloque o HTML dentro dele o/ E eu já peguei uns erros aqui :) falta só testar
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
<link rel="stylesheet" href="css/libs/materialize.min.css">
<link rel="stylesheet" href="css/libs/google-fonts.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
<h1 class="center">Alura Typer</h1>
<p class="frase center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id="tamanho-frase">5</span> palavras
</li>
<li>
<i class="small material-icons icones">query_builder</i>
<span id="tempo-digitacao">5</span> segundos
</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols ="40"></textarea>
<div class="botoes">
<a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">restore</i>
</a>
<a id="botao-placar" class="btn-floating btn-large waves-effect waves-light greem">
<i class="material-icons">assignment</i>
</a>
</div>
<ul class="center">
<li><span id="contador-caracteres">0</span> caracteres</li>
<li><span id="contador-palavras">0</span> palavras</li>
</ul>
<section class="placar">
<h3 class="center">Placar</h3>
<table class="centered bordered">
<thead>
<tr>
<th>Nome</th>
<th>No. de palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/main.js"></script>
<script src="js/placar.js"></script>
</body>
</html>
Eu notei dois erros amigo, porém eles ainda não fizeram o botão desabilitar. Mas mesmo assim tenta para ver se te ajuda :)
Primeiro
function finalizaJogo() {
campo.attr("disabled", true);
campo.addClass("campo-desativado"); // toggleClass habilita e desabilita inserePlacar(); }
}
function reiniciaJogo() {
campo.attr("disabled", false);
campo.val("");
$("#contador-palavras").text(0);
$("#contador-caracteres").text(0);
$("#tempo-digitacao").text(tempoInicial);
inicializaCronometro();
campo.removeClass("campo-desativado");
campo.removeClass("borda-vermelha");
campo.removeClass("borda-verde");
}Você não estava fechando a função finalizaJogo, ela estava aberta até o final da reiniciaJogo, se atente a isso :)
Segundo:
function atualizaTamanhoFrase() {
var frase = $(".frase").text();
var numPalavras = frase.split(" ").length; // SPLIT conta a palavra a cada espaço var tamanhoFrase = $("#tamanho-frase");
var tamanhoFrase = $("#tamanho-frase");
tamanhoFrase.text(numPalavras);
}Aqui estava faltando a variavel tamanhoFrase, você deixou comentado que deveria usar ela, porém não instanciou a mesma.
Tenta essas modificações, e me procura de novo senão deu certo :)
Então está funcionando tudo certo conforme o curso o único problema está naquelas linhas que são funções opcionais para o botão que deixei comentada "retirar" que o curso sugere como opcionais, sem elas funciona corretamente tbm a única coisa que preciso é desabilitar o botão do reiniciar e habilitá- lo somente depois que o tempo finalizar, pois e o que não esta dando certo.
Ok, entendi. Então amigo, ao invés de usar "attr" usa "prop". Aparentemente depois do jQuery 1.6, ele ficou depreciado.
E amigo, agora que eu olhei. O botão é uma tag <a>, acredito eu que <a> não consegue ficar inativa, pelo menos não desse jeito, troque para tag <button> que você verá que vai funcionar.