var MIN_PRESET = 1;
var MAX_PRESET = 50;
//---
var inputRandom = document.getElementById( 'txtInputRandom' );
var inputMin = document.getElementById( 'txtInputMin' );
var inputMax = document.getElementById( 'txtInputMax' );
var inputRemove = document.getElementById( 'txtInputRemove' );
var outputRandom = document.getElementById( 'txtOutputRandom' );
var outputGenerated = document.getElementById( 'txtOutputGenerated' );
var btInit = document.getElementById( 'btInit' );
var btGenerate = document.getElementById( 'btGenerate' );
var btRemove = document.getElementById( 'btRemove' );
var initiated = false;
var min = MIN_PRESET;
var max = MAX_PRESET;
var randomValue;
var randomValueIndex;
var randomValueHolder;
var randomValueAlreadyUsedHolder;
//---
inputRandom.onkeyup = function() {
this.value = this.value.replace( /[^\d, ]+/g, '' );
init();
};
inputMin.onkeyup = inputMax.onkeyup = function() {
this.value = this.value.replace( /[^\d]/, '' );
init();
};
inputRemove.onkeyup = function() {
this.value = this.value.replace( /[^\d ]/, '' );
};
inputMin.value = min.toString();
inputMax.value = max.toString();
btInit.addEventListener( 'click', btInitHandler, false );
btGenerate.addEventListener( 'click', btGenerateHandler, false );
btRemove.addEventListener( 'click', btRemoveHandler, false );
//---
function btInitHandler( e ) {
init();
};
function btGenerateHandler( e ) {
generate();
};
function btRemoveHandler( e ) {
removeFromList();
};
//---
function init() {
var i, j;
//---
initiated = true;
//---
if ( inputMin.value.length != 0 ) {
min = parseInt( inputMin.value );
}
if ( inputMax.value.length != 0 ) {
max = parseInt( inputMax.value );
}
//---
outputRandom.value = '';
outputGenerated.value = '';
//---
if ( min >= max ) {
alert( 'MAX must be greater than MIN' );
return;
}
//---
randomValueIndex = -1;
randomValueHolder = [];
for ( i = min; i <= max; i++ ) {
randomValueHolder.push( i );
}
shuffle( randomValueHolder );
//---
if ( inputRandom.value.length > 0 ) {
randomValueAlreadyUsedHolder = inputRandom.value.split( ',' );
for ( i = 0; i < randomValueAlreadyUsedHolder.length; i++ ) {
randomValueAlreadyUsedHolder[ i ] = parseInt( randomValueAlreadyUsedHolder[ i ] );
}
//---
var removeIndexHolder = [];
var tempHolder = [];
for ( i = 0; i < randomValueAlreadyUsedHolder.length; i++ ) {
var index = randomValueHolder.indexOf( randomValueAlreadyUsedHolder[ i ] );
if ( index > -1 ) {
randomValueIndex++;
randomValueHolder.splice( index, 1 );
tempHolder[ i ] = randomValueAlreadyUsedHolder[ i ];
}
}
randomValueHolder = tempHolder.concat( randomValueHolder );
for ( i = 0; i < tempHolder.length; i++ ) {
if ( i === tempHolder.length - 1 ) {
outputGenerated.value += tempHolder[ i ].toString();
} else {
outputGenerated.value += tempHolder[ i ].toString() + ", ";
}
}
}
};
//---
function generate() {
if ( !initiated ) {
alert( 'INIT first!' );
return;
}
randomValue = getRandomValue();
if ( randomValue != null ) {
outputRandom.value = randomValue.toString();
if ( randomValueIndex === 0 && inputRandom.value.length === 0 ) {
outputGenerated.value += outputRandom.value;
} else {
outputGenerated.value += ", " + outputRandom.value;
}
}
};
//---
function removeFromList() {
if ( inputRemove.value.length > 0 ) {
var valueToRemoveStr = inputRemove.value;
var valueToRemoveInt = parseInt( valueToRemoveStr );
var tempStringTop = inputRandom.value;
var tempString = outputGenerated.value;
var tempArray;
var found = false;
if ( tempString.indexOf( valueToRemoveStr + ', ' ) > -1 ) {
tempString = tempString.replace( valueToRemoveStr + ', ', '' );
found = true;
} else if ( tempString.indexOf( ', ' + valueToRemoveStr ) > -1 ) {
tempString = tempString.replace( ', ' + valueToRemoveStr, '' );
found = true;
}
outputGenerated.value = tempString;
//---
if ( tempStringTop.indexOf( valueToRemoveStr + ', ' ) > -1 ) {
tempStringTop = tempStringTop.replace( valueToRemoveStr + ', ', '' );
} else if ( tempStringTop.indexOf( ', ' + valueToRemoveStr ) > -1 ) {
tempStringTop = tempString.replace( ', ' + valueToRemoveStr, '' );
}
inputRandom.value = tempStringTop;
//---
if ( found ) {
var index = randomValueHolder.indexOf( valueToRemoveInt );
randomValueHolder.splice( index, 1 );
randomValueHolder.push( valueToRemoveInt );
tempArray = randomValueHolder.splice( randomValueIndex, randomValueHolder.length - randomValueIndex );
shuffle( tempArray );
randomValueHolder = randomValueHolder.concat( tempArray );
randomValueIndex--;
inputRemove.value = '';
}
}
};
//---
function getRandomValue() {
if ( randomValueIndex < randomValueHolder.length - 1 ) {
randomValueIndex++;
return randomValueHolder[ randomValueIndex ];
} else {
alert( 'You already got all numbers between MIN and MAX' );
return null;
}
};
//---
function shuffle( array ) {
for ( var i = array.length - 1; i >= 0; i-- ) {
var randomIndex = Math.floor( Math.random() * ( i + 1 ) );
var itemAtIndex = array[ randomIndex ];
array[ randomIndex ] = array[ i ];
array[ i ] = itemAtIndex;
}
};
//---
init();
<div class="content borderimg">
<div class="wrapper">
<img src="http://www.nkunited.de/ExternalImages/jsfiddle/BeastyqtLogo.png" alt="BEASTYQT" height="53" width="65"><br/><span class="fontStyle">BEASTYQT - RANDOM NUMBER GENERATOR</span><br/><br/>
<span class="fontStyle">Already used numbers: </span><br/><textarea id="txtInputRandom" class="fontStyle" cols="57" rows="4" placeholder="If you already have numbers from a previous round and you don't want them to be considered again. For exmaple: 1, 4, 5, 6, 9, 13"></textarea><br/>
<input type="text" id="txtInputMin" class="fontStyle" placeholder="MIN"/>
<input type="text" id="txtInputMax" class="fontStyle" placeholder="MAX"/><br/>
<br/><button type="button" id="btInit" class="fontStyle">INIT/RESET</button>
<button type="button" id="btGenerate" class="fontStyle">GENERATE</button><br/><br/>
<span class="fontStyle">Current number: </span><br/><input type="text" id="txtOutputRandom" class="fontStyle" readonly/><br/>
<span class="fontStyle">Generated numbers: </span><br/><textarea type="text" id="txtOutputGenerated" class="fontStyle" cols="57" rows="4" readonly></textarea><br/><br/>
<button type="button" id="btRemove" class="fontStyle">REMOVE NUMBER</button><input type="text" id="txtInputRemove" class="fontStyle" placeholder="NUMBER TO REMOVE FROM LIST"/>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Share+Tech+Mono);
body {
background-color: #000;
margin: 0;
padding: 0;
}
input, textarea {
margin: 2px 2px 2px 2px;
-moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
box-shadow: inset 0px -3px 7px 0px #29bbff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000e25), color-stop(1, #000e25));
background: -moz-linear-gradient(top, #000e25 5%, #000e25 100%);
background: -webkit-linear-gradient(top, #000e25 5%, #000e25 100%);
background: -o-linear-gradient(top, #000e25 5%, #000e25 100%);
background: -ms-linear-gradient(top, #000e25 5%, #000e25 100%);
background: linear-gradient(to bottom, #000e25 5%, #000e25 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e25', endColorstr='#000e25',GradientType=0);
background-color: #000e25;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #46b8f1;
display: inline-block;
color: #ffffff;
font-size: 15px;
padding: 9px 9px;
text-decoration: none;
text-shadow: 0px 1px 0px #263666;
}
button {
margin: 2px 2px 2px 2px;
-moz-box-shadow: inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow: inset 0px -3px 7px 0px #29bbff;
box-shadow: inset 0px -3px 7px 0px #29bbff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000e25), color-stop(1, #000e25));
background: -moz-linear-gradient(top, #000e25 5%, #000e25 100%);
background: -webkit-linear-gradient(top, #000e25 5%, #000e25 100%);
background: -o-linear-gradient(top, #000e25 5%, #000e25 100%);
background: -ms-linear-gradient(top, #000e25 5%, #000e25 100%);
background: linear-gradient(to bottom, #000e25 5%, #000e25 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e25', endColorstr='#000e25',GradientType=0);
background-color: #000e25;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #46b8f1;
display: inline-block;
color: #ffffff;
font-size: 15px;
padding: 9px 23px;
text-decoration: none;
text-shadow: 0px 1px 0px #263666;
cursor: pointer;
}
button:active {
position:relative;
top:1px;
}
textarea {
width:80%;
}
#txtInputMin {
width:37%;
}
#txtInputMax {
width:37%;
}
#txtInputRemove {
width:37%;
}
.borderimg {
border: 106px solid transparent;
padding: 0px;
-webkit-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round; /* Safari 3.1-5 */
-o-border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round; /* Opera 11-12.1 */
border-image: url(http://www.nkunited.de/ExternalImages/jsfiddle/SC2_BorderImage.png) 106 round;
}
.wrapper {
margin-top: -75px;
margin-left: -75px;
margin-right: -75px;
}
.content {
width: 40%;
height: 60%;
max-width: 480px;
background-color: #000e25;
position:absolute;
left:0; right:0;
top:0; bottom:0;
margin:auto;
text-align: center;
}
.fontStyle {
color: #46b7f1;
font-family: 'Share Tech Mono', monospace;
text-align: center;
}