Hello
I'm doing a little game with javascript, where the program gives a certain time for the player to write a sentence, counts the letters, words and presents on a scoreboard the results on a scoreboard. I added a scrolling effect to when I finish each round, the page scrolls to the leaderboard, but my code only works in chrome. Does anyone have any idea how to reverse this?
This is my 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="frase">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod 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">3</span> segundos
</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols ="40"></textarea>
<div class="botoes">
<a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
<i class="material-icons">restore</i>
</a>
<a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
<i class="material-icons">assignment</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>
<th>Usuário</th>
<th>N° de palavras</th>
<th>Remover</th>
</thead>
<tbody>
<tr>
<td>usuário1</td>
<td>99</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>
<script src="js/placar.js"></script>
<script src="js/main.js"></script>
This is my javascript with the functions related to the board:
function inserePlacar() {
var corpoTabela = $(".placar").find("tbody");
var usuario = "Leonardo";
var numPalavras = $("#contador-palavras").text();
var linha = novaLinha(usuario,numPalavras);
linha.find(".botao-remover").click(removeLinha);
corpoTabela.prepend(linha);
$(".placar").slideDown(500);
scrollPlacar();
}
function novaLinha(usuario, palavras) {
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(palavras);
var link = $("<a>").attr("href","#").addClass("botao-remover");
var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");
var colunaRemover = $("<td>");
link.append(icone);
colunaRemover.append(link);
linha.append(colunaUsuario);
linha.append(colunaPalavras);
linha.append(colunaRemover);
return linha;
}
function removeLinha(event) {
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut(1000);
setTimeout(function(){
linha.remove;
},1000);
}
$("#botao-placar").click(mostraPlacar);
function mostraPlacar() {
$(".placar").stop().slideToggle(600);
}
function scrollPlacar() {
var posicaoPlacar = $(".placar").offset().top;
$("body").animate(
{
scrollTop: posicaoPlacar + "px"
},1000);
}