Fiz o código de acordo com o exercício. Na tabela de pontuação está a
com a linha de título e na deixei uma linha de exemplo. Ao executar a funçãoinserePlacar()
após o término do tempo, as <!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>
<!-- código anterior -->
<section class="placar">
<h3 class="center">Placar</h3>
<table class="centered bordered">
<thead>
<tr>
<td>Usuário</td>
<td>No. de Palavras</td>
</tr>
</thead>
<tbody>
<tr>
<td>Usuario Exemplo</td>
<td>99</td>
</tr>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Segue código Javascript:
var tempoInicial = $("#cronometro").text();
var campo = $(".campo-digitacao");
$(function() {
atualizaTamanhoFrase();
atualizaContadores();
inicializaCronometro();
inicializaMarcadores()
$("#botao-reiniciar").click(reiniciaJogo);
campo.val("");
})
function atualizaTamanhoFrase() {
var frase = $(".frase").text();
var numPalavras = frase.split(" ").length;
var tamanhoFrase = $("#tamanho-frase");
tamanhoFrase.text(numPalavras);
}
function atualizaContadores() {
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 = $("#cronometro").text();
campo.one("focus", function() {
var cronometroId = setInterval(function() {
tempoRestante--;
$("#cronometro").text(tempoRestante);
$("#botao-reiniciar").attr("disabled", true);
if(tempoRestante < 1) {
clearInterval(cronometroId);
$("#botao-reiniciar").attr("disabled", false);
finalizaJogo();
}
}, 1000);
});
}
function finalizaJogo() {
campo.attr("disabled", true);
campo.toggleClass("campo-desativado");
inserePlacar();
}
function reiniciaJogo() {
campo.attr("disabled", false);
campo.val("");
$("#contador-caracteres").text("0");
$("#contador-palavras").text("0");
$("#cronometro").text(tempoInicial);
inicializaCronometro();
campo.toggleClass("campo-desativado");
campo.removeClass("borda-vermelha");
campo.removeClass("borda-verde");
}
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 = "Natan";
var numPalavras = $("contador-palavras").text();
var linha = novaLinha(usua