Inserir nome na tabela | jQuery: domine a biblioteca mais popular do mercado parte 1

Ola, nao estou conseguindo inserir o resutado na tabela

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

$(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(" ").length;
        $("#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(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
            clearInterval(cronometroID);
            finalizaJogo();

            }
        }, 1000);
    });
}   

function finalizaJogo() {
    campo.attr("disabled", true);
    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);

        if(digitado == comparavel) {
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelha");
        } else {
            campo.addClass("borda-vermelha");
            campo.removeClass("borda-verde");
        }
    });

};

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

    var linha = "<tr>"+
                    "<td>"+ usuario + "</td>"+
                    "<td>"+ numPalavras + "</td>"+
                "</tr>";

    corpoTabela.prepend(linha);
}

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

<!DOCTYPE html>
<html lang="pt-br"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Alura</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">Essa frase tem cinco palavras</p>

         <ul class"informacoes center">
             <li class=center>
                 <i class="small material-icons icones">description</i>
                 <span id="tamanho-frase">30</span> palavras
             </li>
             <li class=center>
                 <i class="small material-icons icones">query_builder</i>
                 <span id="tempo-digitacao" center>10</span> segundos
             </li>
         </ul>
        <textarea class="campo-digitacao rows="8" cols="40"></textarea>

        <div>
            <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons" id="botao-reiniciar">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>
    <section>
        <h3 class=center>Placar</h3>
        <table class="centered bordered">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>N de palavras</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Douglas</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Douglas</td>
                    <td>10</td>
                </tr>
            </tbody>
        </table>
    </section>


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


</body>
<htlm>

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

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

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

.icones{
    vertical-align: middle;
}

campo.on("input",function()){

});

.campo-correto{
    border: 3px solid green;
}

.campo.errado{
    border: 3px solid red;
}

tambem nao estou conseguindo colocar as cores na borda de acordo com acertos e erros.

Quaquer ajuda sera bem vinda