Como descrevi no título, o botão reiniciar está perdendo toda a formatação quando clico no botão sortear alterando cor, fonte e tamanho, ficando apenas um quadrado pequeno enquanto o botão sortear está expandindo na horizontal. Minha dúvida é, isso é um desafio implícito ou eu fiz algo errado no CSS, não lembro de ter alterado nada no CSS.
Abaixo o CSS e JavaScript;
Java Script;
function sortear() { let quantidade = parseInt(document.getElementById('quantidade').value); let de = parseInt(document.getElementById('de').value); let ate = parseInt(document.getElementById('ate').value);
let sorteados = [];
let numero;
for (let i = 0; i < quantidade; i++) {
numero = obterNumeroAleatorio(de, ate);
while(sorteados.includes(numero)) {
numero = obterNumeroAleatorio(de, ate);
}
sorteados.push(numero);
}
let resultado = document.getElementById('resultado');
resultado.innerHTML = `<label class="texto__paragrafo">Números sorteados: ${sorteados}</label>`;
alterarStatusBotao();
}
function obterNumeroAleatorio(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function alterarStatusBotao() { let botao = document.getElementById('btn-reiniciar');
if (botao.classList.contains('container__botao-desabilitado')) {
botao.classList.remove('container__botao-desabilitado');
botao.classList.add('container-botao');
} else {
botao.classList.remove('container-botao');
botao.classList.add('container__botao-desabilitado');
}
}
function reiniciar() {
document.getElementById('quantidade').value = '';
document.getElementById('de').value = '';
document.getElementById('ate').value = '';
document.getElementById('resultado').innerHTML = <label class="texto__paragrafo">Números sorteados: nenhum até agora</label>
;
alterarStatusBotao();}
CSS;
- { box-sizing: border-box; margin: 0; padding: 0; color: white; }
body { background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%); height: 100vh; display: flex; align-items: center; justify-content: center; }
body::before { background-image: url("img/code.png"); background-repeat: no-repeat; background-position: right; content: ""; display: block; position: absolute; width: 100%; height: 100%; opacity: 0.4; }
.container { width: 80%; min-height: 50vh; display: flex; align-items: center; justify-content: space-between; border-radius: 24px; border: 1px solid #1875E8; box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15); background-image: url("img/Ruido.png"); background-size: 100% 100%; position: relative; overflow: hidden; }
.container__conteudo { display: flex; align-items: center; position: relative; width: 100%; }
.container__informacoes { flex: 1; padding: 3rem; }
.container__texto { margin: 12px 0; display: flex; flex-direction: column; }
.container__texto-azul { color: #1875E8; display: block;
}
.container__campo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.container__input { width: 130px; height: 72px; border-radius: 16px; background-color: #FFF; border: none; color: #1875E8; padding: 2rem; font-size: 24px; font-weight: 700; font-family: 'Inter', sans-serif; }
.container__botoes { display: flex; flex-direction: row; gap: 1em; }
.container__botao { border-radius: 16px; background: #1875E8; /* Azul */ padding: 16px 24px; font-size: 24px; width: 100%; font-weight: 700; border: none; cursor: pointer; }
.container__botao-desabilitado { border-radius: 16px; background: #6f6f70; padding: 16px 24px; font-size: 24px; width: 100%; font-weight: 700; border: none; cursor: not-allowed; }
h1 { font-family: 'Chakra Petch', sans-serif; font-size: 72px; font-style: normal; font-weight: 700; line-height: 100%; padding: 2rem; }
.texto__paragrafo { color: #FFF; font-family: 'Inter'; font-size: 32px; font-style: normal; font-weight: 400; line-height: normal; }
.container__imagem-pessoa { max-width: 100%; height: auto; margin-top: 2rem; }
button:disabled { background-color: gray; }
@media screen and (max-width: 1250px) { .container__imagem-pessoa { display: none; }
h1 {
font-size: 50px;
}
}
Já tentei encontrar o erro com a Luri, mas não consegui, utilizei outra ferramentas de IA porém, com nenhuma delas eu conseguiu resolver.