Entrar Ainda não tem acesso?
2
respostas

[Dúvida] Minha Resolução + Dúvida

Referente ao curso JavaScript: validações e reconhecimento de voz, no capítulo Publicando e compartilhando e atividade Desafio: Game Over

por Diego Veras de Oliveira
| 7k xp | 3 posts
Analista de TI

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

if (Number.isNaN(numero)){
        if (chute === "game over"){
            recognition.abort();
            document.body.style.backgroundColor = "#850000";
            document.body.style.color = "#FFDB89";
            document.body.innerHTML = `
                <h1>QUE PENA, VOCÊ NÃO CHEGOU NO NÚMERO SECRETO <i class="fa-regular fa-face-sad-cry" style="color: #ffdb89;"></i></h1>
                <h3>Mas você pode tentar novamente clicando no botão abaixo</h3>
                `
            criarRestart();
            const btn = document.querySelector('.btn');
            btn.style.backgroundColor = "#DC0000";
            btn.style.color = "#FFF6C3";
            btn.innerText = "Jogar Novamente";
        } else{
            elementoChute.innerHTML += `<div>Valor Inválido</div>`;
        }

A função "criaRestart()" cria o botão de reset, com uma função para recarregar a página. Além disso, fiz a mudança da cor da página e dos textos dela, além de mudar o texto do botão.

Uma dúvida que eu tive foi: como faz para o "recognition" parar de ouvir? Além disso, consigo editar um ":hover" através do JavaScript?

2 respostas
por Nicolas Henrique de Souza
| 40.8k xp | 7 posts

Não sei muito sobre fazer o recognition parar de ouvir, mas uma ideia pra adicionar um ":hover" através do JavaScript é criar uma classe separada com a estilização do ":hover", e então inserir ela num elemento com a função "classList.add"

Eu usei essa função para mudar o estilo da página quando você ultrapassa um limite de chutes:

.gameOverScreen {
  background-color: var(--bg-color); /* preto */
  color: var(--game-over-color); /* vermelho */
}
if (numeroDeChutes > 10) {
    document.body.classList.add("gameOverScreen");

    document.body.innerHTML = `
    <h2>Game Over!</h2>
    <h3>Você ultrapassou o limite de chutes.</h3>
    <div class="gameover-result">O número secreto era: ${numeroSecreto}</div>
    <button id="jogarNovamente" class="btn-jogarNovamente gameOverScreenButton">Jogar novamente</button>`;
  }

Lembrando que você também pode fazer isso com elementos pegos utilizando o document.querySelector()!

por Lucas da Silva Ferreira
| 279k xp | 56 posts

Olá Diego, tudo bem com você? Espero que sim...

Para parar o "recognition" de ouvir, você pode usar o método stop() do objeto SpeechRecognition. Por exemplo: recognition.stop(). Isso fará com que o "recognition" seja interrompido.

Fonte: Método stop

Quanto à sua segunda um jeito de editar um ":hover" através do JavaScript é criando um estilo dinamicamente e adicionando-a ao documento.

Por exemplo:

let style = document.createElement('style');
style.innerHTML = `
  .btn:hover {
    color: red;
  }
`;
document.head.appendChild(style);

Espero ter ajudado a esclarecer sua dúvida. Se tiver mais alguma questão, é só perguntar!

Uma ótima semana e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado .