body {
font-family: 'Arial', sans-serif;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
width: 350px;
}
h1 {
margin-bottom: 20px;
color: #4CAF50;
}
#nameInput {
padding: 10px;
width: 70%;
margin-right: 10px;
border: 2px solid #4CAF50;
border-radius: 8px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
#nameList {
margin-top: 20px;
list-style-type: none;
padding: 0;
}
#nameList li {
background-color: #f4f4f4;
padding: 8px;
margin-bottom: 5px;
border-radius: 6px;
font-size: 18px;
}
#drawButton {
margin-top: 20px;
padding: 12px 25px;
font-size: 18px;
background-color: #ff5722;
border-radius: 8px;
border: none;
color: #fff;
cursor: pointer;
}
#drawButton:hover {
background-color: #e64a19;
}
#result {
margin-top: 20px;
padding: 20px;
font-size: 24px;
font-weight: bold;
color: #fff;
background-color: #4CAF50;
border-radius: 10px;
display: none;
transition: opacity 1s ease;
}
.fadeIn {
opacity: 1;
}
.fadeOut {
opacity: 0;
}
</style>
<input type="text" id="nameInput" placeholder="Digite um nome">
<button id="addButton">Adicionar Nome</button>
<ul id="nameList"></ul>
<button id="drawButton">Sortear Nome</button>
<div id="result" class="fadeOut">
<p id="winner">Nenhum sorteio realizado ainda.</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const nameInput = document.getElementById('nameInput');
const addButton = document.getElementById('addButton');
const drawButton = document.getElementById('drawButton');
const nameList = document.getElementById('nameList');
const resultDiv = document.getElementById('result');
const winnerText = document.getElementById('winner');
let names = [];
// Função para adicionar nome à lista
addButton.addEventListener('click', () => {
const name = nameInput.value.trim();
if (name && !names.includes(name)) {
names.push(name);
nameInput.value = '';
updateNameList();
} else {
alert('Nome inválido ou já adicionado!');
}
});
// Função para sortear um nome aleatório
drawButton.addEventListener('click', () => {
if (names.length === 0) {
alert('Adicione pelo menos um nome!');
return;
}
// "Animação" para sortear o nome
resultDiv.classList.remove('fadeOut');
resultDiv.classList.add('fadeIn');
const randomIndex = Math.floor(Math.random() * names.length);
const winner = names[randomIndex];
winnerText.textContent = `O nome sorteado é: ${winner}`;
// Após 3 segundos, esconde o resultado
setTimeout(() => {
resultDiv.classList.remove('fadeIn');
resultDiv.classList.add('fadeOut');
}, 3000);
});
// Atualiza a lista de nomes na interface
function updateNameList() {
nameList.innerHTML = '';
names.forEach((name, index) => {
const li = document.createElement('li');
li.textContent = `${index + 1}. ${name}`;
nameList.appendChild(li);
});
}
});
</script>