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

var min = 2,
    max = 63,
    button = document.getElementById("pick"),
    lucky_person = document.getElementById("lucky_person"),
    timer = null,
    font_size = 200;

// Lazy load our fireworks
var fireworks = new Image();
fireworks.src = "http://culture-mind.com/fireworks.gif";

// Buttonclick
button.addEventListener("click", function() {
    if (!timer) {
        // Start drawing numbers
        timer = window.setInterval(drawPrize, 50);
        button.innerHTML = "Pick winner!";
        document.body.className = "";
    } else {
        clearInterval(timer);
        button.innerHTML = "Draw";
        timer = null;
        document.body.className = "result";
    }
});

function drawPrize() {
    lucky_person.innerHTML = Math.floor(Math.random() * (max - min) + min);
    lucky_person.style.fontSize = (++font_size) + "px";
}