HTML
<!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="frases center"> eu me chamo jhonatan barbosa de oliveira </p>
<ul class="informaçoes center">
<li>
<i class="small material-icons icones">description</i>
<span class="tamanho-frase">10</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>
<div class="botoes">
<a class="btn-floating btn-large waves-effect waves-light red " id="botao-reiniciar">
<i class="material-icons">restore</i></a>
</div>
<ul class="center">
<li><span id="contador-caractere"></span> Caractere</li>
<li><span id="contador-palavra"></span> Palavras</li>
</ul>
<section class="placar">
<h3 class="center">Placar</h3>
<table class="centered bordered" >
<thead>
<tr>
<th>Nome</th>
<th>Nº de Palavras</th>
<th>remover</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jhonatan</td>
<td>10</td>
<td><a href="#"></a><i class="material-icons">delete</i></td>
</tr>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
JQUERY
var tempoInicial = $('#tempo-digitacao').text();
var campo = $('.campo-digitacao');
$(document).ready(function(){
inicializaContadores();
inicializaCronometro();
reiniciaJogo();
inicializaMarcadores();
$('#botao-reiniciar').click(reiniciaJogo);
})
function inicializaContadores(){
campo.on('input',function(){
var conteudo = campo.val();
var qtdPalavra = conteudo.split(/\s+/).length -1;
$('#contador-palavra').text(qtdPalavra);
qtdCaractere = conteudo.split(/\s+/).length -1;
$('#contador-caractere').text(qtdCaractere);
});
}
function inicializaCronometro(){
var tempoRestante = $('#tempo-digitacao').text();
campo.one('focus',function(){
var cronometroID = setInterval(function(){
tempoRestante--;
$('#tempo-digitacao').text(tempoRestante);
if (tempoRestante < 1) {
clearInterval(cronometroID);
finalizaJogo();
}
},1000);
});
}
function finalizaJogo(){
campo.attr('disabled',true);
campo.addClass('campo-desativado');
inserePlacar();
}
function inicializaMarcadores(){
var frase = $('.frases').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 = 'jhonatan';
var numPalavras = $('#contador-palavra').text();
var botaoRemover = '<a href="#"><i class="material-icons">delete</i></a>'
var linha = '<tr>'+
'<td>'+ usuario +'</td>'+
'<td>'+ numPalavras +'</td>'+
'</tr>';
corpoTabela.prepend(linha);
}
function reiniciaJogo(){
campo.attr('disabled',false);
campo.val(' ');
$('#contador-caractere').text('0');
$('#contador-palavra').text('0');
$('#tempo-digitacao').text(tempoInicial);
inicializaCronometro();
campo.removeClass('campo-desativado');
campo.removeClass('borda-vermelha');
campo.removeClass('borda-verde');
}
