Olá a todos! Estava indo tudo bem até eu implementar o código do scrollPlacar:
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
console.log(posicaoPlacar);
// $("html, body").animate({scrollTop: posicaoPlacar+"px"; //detalhe importante
// }, 1000);
}
Após colocá-lo no "placar.js", o placar deixou de aparecer sozinho quando terminasse o jogo e sei lá por que motivos também fez o botão verdinho de mostrar o placar parar de funcionar. E quando eu comento as últimas linhas da função tipo assim:
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
console.log(posicaoPlacar);
// $("html, body").animate({scrollTop: posicaoPlacar+"px"; //detalhe importante
// }, 1000);
}
Fazendo isso o placar volta a funcionar como estava.
Aqui seguem os meus códigos:
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>
<!-- Seja bem vindo ao curso de jQuery :) -->
<div class="container">
<h1 class="center">Alura Typer</h1>
<p class="frase center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id="tamanho-frase">30</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>
<div class="botoes">
<button id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">restore</i></button>
<button id="botao-placar" class="btn-floating btn-large waves-effect waves-light green"><i class="material-icons">assignment</i></button>
</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úmero de palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
<!-- SENDO ADICIONADO PELA INSEREPLACAR()-->
<tr>
<td>Douglas</td>
<td>10</td>
<td>
<a href="#" class="botao-remover">
<i class="small material-icons">delete</i>
</a>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script> <!-- Jquery precisa ser importado antes do main.js para poder ser utilizado por ele-->
<script src="js/main.js"></script>
<script src="js/placar.js"></script>
</body>
</html>