onde errei? | jQuery: domine a biblioteca mais popular do mercado parte 1

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
</head>
<body>
    <h1>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">
        <li><span id="tamanho-frase">19</span> palavras</li>
        <li>15 segundos</li>
    </ul>

    <textarea class="campo-digitacao" rows="8" cols ="40"></textarea>

<ul>
    <li><span id="contador-caracteres">0</span> caracteres</li>
    <li><span id="contador-palavras">0</span> palavras</li>
</ul>

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

main:

var frase = $(".frase").text(); var numPalavras = frase.split(" ").length; var tamanhoFrase = $("#tamanho-frase"); tamanhoFrase.text(numPalavras);

var campo = $(".campo-digitacao"); 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);

});