quando adicionei
campo.addClass("campo-desativado);pintou de cinza como esperado, porém não estou conseguindo remover, ao adc
campo.removeClass("campo-desativado");o mesmo não está pintando de branco... ALGUÉM PODE ME AJUDAR???
Solucionado
quando adicionei
campo.addClass("campo-desativado);pintou de cinza como esperado, porém não estou conseguindo remover, ao adc
campo.removeClass("campo-desativado");o mesmo não está pintando de branco... ALGUÉM PODE ME AJUDAR???
segue 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 href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
<h1 class="center">Alura Typer</h1>
<p class ="frase center">Esta frase tem seis belas palavras</p>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id="tamanho-frase">30</span> palavras</li>
<li>
<i class="small material-icons icones">av_timer</i>
<span id="tempo-digitacao">5</span> segundos</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols="80"></textarea>
<div class="botoes">
<a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar">
<i class="material-icons">history</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>Segue CSS
.campo-digitacao {
font-size: 20px;
height: 130px;
}
.frase {
font-size: 20px;
}
.icones {
vertical-align: middle;
}
.campo-desativado {
background-color: lightgray;
}JS
var tempoInicial = $('#tempo-digitacao').text();
var campo = $(".campo-digitacao");
$(function(){
tamanhoFrase();
inicializaContadores();
inicializaCronometro();
$("#botao-reiniciar").click(reiniciaJogo);
});
function tamanhoFrase() {
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(/\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(){
$("#botao-reiniciar").attr("disabled", true);
var cronometroId = setInterval(function(){
tempoRestante--;
$('#tempo-digitacao').text(tempoRestante);
if (tempoRestante < 1) {
campo.attr ('disabled', true);
clearInterval(cronometroId);
$("#botao-reiniciar").attr("disabled", false);
campo.addClass("campo-desativado");
}
},1000);
});
}
function reiniciaJogo() {
campo.attr('disabled', false);
campo.val("");
$('#contador-palavras').text("0");
$('#contador-caracteres').text("0");
$('#tempo-digitacao').text(tempoIncial);
inicializaCronometro();
campo.removeClass("campo-desativado");
};JA RESOLVI, OBRIGADA!!!