1
resposta

[Sugestão] Function pra habilitar e desabilitar os botões

Saudações devs, bom minha sugestão é a seguinte ao final do jogo além de habilitar o botão de reiniciar poderiamos também desabilitar o botão de chutar. Para isso primeiro é bom adicionarmos um id no botão chutar la no html, basta copiar como fazer ids do botão reiniciar =]

<button onclick="verificarChute()" id="chute" class="container__botao">Chutar</button>

com o botão chutar tendo um id, fica fácil pegarmos ele lá no javaScript como vimos na aula, então quando acertamos o número secreto podemos habilitar o botão de novo jogo e desabilitar o botão de chutar.

if(chute == numeroSecreto){
        exibirTextoNaTela('h1', 'Acertou');
        let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
        let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}`;
        exibirTextoNaTela('p', mensagemTentativas);
        document.getElementById('chute').setAttribute('disabled', true);
        document.getElementById('reiniciar').removeAttribute('disabled');
    }

e depois fazer a operação contrária quando formos reiniciar o jogo:

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    document.getElementById('reiniciar').setAttribute('disabled', true);
    document.getElementById('chute').removeAttribute('disabled');
}

mas ai ficamos com essas duas linhas de código quase identicas se repetindo em dois lugares do código então podemos melhorar isso criando uma função

function habilitarEDesabilidarButtons(disableButtonId, enableButtonId){
    document.getElementById(disableButtonId).setAttribute('disabled', true);
    document.getElementById(enableButtonId).removeAttribute('disabled');
}

Então chamamos a função ao acertar o numero secreto e ao reiniciar o jogo

if(chute == numeroSecreto){
        exibirTextoNaTela('h1', 'Acertou');
        let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
        let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}`;
        exibirTextoNaTela('p', mensagemTentativas);
        habilitarEDesabilidarButtons('chute', 'reiniciar');
    }
function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    habilitarEDesabilidarButtons('reiniciar', 'chute');
}

Sou bem iniciante então espero não ter cometido nenhum erro ^^' mas enfim fica aqui a sugestão, testei a exaustão esse código e me parece estar tudo funcionando perfeitamente, gostaria muito de feedbacks no código e caso haja alguma forma deixar ele melhor. Por favor faça Obrigado e bons estudos

1 resposta

Olá, Guilherme! Tudo bem?

Sua sugestão é realmente muito interessante e mostra que você está pensando em como melhorar a experiência do usuário, o que é um aspecto muito importante. Além disso, você também está pensando em como tornar o código mais limpo e reutilizável, criando uma função para habilitar e desabilitar os botões. Isso é uma ótima prática!

No geral, sua sugestão e seu código são muito bons! Continue assim, estudando e praticando!

Caso tenha dúvidas, estou aqui para ajudar.

Abraços e bons estudos!