Erro ao verificar se a frase é igual a digitada | jQuery: domine a biblioteca mais popular do mercado parte 1

Main JS

var tempoInicial = $('#tempo-digitacao').text()
var campo = $('.campo-digitacao')

$( //Atalho para Document .ready
    function () {
        atualizaTamanhoFrase()
        inicializaContadores()
        inicializaCronometro()
        $("#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 () { //Input atualiza enquanto o usuário seleciona o campo
        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 () {
        var cronometroID = setInterval(() => {
            tempoRestante--;
            $('#tempo-digitacao').text(tempoRestante)
            if (tempoRestante < 1) {
                campo.attr('disabled', true)
                clearInterval(cronometroID)
                campo.addClass('campo-desativado')
            }
        }, 1000);
    })
}

var frase = $(".frase").text()
campo.on('input', function () {
    var digitado = campo.val()
    var comparavel = frase.substr(0, digitado.length)
    console.log('Digitado:' + digitado)
    console.log('Frase Completa:' + comparavel)
    if (digitado == comparavel) {
        console.log('Está Certo!')
    } else {
        console.log('Está Errado!')
    }
})

function reiniciaJogo() {
    campo.attr('disabled', false)
    campo.val('')
    $('#contador-palavras').text('0')
    $('#contador-caracteres').text('0')
    $("#tempo-digitacao").text(tempoInicial)
    inicializaCronometro()
    campo.removeClass('campo-desativado')
}

Principal.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 center">
            Recomece, se refaça, relembre o que foi bom, reconstrua cada sonho, redescubra algum dom, reaprenda quando errar, 
            rebole quando dançar, e se um dia, lá na frente, a vida der uma ré, recupere sua fé e RECOMECE novamente.</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" cols="40" rows="8"></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>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>

</body>

</html>

Mergulhe em programação