diego's blog

Press the button. Preeeeeess iiiiit...

Random colors!

This is just a bit of html:

<button id="start-colors">Random colors!</button>
<div id="colors" style="height:30em;overflow:scroll;"></div>

And a bit of javascript:

var color_button = document.getElementById("start-colors");

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function get_random_colors () {
    let run_colors = true;
    color_button.innerHTML="Pause";
    color_button.onclick = function () { run_colors = false };
    while (run_colors) {
        let color = "#" + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6,'0');
        let colors = document.getElementById("colors");
        colors.innerHTML = '<div style="background-color:' + color + '">' + color + '</div>' + colors.innerHTML;
        await sleep(100);
    }
    color_button.innerHTML="Random Colors!";
    color_button.onclick = get_random_colors;
}

color_button.onclick = get_random_colors;