O botão de reiniciar o jogo funcionando enquanto não deveria

var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao"); //QUERYSELECTOR DO TEXTAREA

$(function(){ //IMPORTANTE PRA CARREGAR AS FUNÇÕES TODAS NO INÍCIO
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    $("#botao-reiniciar").click(reiniciaJogo);
    inicializaMarcadores();
})


function atualizaTamanhoFrase(){
    var frase = $(".frase").text();
    var numeroDePalavrasDoTexto = frase.split(" ").length;
    var tamanhoFraseDoContador = $("#tamanho-frase");
    tamanhoFraseDoContador.text(numeroDePalavrasDoTexto);
}

function inicializaContadores(){
    campo.on('input', function(){
        var conteudo = campo.val(); //nao pode ser VALUE; PEGAR O CONTEÚDO DO TEXTAREA
        var qtdPalavras = conteudo.split(/\S+/).length - 1;
        var contadorPalavras = $("#contador-palavras");
        contadorPalavras.text(qtdPalavras);

        var qtdCaracteres = conteudo.length;
        var contadorCaracteres = $("#contador-caracteres");
        contadorCaracteres.text(qtdCaracteres);
    })
}

function inicializaCronometro(){
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function(){                      //campo.ONE = faz a função apenas uma vez

        var cronometroID = setInterval(function(){
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);


            $("#botao-reiniciar").attr("disabled", true);  //deveria travar o botao, mas não tá travando


            if (tempoRestante < 1){
                clearInterval(cronometroID); //FEZ O CRONOMETRO PARAR

                finalizaJogo();
            }

        }, 1000);
    })
}

function finalizaJogo(){
    campo.attr("disabled", true); //adiciona o atrinuto DISABLED no textarea
    $("#botao-reiniciar").attr("disabled", false);
    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); //substr pegar o valor textual do campo todo e quebra

        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-verde");
    campo.removeClass("borda-vermelha");
}

arquivo PLACAR.JS

function inserePlacar(){
    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Dani";
    var numPalavras = $("#contador-palavras").text();

    var linha = novaLinha(usuario, numPalavras);

    linha.find(".botao-remover").click(removeLinha);

    corpoTabela.prepend(linha);
}

function novaLinha(usuario, palavras){
    var linha = $("<tr>");
    var colunaUsuario = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(palavras);
    var colunaRemover = $("<td>");

    var link = $("<a>").addClass("botao-remover").attr("href", "#");
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

    link.append(icone); //tag i dentro da tag a igual ao html

    colunaRemover.append(link);

    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;
}


function removeLinha(){
    event.preventDefault();
    $(this).parent().parent().remove(); //subindo na árvore do HTML, pai = td, pai do pai = <tr>
}

$(".botao-remover").click(removeLinha); //esse daqui apaga o que já vier no HTML

Benício, boa tarde!

Isso está ocorrendo porque o id tem que ser inserido no elemento <a> não no elemento <i> pois o i é só o ícone já o se refere ao botão todo!

Espero ter ajudado e bons estudos!

Olá, Felipe! Eu testei a mudança aqui, mas ainda assim o ícone continua "clicável" com o início do jogo. Estou usando o Chrome e testei no Safari e deu a mesma coisa.

Benicio, boa tarde!

Eu fiz um teste você pode ver aqui:

https://codepen.io/devcapu-the-looper/pen/voNaqe

E o ele não ficou clícavel após mudar o id de local, você poderia compartilhar seu código para que eu possa dar uma olhada?

Pois é!!! Vi no teu link, realmente tá funcionando bem. Vou colar de novo aqui:

<!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">
            <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red"><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ú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>

MAIN.JS

var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao"); //QUERYSELECTOR DO TEXTAREA

$(function(){ //IMPORTANTE PRA CARREGAR AS FUNÇÕES TODAS NO INÍCIO
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    $("#botao-reiniciar").click(reiniciaJogo);
    inicializaMarcadores();
})


function atualizaTamanhoFrase(){
    var frase = $(".frase").text();
    var numeroDePalavrasDoTexto = frase.split(" ").length;
    var tamanhoFraseDoContador = $("#tamanho-frase");
    tamanhoFraseDoContador.text(numeroDePalavrasDoTexto);
}

function inicializaContadores(){
    campo.on('input', function(){
        var conteudo = campo.val(); //nao pode ser VALUE; PEGAR O CONTEÚDO DO TEXTAREA
        var qtdPalavras = conteudo.split(/\S+/).length - 1;
        var contadorPalavras = $("#contador-palavras");
        contadorPalavras.text(qtdPalavras);

        var qtdCaracteres = conteudo.length;
        var contadorCaracteres = $("#contador-caracteres");
        contadorCaracteres.text(qtdCaracteres);
    })
}

function inicializaCronometro(){
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function(){                      //campo.ONE = faz a função apenas uma vez

        var cronometroID = setInterval(function(){
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);


            $("#botao-reiniciar").attr("disabled", true);  //deveria travar o botao, mas não tá travando


            if (tempoRestante < 1){
                clearInterval(cronometroID); //FEZ O CRONOMETRO PARAR

                finalizaJogo();
            }

        }, 1000);
    })
}

function finalizaJogo(){
    campo.attr("disabled", true); //adiciona o atrinuto DISABLED no textarea
    $("#botao-reiniciar").attr("disabled", false);
    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); //substr pegar o valor textual do campo todo e quebra

        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-verde");
    campo.removeClass("borda-vermelha");
}

PLACAR.JS

function inserePlacar(){
    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Dani";
    var numPalavras = $("#contador-palavras").text();

    var linha = novaLinha(usuario, numPalavras);

    linha.find(".botao-remover").click(removeLinha);

    corpoTabela.prepend(linha);
}

function novaLinha(usuario, palavras){
    var linha = $("<tr>");
    var colunaUsuario = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(palavras);
    var colunaRemover = $("<td>");

    var link = $("<a>").addClass("botao-remover").attr("href", "#");
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

    link.append(icone); //tag i dentro da tag a igual ao html

    colunaRemover.append(link);

    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;
}


function removeLinha(event){
    event.preventDefault();
    $(this).parent().parent().remove(); //subindo na árvore do HTML, pai = td, pai do pai = <tr>
}

$(".botao-remover").click(removeLinha); //esse daqui apaga o que já vier no HTML

Fiz uma gravação da tela de 1 minuto tentando mostrar isso: https://www.youtube.com/watch?v=jSUH8ZljsA0&feature=youtu.be

Benício, que estranho! De fato me parece que está tudo correto! Faz assim: disponibiliza o seu projeto (inteiro) via github e eu olho e já te respondo, assim eu consigo ver o código completo, tanto css quando todos os arquivos!

Aguardo sua resposta e bons estudos!

Pronto!

https://github.com/beniciodaniel/parte1

Benicio, boa tarde!

Eu fiz alguns testes e trocar o elemento <a> por um elemento <button> resolve o problema, olhando a documentação oficial, a tag a não possui o atributo disabled.

Eu realmente não sei dizer o porque de ter funcionado no link que eu mandei, caso eu descubra o motivo eu comento aqui, mas como solução agora, sabendo que você deseja continua o curso, basta alterar para a linha ficar assim:

<button id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">restore</i></button>

Espero ter ajudado e bons estudos!

Muito obrigado, Felipe!! Funcionando 100% agora!! Beleza!