JSFiddle - React, Tailwind, and code Playground

by Graham Walters

HTML

<button onclick="changeColors();">Click me to change colors</button>
<button onclick="startCycle();">Start cycle</button>
<button onclick="stopCycle();">Stop cycle</button>
<br>
<br>

CSS

.cell {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 1px;
    padding: 4px;
}

button {
    float: left;
    padding: 4px;
}

JavaScript

var elements = [];
function generateGrid(width, height) {
    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
            var div = document.createElement("div");
            div.id = "box" + y + "" + x;
            div.className = "cell";
            document.body.appendChild(div);
            elements.push(div);
        }
        document.body.appendChild(document.createElement("br"));
    }
}

function changeColors() {
	for (e in elements) {
    	elements[e].style.backgroundColor = getRandomColor();
    }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var interval = null;
function startCycle() {
	if (interval) return;
	interval = window.setInterval(changeColors, 500);
}

function stopCycle() {
	clearInterval(interval);
    interval = null;
}

generateGrid(3, 5);
changeColors();