agnaldo10
<!DOCTYPE
html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Sorteador de Bolas</title>
<style>
body {
font-family: Arial,
sans-serif;
text-align: center;
background: #f0f0f0;
padding: 30px;
}
.bola {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
background-color:
#3498db;
color: white;
font-size: 32px;
margin: 10px auto;
display:
inline-block;
}
#historico {
margin-top: 20px;
}
.sorteadas {
display: flex;
flex-wrap: wrap;
justify-content:
center;
gap: 10px;
}
button {
padding: 10px 20px;
font-size: 18px;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Sorteador de Bolas</h1>
<div class="bola"
id="bolaAtual">?</div>
<button
onclick="sortearBola()">Sortear</button>
<div id="historico">
<h2>Bolas
sorteadas:</h2>
<div class="sorteadas"
id="sorteadas"></div>
</div>
<script>
const totalBolas = 60;
const bolasRestantes = Array.from({
length: totalBolas }, (_, i) => i + 1);
const bolasSorteadas = [];
function sortearBola() {
if
(bolasRestantes.length === 0) {
alert("Todas as bolas já foram sorteadas!");
return;
}
const indice =
Math.floor(Math.random() * bolasRestantes.length);
const numero =
bolasRestantes.splice(indice, 1)[0];
bolasSorteadas.push(numero);
document.getElementById("bolaAtual").innerText = numero;
const novaBola =
document.createElement("div");
novaBola.className =
"bola";
novaBola.textContent
= numero;
document.getElementById("sorteadas").appendChild(novaBola);
}
</script>
</body>
</html>
Comentários
Postar um comentário