JSFiddle - React, Tailwind, and code Playground

Euro Football lucky dip 2016

by tonytlwu

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
        <h3>Enter names and press <em>Run</em></h3>
        <div class="form-group">
            <textarea id="names" class="form-control" rows="3">Tony, Brian, Crystal, Sandy, John, Max, Karen, Ting, WZ, Gabby</textarea>
        </div>
        <input type="hidden" id="countries" value="France, Romania, Albania, Switzerland, England, Russia, Wales, Slovakia, Germany, Ukraine, Poland, Nothern Ireland, Spain, Czech Republic, Turkey, Croatia, Belgium, Italy, Republic of Ireland, Sweden, Portugal, Iceland, Australia, Hungry" />
        <div class="form-group">
            <button class="btn btn-primary btn-lg btn-block" id="btn">Run</button>
            <button class="btn btn-default btn-lg btn-block hidden" id="clear">Clear</button>
        </div>
        <pre id="debug" class="hidden"></pre>
    </div>
  </div>
</div>

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>

JavaScript

/* Array shuffling prototype function */

Array.prototype.shuffle = function() {
    var input = this;
     
    for (var i = input.length-1; i >=0; i--) {
        var randomIndex = Math.floor(Math.random()*(i+1)); 
        var itemAtIndex = input[randomIndex]; 
         
        input[randomIndex] = input[i]; 
        input[i] = itemAtIndex;
    }
    return input;
}

if (localStorage.getItem("names")) {
    document.getElementById("names").value = localStorage.getItem("names");
}


var run = function () {
	var names = document.getElementById("names").value.split(",");
    localStorage.setItem("names",names);
	var countries = document.getElementById("countries").value.split(",");
    var output = "";
    for ( var i = 0, l = names.length; i < l; i++ ) {
        output += names.shuffle().pop().trim() + ": " + countries.shuffle().pop().trim() + "<br>";
    }
    document.getElementById("debug").innerHTML = output;
    document.getElementById("debug").classList.remove("hidden");
    document.getElementById("clear").classList.remove("hidden");
};

var clear = function () {
	document.getElementById("debug").classList.add("hidden");
    document.getElementById("clear").classList.add("hidden");
};

document.getElementById("btn").addEventListener("click",run,false);
document.getElementById("clear").addEventListener("click",clear,false);