Oi Thiago, verifiquei seu código e fiz algumas correções, tirando alguns espaços indevidos, ajustando uns (). Não foi muita coisa, mais questão de indentação mesmo. Irei postar aqui e você pode fazer a comparação.
Validação:
function verificaSeOChutePossuiUmValorValido(chute) {
const numero = +chute
if (chuteForInvalido(numero)) {
elementoChute.innerHTML += '<div>Valor inválido</div>'
return
}
if (numeroForMaiorOuMenorQueOValorPermitido(numero)) {
elementoChute.innerHTML += `<div>Valor inválido: Fale um número entre ${menorValor} e ${maiorValor}</div>`
return
}
if (numero === numeroSecreto) {
document.body.innerHTML = `
<h2>Você ACERTOU, Parabéns, jogue denovo!!!</h2>
<h3>O número secreto era ${numeroSecreto}</h3>
`
}
else if (numero > numeroSecreto) {
elementoChute.innerHTML += `
<div>O Número secreto é menor <img src="https://img.icons8.com/arcade/64/null/circled-chevron-down.png"/></div>
`
} else {
elementoChute.innerHTML += `
<div>O Número secreto é maior <img src="https://img.icons8.com/arcade/60/null/circled-chevron-up.png"/></div>
`
}
}
function chuteForInvalido(numero) {
return Number.isNaN(numero)
}
function numeroForMaiorOuMenorQueOValorPermitido(numero) {
return numero > maiorValor || numero < menorValor
}
Sorteio:
const menorValor = 1
const maiorValor = 1000
const numeroSecreto = gerarNumeroAleatorio()
function gerarNumeroAleatorio() {
return parseInt(Math.random() * maiorValor + 1)
}
console.log('Número Secreto:', numeroSecreto)
const elementoMenorValor = document.getElementById('menor-valor')
elementoMenorValor.innerHTML = menorValor
const elementoMaiorValor = document.getElementById('maior-valor')
elementoMaiorValor.innerHTML = maiorValor
Reconhecimento:
const elementoChute = document.getElementById('chute')
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'pt-Br'
recognition.start()
recognition.addEventListener('result', onSpeak)
function onSpeak(e) {
chute = e.results[0][0].transcript
exibeChuteNaTela(chute)
verificaSeOChutePossuiUmValorValido(chute)
}
function exibeChuteNaTela(chute) {
elementoChute.innerHTML = `
<div>Você disse</div>
<span class="box">${chute}</span>
`
}
recognition.addEventListener('end', () => recognition.start())
Mas quanto ao bug que está acontecendo. Infelizmente é normal, porque a API ainda está em fase de testes e desenvolvimento, é como se ela ainda estivesse aprendendo outros idiomas.
Como ela foi criada para o inglês, ainda não reconhece todas as palavras em português e causa esses bugs. Mas acredito que com o tempo ela evolua cada vez mais.
Um abraço e bons estudos.
