JSFiddle - React, Tailwind, and code Playground

by stecb

HTML

<input id="getR" type="button" value="get Random" />

<div id="loopsWr">loops: <span id="loops"></span></div>
<div class="lbl">generation: <span id="old"></span></div>

CSS

body{
    font-family:"lucida grande","Helvetica Neue", Helvetica, Arial, sans-serif;
}
input#getR{
    padding:10px;
    text-transform:uppercase;
    color:#787878;
}
div.lbl{
    color:#ABABAB;
    padding:5px
}
div#loopsWr{
    color:#676767;
    padding:15px;
    text-align:center;
    font-size:56px;
}

JavaScript

var upperBound = 1000;
var loops = 0;
var myRandomNumbers = [];

$('getR').addEvent('click',generate);

function generate(){
    //resetting everything
    $('old').innerHTML = "";
    $('loops').innerHTML = "";
    
    myRandomNumbers = [];
    loops = 0;
    
    for(var i = 0; i<upperBound; i++){
        var randN = Math.floor(Math.random()*upperBound);
        while(myRandomNumbers.contains(randN)){
            loops++;
            randN = Math.floor(Math.random()*upperBound);
        }
        myRandomNumbers.push(randN);
    }
    $('loops').innerHTML = loops;
    $('old').innerHTML = myRandomNumbers.join(' - ');
}