Created
August 25, 2017 11:00
-
-
Save cvuorinen/b4ded91f83914a19e87b3c2f2c926e5c to your computer and use it in GitHub Desktop.
Raffle a random name from a list (quickly display random names and gradually slow down until finally revealing winner)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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