<main class="container">
<h1>Alura Typer</h1>
<p class="frase">Lorem ipsum dolor sit am et, consectetur adipiscing 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">10</span> segundos
</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols="80"></textarea>
<a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red" >
<i class="material-icons">restore</i>
</a>
<ul class="informacoes center">
<li><span id="contador-caracteres">0</span> caracteres</li>
<li><span id="contador-palavras">0</span> palavras</li>
</ul>
</main>
<script>
function inicializaCronometro(){
var tempoRestante = $("#tempo-digitacao").text();
campo.one('focus', function(){
$("#botao-reiniciar").attr("disabled", true);
var cronometroID = setInterval(function(){
tempoRestante--;
$("#tempo-digitacao").text(tempoRestante);
if(tempoRestante < 1){
campo.attr("disabled", true);
clearInterval(cronometroID);
$("#botao-reiniciar").attr("disabled", false);
campo.toggleClass("campo-desativado");
};
}, 1000);
});
};
$("#botao-reiniciar").click(reiniciaJogo);
function reiniciaJogo(){
campo.attr("disabled", false);
var conteudo = campo.val("");
$("#contador-caracteres").text("0");
$("#contador-palavras").text("0");
$("#tempo-digitacao").text(tempoInicial);
inicializaCronometro();
campo.toggleClass("campo-desativado");
}
</script>