Meu código não está fazendo a comparação direito, a cor vermelha é a única que aparece e mesmo quando eu digito a frase corretamente. Vi em outro tópico que pode ser porque a frase precisa estar colada na tag <p>, e deu certo quando fiz isso, só que eu uso prettier pra formatar o código e ele quebra a linha automaticamente quando eu salvo. Tem algum outro jeito de fazer funcionar mesmo com a quebra de linha?
Oi, Luanna, tudo bem?
Desculpe a demora em te responder!
O problema que você relatou ocorre, pois a variável comparavel está sendo definida como uma substring da variável frase que possui o mesmo comprimento que a variável digitado, mas isso não significa que as duas strings são iguais. A condição if(digitado == comparavel) só será verdadeira se o usuário digitar a sequência exata de caracteres na mesma ordem que aparece na variável frase, o que é muito improvável em virtude da quebra de linha que você mencionou.
Podemos corrigir esse problema realizando algumas alterações na função inicializaMarcadores(). Utilizamos o operador de igualdade estrita (===), que leva em consideração tanto o valor quanto o tipo das variáveis. Além disso, podemos aplicar também a propriedade trim() para remover os espaços em branco extras que estão presentes no início e no final da string.
Dessa forma o código seria escrito da seguinte maneira:
function inicializaMarcadores() {
var frase = $(".frase").text().trim();
campo.on("input", function() {
var digitado = campo.val().trim();
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");
}
});
}
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!