JSFiddle - React, Tailwind, and code Playground

by bruno

HTML

<span id="test"></span><br/>
<input type="button" id="generate" value="Generate again"><br/><br/>
History: <div id="history"></div>
Unique numbers left: <span id="numLeft"></span>

JavaScript

function fisherYates ( myArray ) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

function RandomGenerator(maxNum) {

    this.max = maxNum;
    this.initRandomArray();

}

RandomGenerator.prototype.generate = function() {

    // if no more numbers available generate new array
    if( this.left === 0 ) this.initRandomArray();

    this.last = this.arr.pop();
    this.left = this.arr.length;
    this.history.push( this.last );
    return this.last;
}

RandomGenerator.prototype.initRandomArray = function() {

    this.arr = [];
    this.history = [];
    this.last = null;
    this.left = this.max;

    for( var i = 0; i < this.max; i++ ) {
        this.arr.push( i );
    }

    fisherYates( this.arr );

}




$(document).ready(function () {
    var range = 10;
    var mygen = new RandomGenerator(range );
    
    $('#generate').click(function(){
        $('#test').html(mygen.generate());
        $('#history').html('');
        $.each(mygen.history, function(index, value){
            $('#history').append(value+', ');
        });
        $('#numLeft').html(mygen.left);
    });
     $('#generate').click();
});