radzhome/Color Boxes JS

## Color Boxes JS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>P1</title>
  <style type="text/css">
    .grid-box {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      display: inline-block;
    }
    .u-paddedBottom {
      padding-bottom: 15px;
    }
  </style>
</head>

<body>

<div class="u-paddedBottom">
  <label for="NoOfBoxes"># of Boxes</label>
  <input type="number" id="NoOfBoxes" value="8"/>
  <input type="button" value="Generate"  onclick="drawBoxes()"/>
</div>

<div id="GridBoxContainer"></div>

<script>

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

  var getColorBox = function() {
    return '<div class="grid-box" style="background-color:' + getRandomColor() + '"></div>\n';
  };

  var drawBoxes = function () {
    var noOfBoxes = document.getElementById('NoOfBoxes').value;
    var $gridBoxContainer = document.getElementById('GridBoxContainer');
    var gridBoxContent = '';

    noOfBoxes = parseInt(noOfBoxes) || 0;

    for (var i = 0; i < noOfBoxes; i++) {
      gridBoxContent += getColorBox();
    }

    $gridBoxContainer.innerHTML = gridBoxContent;

  };
  drawBoxes();
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>P1</title>
	<style type="text/css">
	.grid-box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	display: inline-block;
	}
	.u-paddedBottom {
	padding-bottom: 15px;
	}
	</style>
	</head>

	<body>

	<div class="u-paddedBottom">
	<label for="NoOfBoxes"># of Boxes</label>
	<input type="number" id="NoOfBoxes" value="8"/>
	<input type="button" value="Generate" onclick="drawBoxes()"/>
	</div>

	<div id="GridBoxContainer"></div>

	<script>

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

	var getColorBox = function() {
	return '<div class="grid-box" style="background-color:' + getRandomColor() + '"></div>\n';
	};

	var drawBoxes = function () {
	var noOfBoxes = document.getElementById('NoOfBoxes').value;
	var $gridBoxContainer = document.getElementById('GridBoxContainer');
	var gridBoxContent = '';

	noOfBoxes = parseInt(noOfBoxes) \|\| 0;

	for (var i = 0; i < noOfBoxes; i++) {
	gridBoxContent += getColorBox();
	}

	$gridBoxContainer.innerHTML = gridBoxContent;

	};
	drawBoxes();
	</script>

	</body>
	</html>