Não atualiza o número de palavras no placar. ( verifiquei a resposta abaixo mas não consegui resolver).
<!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">Esta frase tem oito belas e grandiosas palavras.</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="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-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>Nº de palavras</th>
</tr>
</thead>
<tbody>
<tr>
<td>Douglas</td>
<td>10</td>
</tr>
<tr>
<td>Douglas</td>
<td>10</td>
</tr>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
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;
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() {
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 inserePlacar() {
var corpoTabela = $(".placar").find("tbody");
var usuario = "Paulo";
var numPalavras = $("#contador-palavras").text();
var linha = "<tr>"+
"<td>" + usuario + "</td>";+
"<td>" + numPalavras + "</td>"; +
"</tr>"
corpoTabela.prepend(linha);
}
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");
};
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas
respostas
Não atualiza o número de palavras no placar ( verifquei a resposta abaixo mas não resolveu ) Poderia me ajudar?
Fala ai Paulo, tudo bem? Olhando assim o código é bem complicado enxergar os pontos de erro.
Sendo assim, posso te pedir um favor? Compartilha o projeto completo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.
Pode compartilhar através do Github ou Google Drive (zipado).
Fico no aguardo.
Matheus! Segue o link do meu projeto. https://drive.google.com/drive/folders/1H1yfqHa0shF3VXQ354cY0rm2AJml0jf9?usp=sharing
Fala Paulo, eu estava sem acesso para download, fiz a solicitação aqui, consegue liberar ai?
Abraços.
Olá Matheus! para fazer o download, basta estar logado em um conta google, na barra de pesquisa clica na opção "Drive", depois clica na opção " Compartilhados comigo", clica com o botão direito no link que eu enviei e depois clica na opção "Fazer uma cópia", ele mostra a localização da cópia efetuada, clique neste link e encontrará a localização da cópia, neste momento é só clicar no arquivo e efetuar o download.
Mateus! Refiz a lição 5 e 6 partindo do projeto 4 finalizado e consegui solucionar o problema. O que encontrei de diferente no código anterior foram as inclusões indevidamente de ";" ao final da
| ver print abaixo:
CÓDIGO ANTERIOR
var linha = " | " + usuario + " |
| " + numPalavras + " |
| "+ usuario + " |
| "+ numPalavras + " |
Fala Paulo, o problema do download era que você precisava me dar permissão para poder baixar seus arquivos, o mesmo estava privado e não público.
Mas, fico feliz que tenha encontrando o problema, sempre que precisar não deixe de criar suas dúvidas.
Abraços e bons estudos.
solução!
Maheus! Obrigado por acompanhar.
Magina Paulo, sempre que precisar não deixe de criar suas dúvidas.
Abraços e bons estudos.