JSFiddle - React, Tailwind, and code Playground

by kobezzza

HTML

<script src="http://kobezzza.com/files/collection.min.js"></script>
<div class="sq"></div>
<div id="results"></div>

CSS

.sq {
	width: 50px;
	height: 50px;
	background-color: blue;
}

.sq:hover {
	background-color: red;
}

JavaScript

var threads = 50,
    iterations = 1e6;

function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

var str = '',
	chunks = [];

var ii = $C(new Array(threads)).map(function (el, i) {
	str += '<div id="result' + i + '">0</div>';
	chunks.push(0);
	return i;
});

document.getElementById('results').innerHTML = str;

var j = 0;
var colors = {
	'critical': 'red',
	'hight': 'magenta',
	'normal': 'green',
	'low': 'blue'
};

$C(chunks).forEach(function (el, i) {
	var priority = [
		'low',
		'normal',
		'hight',
		'critical'
	];

	priority = priority[getRandomInt(0, priority.length - 1)];
	var info = ' → <span style="color:' + colors[priority] + '">' + priority + '</span>';

	$C(new Array(iterations)).forEach(function (el, i) {
		j += i;

	}, {
		thread: true,
		priority: priority,

		onChunk: function () {
			chunks[i]++;
			document.getElementById('result' + i).innerHTML = chunks[i] + info;
		},

		onComplete: function () {
			document.getElementById('result' + i).innerHTML = '<b>finish</b> (' + chunks[i] + ')' + info;
		}
	});
});