Toda vez que dou espaço e digito palavras erradas, mesmo aparecendo em vermelho o textarea ele está contando como certo e mostrar no placar as palavras erradas contadas.
Função atualizaTamanhoFrase:
function atualizaTamanhoFrase() {
var frase = $(".frase").text();
var numeroPalavras = frase.split(" ").length;
var tamanhoFrase = $("#tamahho-frase");
tamanhoFrase.text(numeroPalavras);
}
Função inicializaMarcadores:
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");
}
});
}
HTML:
<p class="frase center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id="tamahho-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>
<a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
<i class="material-icons">assignment</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>