HTML
CSS
JS
Preview
Çekiliş Programı
Katılımcı Ekle:
Ekle
Kazananı Çek
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .container { max-width: 600px; margin: 50px auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } .input-container { margin-bottom: 20px; } .input-container label { font-weight: bold; } .input-container input[type="text"] { width: 70%; padding: 8px; margin-right: 10px; } .input-container button { padding: 8px 20px; background-color: #4caf50; color: #fff; border: none; cursor: pointer; } .input-container button:hover { background-color: #45a049; } #participants-list { margin-bottom: 20px; } #winner { font-weight: bold; text-align: center; margin-top: 20px; }
let participants = []; function addParticipant() { let participantInput = document.getElementById("participant"); let participant = participantInput.value.trim(); if (participant !== "") { participants.push(participant); participantInput.value = ""; showParticipants(); } } function showParticipants() { let participantsList = document.getElementById("participants-list"); participantsList.innerHTML = "
Katılımcılar:
"; participantsList.innerHTML += "
"; participants.forEach(function(participant) { participantsList.innerHTML += "
" + participant + "
"; }); participantsList.innerHTML += "
"; } function drawWinner() { if (participants.length > 0) { let randomIndex = Math.floor(Math.random() * participants.length); let winner = participants[randomIndex]; document.getElementById("winner").innerText = "Kazanan: " + winner; } else { alert("Çekiliş için en az bir katılımcı ekleyin!"); } }
Görünüm