1
resposta

[Sugestão] Melhorando o código do amigo secreto

//Primeiro criei um id para os botões Adicionar e Sortear.
//Depois criei uma nova classe para os botões, mudando a cor, para identificar que estão desativados.
//Com isso, fiz o resgate desses botões, para criar essas funções de ativar e dasativar.
//A função de desativar acontece após sortear, e a função ativar acontece após reiniciar.
//Também padronizei os botões adicionar e sortear de uma forma e o reiniciar de outra.

let botaoAdicionar = document.getElementById('btnAdicionar');
let botaoSortear = document.getElementById('btnSortear');

function desativandoBotoes() {
botaoAdicionar.classList.remove('primary');
botaoAdicionar.classList.add('desativado');
botaoAdicionar.disabled = true;
botaoSortear.classList.remove('primary');
botaoSortear.classList.add('desativado');
botaoSortear.disabled = true;
}

function ativandoBotoes() {
botaoAdicionar.classList.remove('desativado');
botaoAdicionar.classList.add('primary');
botaoAdicionar.disabled = false;
botaoSortear.classList.remove('desativado');
botaoSortear.classList.add('primary');
botaoSortear.disabled = false;
}

1 resposta

Os 3 botões ficaram desse jeito no htmal

//button onclick="adicionar()" id="btnAdicionar" type="button" class="button primary">Adicionar</button
//button onclick="sortear()" id="btnSortear" type="button" class="button primary">Sortear</button
//button onclick="reiniciar()" type="button" class="button secondary">Reiniciar</button

E para a nova classe para os botões, apenas copiei e colei a classe de cima e mudei o nome e as cores.

.desativado {
background-color: #4e4e4e;
color: #ffffff;
}