JSFiddle - React, Tailwind, and code Playground

by mmansion

HTML

<div id="victim">
	<table>
		<tr>
			<td>Red:</td>
			<td class="rgb"></td>
		</tr>
		<tr>
			<td>Green:</td>
			<td class="rgb"></td>
		</tr>
		<tr>
			<td>Blue:</td>
			<td class="rgb"></td>
		</tr>
	</table>
</div>

CSS

#victim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: gainsboro;
}
table {
    width: 100px;
    font: .9em arial, sans-serif;
    color: black;
    background: rgba(255,255,255,.5);
    padding: 5px;
    margin: 10px;
}

JavaScript

function getElementBG(elm) {
	var bg	= getComputedStyle(elm).backgroundColor;
		bg	= bg.match(/\((.*)\)/)[1];
		bg	= bg.split(",");
	for (var i = 0; i < bg.length; i++) {
		bg[i] = parseInt(bg[i], 10);
	}
	return bg;
}

function generateRGB() {
	var color = [];
	for (var i = 0; i < 3; i++) {
		var num = Math.floor(Math.random()*225);
		while (num < 25) {
			num = Math.floor(Math.random()*225);
		}
		color.push(num);
	}
	return color;
}

function rgb2hex(color) {
	var hex = [];
	for (var i = 0; i < 3; i++) {
		hex.push(color[i].toString(16));
		if (hex[i].length < 2) { hex[i] = "0" + hex[i]; }
	}
	return "#" + hex[0] + hex[1] + hex[2];
}

function calculateDistance(current, next) {
	var distance = [];
	for (var i = 0; i < 3; i++) {
		distance.push(Math.abs(current[i] - next[i]));
	}
	return distance;
}

var incrementStops = 50;
function calculateIncrement(distance) {
	var increment = [];
	for (var i = 0; i < 3; i++) {
		increment.push(Math.abs(Math.floor(distance[i] / incrementStops)));
		if (increment[i] == 0) {
			increment[i]++;
		}
	}
	return increment;
}

// this isn't part of the transition and can be removed
// don't forget to remove output(currentColor) inside transition()
function output(color) {
	var rgb = document.getElementsByClassName("rgb");
	if (rgb) {
		for (var i = 0; i < color.length; i++) {
			rgb[i].innerText = color[i];
		}
	}
}

var iteration = Math.round(1000 / (incrementStops/2));
function createTransition(id) {
	var elm				= document.getElementById(id);
	var currentColor	= getElementBG(elm);
	var randomColor		= generateRGB();
	var distance		= calculateDistance(currentColor, randomColor);
	var increment		= calculateIncrement(distance);
	
	function transition() {
		
		if (currentColor[0] > randomColor[0]) {
			currentColor[0] -= increment[0];
			if (currentColor[0] <= randomColor[0]) {
				increment[0] = 0;
			}
		} else {
			currentColor[0] += increment[0];
			if (currentColor[0] >= randomColor[0]) {
				increment[0] = 0;
			}
		}
		
		if...