GreeceJS prize draw

Rudimentary prize draw

by Angelos Chaidas

HTML

<script src="https://fonts.googleapis.com/css?family=Roboto+Condensed:700"></script>
<div class="outer">
    <div class="inner">
        <h1 id="lucky_person">Let's go!</h1>
        <button id="pick">Draw</button>
    </div>
</div>

CSS

html,
body {
    height: 100%;
    width: 100%;
}

body.result {
    background: url("http://culture-mind.com/fireworks.gif") no-repeat center;
    background-size: cover;
    color: white;
}

body.result #lucky_person {
    color: white;
    text-shadow: 0 0 100px white;
}

.outer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.inner {
    text-align: center;
}

#lucky_person {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 200px;
    display: block;
    margin: 0;
}

button {
    position: absolute;
    left: 10px;
    top: 0;
    border: 0;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    color: white;
    background: #2196F3;
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
}

JavaScript

(function() {
  "use strict";

  // edit the following values range
  const range = [1, 150]; // [from, to] inclusive
  // if you want to exclude any numbers add them below
  const numbersToExclude = [];


  /////////////////////////////////////////////////////////////////////////////////
  const button = document.getElementById("pick");
  const luckyPerson = document.getElementById("lucky_person");
  let timer = null;
  const [from, to] = range;

  button.addEventListener("click", function() {
    if (!timer) {
      // Start drawing random numbers
      timer = window.setInterval((el) => {
        el.innerHTML = Math.floor(Math.random() * (to - from) + from);
      }, 50, luckyPerson);
      button.innerHTML = "Pick winner!";
      document.body.className = "";
    } else {
      clearInterval(timer);
      timer = null;
      button.innerHTML = "Draw";
      document.body.className = "result";
      luckyPerson.innerHTML = drawWinner(range, numbersToExclude)
    }
  });


  /**
   * Pick a random number between startNo and endNo included.
   * Note: this function handles ranges from 0 up to 65535
   *
   * @param {(number, number)} range - a range of numbers (0 - 65535) to pick inclusive 
   * @param {number[]} numbersToExclude - an optional array of numbers to exclude from
   *                                      the above range
   * @returns number - the lucky number
   */
  function drawWinner([from, to] = [0, 100], numbersToExclude = []) {
    if (from >= to || from < 0 || to > 65535) {
      throw new Error("range should be from 0 up to 65535 and 'from' smaller than 'to'");
    }
    
    let winner = self.crypto.getRandomValues(
      to > 255 ?
      new Uint16Array(1) :
      new Uint8Array(1)
    );

    while (
      winner[0] < from ||
      winner[0] > to ||
      numbersToExclude.includes(winner[0])
    ) {
      winner = self.crypto.getRandomValues(winner);
    }

    return winner[0];
  }

}());