Food Roulette

What to eat today?

by kshep92

HTML

<div id="container">
    
    <div id="choice">Today you should go <span id="chosen">???</span> for lunch</div>

    <button id="spinner">Spin the wheel!</button>
</div>

CSS

button {
    display: inline-block;
    padding: 2em;    
    font-weight: bold;
    text-transform: uppercase;
}

div#container {    
    width: 80%;
    margin: auto;
    padding: 0.5em;
    text-align: center;
}

span#chosen {
    display: block;
    margin: 0.5em 0;
    font-size: 1.8em;
    color: #00A8FF;
}

div#choice {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.4em;
    text-transform: uppercase;
    margin-bottom: 0.5em;
}

JavaScript

(function() {
    
    var revolutions = 40;
    var currentTurn = 0;
    var time = 5;
    var delay;

    var places = ["Dopson's Roti", 
                  "Patraj", 
                  "Pizza Hut", 
                  "Chinee BBQ", 
                  "Irie Bites", 
                  "Chow's", 
                  "Stinky's", 
                  "Domino's",
                  "Pimentos",
                  "Lumiere",
                  "Green Pie Place",
                  "Hassan's Gyros",
                  "Me Asia",
                  "Long Circular",
                  "KFC",
                  "Subway",
                  "Wendy's"
                 ];
    
    function spinTheWheel() {
        var chosenPlace = Math.floor(Math.random() * places.length);
        document.getElementById("chosen").innerHTML = places[chosenPlace];     
        if(currentTurn <= revolutions) {
            currentTurn++;
            delay = setTimeout(spinTheWheel, time);
            time += 5;
        }
    }
    
    function resetAndSpin() {
        currentTurn = 0;
        time = 25;
        if(delay != undefined) clearTimeout(delay);
        spinTheWheel();
    }
    
    document.getElementById("spinner").addEventListener("click", resetAndSpin);
    
    
})();