darmentrout/boxes.html

## boxes.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Boxes</title>
    <style>
        :root {
            --box-w: 10vw;
            --box-h: 10vh;
        }
        * { box-sizing: border-box; }
        body, html { width: 100%; height: 100%; padding: 0px; margin: 0px; background-color: #111; }
        main {
            display: flex;
        }
        .flex-wrap {
            flex-flow: wrap;
        }
        .flex-wrap-reverse {
            flex-flow: wrap-reverse;
        }
        .box {
            width: var(--box-w);
                min-width: var(--box-w);
                max-width: var(--box-w);
            height: var(--box-h);
                min-height: var(--box-h);
                max-height: var(--box-h);
        }
    </style>
</head>
<body>

    <main class="flex-wrap"></main>

<script>

    console.log('%cThis Page Accepts a Single Parameter: interval [int milliseconds]. The default interval is 500 ms.', 'color: deeppink;');

    var theInterval = 500;
    if( window.location.search != "" ){
        var parameter = window.location.search.substr(1).split('=');
        if( parseInt(parameter[1]) ){
            theInterval = parseInt(parameter[1]);
        }
    }

    function hexColor(){
        var colorNumerals = "123456789abcdef";
        var output = "#";
        while( output.length < 7 ){
            var randomIndex = Math.floor( Math.random() * 14 );
            output += colorNumerals[ randomIndex ];
        }
        return output;
    }

    function recolorBoxes(){
        window.setInterval( () => {
            var main = document.querySelector('main');
            var randomIndex = Math.floor( Math.random() * (main.childNodes.length - 1) );
            main.children[randomIndex].style.background = hexColor();
        }, theInterval);
    }

    var bodyBounds = document.querySelector('body').getBoundingClientRect();

    // we don't really need to scope this to an anonymous function, do we?
    // (()=>{
        var addBox = window.setInterval( () => {
            // create the colored box
            var box = document.createElement('div');
            box.classList.add('box');
            box.style.background = hexColor();
            document.querySelector('main').appendChild(box);

            // determine when the window is filled with boxes
            var boxBounds  = box.getBoundingClientRect();
            if( boxBounds.bottom + boxBounds.height > bodyBounds.bottom && boxBounds.right + boxBounds.width > bodyBounds.right ){
                clearInterval(addBox);
                recolorBoxes();
            }
        }, theInterval);
    // })();
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Boxes</title>
	<style>
	:root {
	--box-w: 10vw;
	--box-h: 10vh;
	}
	* { box-sizing: border-box; }
	body, html { width: 100%; height: 100%; padding: 0px; margin: 0px; background-color: #111; }
	main {
	display: flex;
	}
	.flex-wrap {
	flex-flow: wrap;
	}
	.flex-wrap-reverse {
	flex-flow: wrap-reverse;
	}
	.box {
	width: var(--box-w);
	min-width: var(--box-w);
	max-width: var(--box-w);
	height: var(--box-h);
	min-height: var(--box-h);
	max-height: var(--box-h);
	}
	</style>
	</head>
	<body>

	<main class="flex-wrap"></main>

	<script>

	console.log('%cThis Page Accepts a Single Parameter: interval [int milliseconds]. The default interval is 500 ms.', 'color: deeppink;');

	var theInterval = 500;
	if( window.location.search != "" ){
	var parameter = window.location.search.substr(1).split('=');
	if( parseInt(parameter[1]) ){
	theInterval = parseInt(parameter[1]);
	}
	}

	function hexColor(){
	var colorNumerals = "123456789abcdef";
	var output = "#";
	while( output.length < 7 ){
	var randomIndex = Math.floor( Math.random() * 14 );
	output += colorNumerals[ randomIndex ];
	}
	return output;
	}

	function recolorBoxes(){
	window.setInterval( () => {
	var main = document.querySelector('main');
	var randomIndex = Math.floor( Math.random() * (main.childNodes.length - 1) );
	main.children[randomIndex].style.background = hexColor();
	}, theInterval);
	}

	var bodyBounds = document.querySelector('body').getBoundingClientRect();

	// we don't really need to scope this to an anonymous function, do we?
	// (()=>{
	var addBox = window.setInterval( () => {
	// create the colored box
	var box = document.createElement('div');
	box.classList.add('box');
	box.style.background = hexColor();
	document.querySelector('main').appendChild(box);

	// determine when the window is filled with boxes
	var boxBounds = box.getBoundingClientRect();
	if( boxBounds.bottom + boxBounds.height > bodyBounds.bottom && boxBounds.right + boxBounds.width > bodyBounds.right ){
	clearInterval(addBox);
	recolorBoxes();
	}
	}, theInterval);
	// })();
	</script>

	</body>
	</html>