Sketchboard

index.html

<input id="new-grid" type="button" value="boring mode" onClick="newGrid(1);">
<input id="new-grid" type="button" value="disco mode" onClick="newGrid(2);">
<div id="container-grid" class="container">
</div>

script.js

var newGrid = function(option) {
  
  $('#container-grid').html(""); // empty container
  
  var input = prompt("Choose a number.");
  
  var blockSize = $('#container-grid').width() / input - 2;
 
  if (input < 128) {
    
    for (var j = 1; j <= input; j++) {
      
      for (var i = 1; i <= input; i++) {  
        $('#container-grid').append('<div class="block"></div>');
      }  
      $('#container-grid').append("<div class='row'></div>");
      
    }
    
    $('.block').css('width', blockSize);
    $('.block').css('height', blockSize);
    
    switch(option) {
      case 1:
        $('.block').mouseenter(function(){
          $(this).addClass('block-lit');
        });
        break;
      case 2:
        $('.block').mouseenter(function(){
          var hue = 'rgb(' + (Math.floor((256-150)*Math.random()) + 150) + ',' + (Math.floor((256-150)*Math.random()) + 150) + ',' + (Math.floor((256-150)*Math.random()) + 150) + ')';
    	   $(this).css("background-color", hue);
        }); 
       break;
    }
    
   
   
  } else {
   alert("Fill in a smaller number please!");
  }
}

Sketchboard.markdown

Sketchboard

http://www.theodinproject.com/web-development-101/javascript-and-jquery

A Pen by Wilbert Schepenaar on CodePen.

License.

style.css

.container-grid {
  width: 800px;
  margin: 0 auto;
}

.block {
  float: left;
  margin: 1px;
  border-radius: 2px;
  background-color: #eee;
}

.row {
  clear: both;
}
.block-lit {
  
  background-color: #aaa !important;
}