JSFiddle - React, Tailwind, and code Playground

by jannis

HTML

<div id="output"></div>
<div id="stats"></div>

CSS

#output,#stats {
    float: left;
    border: 1px solid #eaeaea;
    padding: 10px;
    margin: 10px;
    width:200px;
}
#output { margin-left: 240px; }
#stats {
    background-color: #efefef;
    position: fixed;
}
span {
    display: block;
    font: 13px/1 Courier, "Courier New", monospace;
}
.dupe {
    background-color: #FF412C;
}
.unique {
    /*background-color: green;*/
}

JavaScript

function randomID( prefix ) {
    return prefix+Math.round( $.now() * Math.random() );
}

// generate a set of XXXX IDs on runtime.
var runs = 1000;

// performance test (in ms).

// start timer
var startTime = $.now();
// run
for ( i=0; i<runs; i++ ) {
    randomID("unicorns_");
}
// stoptime to get runtime of script
var stopTime = $.now();
var runtime = stopTime - startTime;
// display runtime stats
$('#stats').append('<span>Runs: '+runs+'<br/>Time: '+runtime+'ms</span>');


// demo for display purposes.
var collection = '';
var dupes = [];

for ( i=0; i<runs; i++ ) {
    var id = randomID("unicorns_");
    collection += '<span>'+id+'</span>';
    dupes.push(id);
}
$('#output').append( collection );

// check for dupes
var uniques = 0, duplicates = 0;
$.each( dupes , function( i , val ) {
    dupes = dupes.splice( i , 1 );
    if ( $.inArray( val , dupes ) >= 1 ) {
       // highlight dupe
       $('span','#output').eq(i).addClass('dupe');
        duplicates++;
    } else {
       $('span','#output').eq(i).addClass('unique');
        uniques++;
    }
});
$('#stats').append('<br /><span>Unique IDs: '+uniques+'<br/>Duplicates: '+duplicates+'</span>');