Raffle Draw

index.html

<button class="roll" onclick="rollClick()">Roll</button>
<div class="names hide"></div>
<div class="winner hide"></div>
<button class="roll-again hide" onclick="rollClick()">Roll Again?</button>

raffle-draw.markdown

Raffle Draw

A Pen by Devshades on CodePen.

License.

script.js

const ENTRANTS = ["Chase", "Melvin", "Ash", "Stan"];

const rollEl = document.querySelector(".roll");
const rollAgainEl = document.querySelector(".roll-again");
const namesEl = document.querySelector(".names");
const winnerEl = document.querySelector(".winner");

function randomName() {
  const rand = Math.floor(Math.random() * ENTRANTS.length);
  const name = ENTRANTS[rand];
  namesEl.innerText = name;
}

function rollClick() {
  rollEl.classList.add("hide");
  rollAgainEl.classList.add("hide");
  winnerEl.classList.add("hide");
  namesEl.classList.remove("hide");

  setDeceleratingTimeout(randomName, 10, 30);

  setTimeout(() => {
    namesEl.classList.add("hide");
    winnerEl.classList.remove("hide");
    rollAgainEl.classList.remove("hide");

    const winner = namesEl.innerText;
    winnerEl.innerText = winner;
    winnerEl.innerHTML = `<span>And the winner is...</span><br>${winner}`;
  }, 4000);
}

function setDeceleratingTimeout(callback, factor, times) {
  const internalCallback = ((t, counter) => {
    return () => {
      if (--t > 0) {
        setTimeout(internalCallback, ++counter * factor);
        callback();
      }
    };
  })(times, 0);

  setTimeout(internalCallback, factor);
}

style.sass

$bg: #038540
$white: #fff
$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

*
  box-sizing: border-box
  -webkit-font-smoothing: antialiased

body
  color: $white
  background-image: linear-gradient(185deg, #038540, #FCDA68)
  font-family: $fontFamily
  font-weight: 900
  width: 100%
  min-height: 100vh
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  text-align: center

.roll
  cursor: pointer
  appearance: none
  color: white
  background-color: $bg
  text-decoration: none
  font-size: 3rem
  font-family: $fontFamily
  font-weight: 900
  border: 5px solid $white
  padding: .5em 2em
  border-radius: 3em
  transition: 200ms ease-in-out
  &:hover
    background-color: $white
    color: $bg
  
.names
  font-size: 2.5rem
  
.winner
  font-size: 4rem
  text-align: center
  span
    font-size: .35em
    font-weight: 500
    
.roll-again
  cursor: pointer
  appearance: none
  background-color: transparent
  font-family: $fontFamily
  font-weight: 700
  padding: 0
  margin-top: 2em
  color: $white
  border: none
  opacity: .5
  transition: 200ms ease-in-out
  &:hover
    opacity: 1

.hide
  display: none