Botão reiniciar com bug. | jQuery: domine a biblioteca mais popular do mercado parte 1

Boa tarde, Galera! Preciso de ajuda com meu código.. Agradeço desde já.

Não está colocando borda verde ou vermelha no campo de digitação quando a frase é compatível ou não.

O campo de digitação não fica mais na cor lightgray quando o tempo acaba.

O Botão reiniciar voltou a ter aquele bug falado na aula anterior, no qual eu já tinha corrigido. (Ele pode ser reiniciado antes do tempo acabar, o que não deveria).

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 Type</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">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>
        </div>

        <script src="js/jQuery.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

JavaScript:

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() {
        $("#botao-reiniciar").attr("disabled", true);
        var cronometroID = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if(tempoRestante < 1){
                campo.attr("disabled", true);
                clearInterval(cronometroID);
                campo.toggleClass("campo-desativado");
                $("#botao-reiniciar").attr("disabled", false);

            }
        }, 1000);
    });
};

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 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");
        }
    });
}

CSS:

.campo-digitacao {
    font-size: 20px;
    height: 130px;
};

.frase {
    font-size: 20px;
    text-align: left;
};

.campo-desativado {
    background-color: lightgray;
};

.icones {
    vertical-align: middle;
};

.borda-verde {
    border: 3px solid green;
};

.borda-vermelha {
    border: 3px solid red;
};

Mergulhe em programação