Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Raffle a random name from a list (quickly display random names and gradually slow down until finally revealing winner)
<!DOCTYPE html>
<title>Raffle</title>
<script>
const names = `
Testy McTesterson
Teofila Kamer
Gerard Yann
Majorie England
Shantell Donaldson
Chuck Daily
Kenna Stockton
Dennise Swim
Ahmad Selvidge
Jamila Lovins
Davis Osbourn
Gisela Rodkey
Edda Heidrick
Krista Casson
Letitia Bucher
Luci Schommer
Veta Byrns
Louella Stahler
Alida Skiba
Roxie Eadie
Annita Besser
Marketta Jerry
Sparkle Dermody
Gilda Yoshimura
Aileen Kerns
Merlin Badura
Shaneka Molock
Mattie Lyvers
Golden Loggins
Arthur Durham
Humberto Westerman
Noelle Bays
Elizabeth Strohm
Stephenie Hollman
Wyatt Mcguigan
Casimira Abraham
Denver Bahena
Luvenia Schow
Mireya Flaherty
Claris Tellez
Lucie Carmouche
Ninfa Clyburn
Joel Cecere
Brigette Blubaugh
In Camper
Elden Hains
Gil Agarwal
Laureen Pio
Yajaira Annunziata
Shamika Jelinek
Kenda Roberge
`.split("\n").map(n => n.trim()).filter(n => !!n)
</script>
<style>
html { height: 100%; margin-top: 30vh; color: #fff;
background: #333; font: 2em sans-serif; }
html > * { text-align: center; }
button { font: 1em sans-serif; color: #fff; background: #868e96;
padding: .2em .5em; outline: none; border: none;
border-bottom: 4px solid #666; border-radius: .2em; }
button:active { border: none; margin-top: 4px; }
</style>
<h1 id="title">Raffle!!</h1>
<div id="name"><button onclick="cycle()">START</button></div>
<script>
const name = document.getElementById('name')
function cycle(show, time = 10) {
name.innerHTML = show ? names[Math.floor((Math.random() * names.length))] : ''
if (show && time > 2000) {
return document.getElementById('title').innerHTML = "We have a winner!"
}
setTimeout(() => cycle(!show, time * (time < 800 ? 1.04 : 1.5)), time)
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment