A inserção de placar não funciona. Não sei se está faltando algum código no material da aula, ou se eu digitei algo errado. Mas não consigo identificar o erro.
Arquivo "main.js":
var campo = $(".campo-digitacao");
var tempoInicial = $("#tempo-digitacao").text();
$(function(){
atualizaTamanhoFrase();
inicializaContadores();
inicializaCronometro();
inicializaMarcadores();
$("#botao-reiniciar").click(reiniciaJogo);
});
function atualizaTamanhoFrase(){
var frase = $(".frase").text();
var numPalavras = frase.split(" ").length;
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 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.toggleClass("campo-desativado");
inserePlacar();
}
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 reiniciaJogo(){
campo.attr("disabled", false);
campo.val("");
$("#contador-palavras").text("0");
$("#contador-caracteres").text("0");
$("#tempo-digitacao").text(tempoInicial);
inicializaCronometro();
campo.toggleClass("campo-desativado");
campo.removeClass("borda-vermelha");
campo.removeClass("borda-verde");
};
function inserePlacar(){
var corpoTabela = $(".placar").find("tbody");
var usuario = "Anderson";
var numPalavras = $("#contador-palavras").text();
var linha = novaLinha(usuario, numPalavras);
}
function novaLinha(){
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(numPalavras);
var colunaRemover = $("<td>");
var link = $("<a>").attr("href","#").addClass("botao-remover");
var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");
link.append(icone);
colunaRemover.append(link);
linha.append(colunaUsuario);
linha.append(colunaPalavras);
linha.append(colunaRemover);
return linha;
corpoTabela.append(linha);
}
Arquivo "principal.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>Alura Typer</h1>
<p class="frase">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius mod 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">19</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>
<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>Usuario</th>
<th>No. de palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
<tr>
<td>Usuario exemplo</td>
<td>99</td>
<td>
<a href="#">
<i class="small material-icons">delete</i>
</a>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>