Olá pessoal!
Fiz várias mudanças, mudei a fonte no arquivo CSS, mudanças no index e app.
Testem por favor e digam o que acharam.
Vai o Git - https://github.com/juniorshop/jogo-do-numero-secretoModificado
No arquivo CSS separei essas duas tags p/ colocar fontes diferentes.
h1 {
font-family: 'Kristen ITC', sans-serif;
font-size: 72px;
padding-bottom: 3rem;
}
p,
button {
font-family: 'OCR-A BT', sans-serif;
}
Alterei a cor do
button:hover {
background-color: #2980b9;
Aterei o .container__botao p/ deixar os botões mais arredondados
.container__botao {
font-size: 24px;
font-weight: 700;
background-color: #1875E8;
border-radius: 20px;
border: 0;
margin-top: 2rem;
padding: 16px 24px;
width: 100%;
cursor: pointer;
}
No index, fiz várias alterações p/ colocar som nos botões, no campo de entrada do número, o atributo required aria-required="true" serve para indicar que um campo de formulário é obrigatório,.
No app.js
Fiz alterações e implementei novas funcionalidades, som nos botões, som nos eventos de erros e acertos, inclusive em homenagem ao nosso amigo das tardes de domingo consegui encontrar um arquivo de som com a voz do Faustão "Acertou".
let numeroLimite = 10; //não precisa mais
Essa função foi implementada para validar a entrada no campo número. As tentativas só são contadas quando a entrada é valida ou seja quando se coloca um número válido e não como estava antes.
//Essa função é para validar a entrada no campo número
function verificaChute(chute){
//função para tocar Som no Botão chutar
function tocarSomDoBotao(id1,id2) {
//Essa função toca som dos eventos botão reiniciar, erros e acertos
function tocarSomDeEventos(arquivoSom) {
Essa verifica se acertou o número digitado, com som nos eventos de erros e acertos
Vai abaixo mudanças que fiz no código que resolveu alguns conflitos na forma de pronunciar frases pelo responsiveVoice , nas palavras tentativa e tentativas que foi resolvido com um simples caractere sobrescrito 1** ª ** tentativa!, 2ª tentativa!. Também essa linha pode ser excluída let mensagemTentativas = Você descobriu o número secreto na ${tentativas}ª tentativa!; diminuindo o código sem a necessidade de operador ternário.
function verificarChute() {
let chute = document.querySelector('input').value;
resultadoChute = verificaChute(chute);
if (resultadoChute == true) {
if (chute == numeroSecreto) {
//exibirTextoNaTela('h2', <span style='color: green;'>Acertou</span>
);
tocarSomDeEventos('acertou-faustão.mp3');// Toca o som p/ acertos
exibirTextoNaTela('h1', 'Acertou!');//Mudei a fonte no CSS
//let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
//Essa linha foi um avanço na econômia de códio substituindo a linha acima e suas variáveis.
//O que mudou tudo foi ${tentativas}ª
//e a frase é pronunciada de forma correta. Antes era 1 um tentativa, 2 dois tentativas. Agora se resolveu esse problema.
let mensagemTentativas = `Você descobriu o número secreto na ${tentativas}ª tentativa!`;
exibirTextoNaTela('p', mensagemTentativas);
document.getElementById('reiniciar').removeAttribute('disabled');
} else {
if (chute > numeroSecreto) {
exibirTextoNaTela('p', 'O número secreto é menor');
tocarSomDeEventos('goofy-chute.mp3');// Toca o som p/ erros
} else {
exibirTextoNaTela('p', 'O número secreto é maior');
tocarSomDeEventos('goofy-chute.mp3');// Toca o som p/ erros
}
tentativas++;
limparCampo();//Para limpar o campo número
}
}
}
//Para limpar o campo número
function limparCampo() {