/debug-me.html Secret

## debug-me.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    <title>Bad example to debug :D</title>

		<style>
			.colors .colorBlock {
				display: inline-block;
				width: 1em;
				height: 1em;
				float: left;
			}
		</style>
		<script type="text/javascript">
			function decimalToHex(d) {
		    var hex = Number(d).toString(16);
		    hex = "00".substr(0, 2 - hex.length) + hex;

		    console.log('converting ' + d + ' to ' + hex);
		    return hex;
			}

			function makeColorSorter(frequency1, frequency2, frequency3,
                         phase1, phase2, phase3,
                         center, width, len) {
			    for (var i = 0; i < len; ++i)
			    {
			       var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
			       var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
			       var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);

			       console.log('red: ' + decimalToHex(red));
			       console.log('green: ' + decimalToHex(green));
			       console.log('blue: ' + decimalToHex(blue));

			       var div = $('<div class="colorBlock"></div>');
			       div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));
			       $('#colors').append(div);
			    }
			}

			function testColorSorter() {
		    makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
			}
		</script>
	</head>
	<body id="body">
		<h1>Debug me</h1>
		<button id="clickMe" onclick="testColorSorter();">Click me</button>
		<section class="colors" id="colors">

		</section>

		<a href="https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/">Code example and how to optimize this here</a>
		<script
		  src="https://code.jquery.com/jquery-3.2.1.js"
		  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
		  crossorigin="anonymous"></script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Bad example to debug :D</title>

	<style>
	.colors .colorBlock {
	display: inline-block;
	width: 1em;
	height: 1em;
	float: left;
	}
	</style>
	<script type="text/javascript">
	function decimalToHex(d) {
	var hex = Number(d).toString(16);
	hex = "00".substr(0, 2 - hex.length) + hex;

	console.log('converting ' + d + ' to ' + hex);
	return hex;
	}

	function makeColorSorter(frequency1, frequency2, frequency3,
	phase1, phase2, phase3,
	center, width, len) {
	for (var i = 0; i < len; ++i)
	{
	var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
	var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
	var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);

	console.log('red: ' + decimalToHex(red));
	console.log('green: ' + decimalToHex(green));
	console.log('blue: ' + decimalToHex(blue));

	var div = $('<div class="colorBlock"></div>');
	div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));
	$('#colors').append(div);
	}
	}

	function testColorSorter() {
	makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
	}
	</script>
	</head>
	<body id="body">
	<h1>Debug me</h1>
	<button id="clickMe" onclick="testColorSorter();">Click me</button>
	<section class="colors" id="colors">

	</section>

	<a href="https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/">Code example and how to optimize this here</a>
	<script
	src="https://code.jquery.com/jquery-3.2.1.js"
	integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
	crossorigin="anonymous"></script>
	</body>
	</html>