My code works from a functionality standpoint. I want to create a "drawing pad" in that it creates a grid of small 'divs' that change color when the mouse goes over them. The 'divs' change color - but I don't understand why it is creating a 10 x 9 grid instead of a 10 x 10 grid?
// When the document is ready...
$(document).ready(function() {
// Do some things...
newGrid(10); // create a new 10 x 10 grid
$(".block").hover(function() {
$(this).css('background-color', 'white');
});
});
function newGrid(gridNum) {
var maxDivs = gridNum * gridNum;
var currentDivNum = 1; // Current number of divs; will have 100 total by default
while (currentDivNum <= maxDivs) {
// While the current div number is less than max divs...
div = document.createElement('div');
div.className = 'block'; // set the class name of the divisions
document.body.style.backgroundColor = 'red';
if (currentDivNum % gridNum == 0) {
div.style.float = 'clear';
div.style.backgroundColor = '#000000';
} else {
div.style.float = 'left';
div.style.backgroundColor = '#000000';
}
div.style.width = '25px';
div.style.height = '25px';
document.getElementById('divContainer').appendChild(div);
currentDivNum++;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContainer"></div>