a. The Grid Class should have a "randomize" method that when called randomizes the color of the Cells contained inside
b. The Grid should have a "resize" method that will grow or shrink the size of the grid as well as the number of cells contained inside based on the parameters specified
Now, to the implementation of (2). The Grid class below contains two properties and three methods. The two properties serve as little HTML templates with substitution placeholders. Those placeholder values are substituted within the Init method. The Randomize method takes advantage of the fact that the "red/green/blue (rgb)" syntax is being used to define the background color of each rectangle. Hence, random numbers between 0 and 255 can be generated fairly easily and those random numbers can be substituted within the jQuery css('backround-color' ...); function.
Finally, the implementation of (3) which uses the not quite ready CSS3 "resize" property, supported in Google Chrome, Safari, and Firefox, but not any version of IE and not any mobile version of any browser. So basically, it cannot be relied upon for a production release for GA (General Availability). That said, this challenge didn't say anything about which browsers to support (lol). Maybe full support was implied, my bad. Anyway, let's see what the new CSS3 resize can do for us. For part three, we need to inherit from the Grid class. Our new ResizableGrid class needs to both listen for changes to the size of the div which is rendering the grid on the page, while invoking the parent Grid class's Resize method when needed.
More is going on here than just inheritance and size adjustments though. Notice how the constructor of the ResizableGrid class is replaced with itself. This is because the prototype of ResizableGrid was assigned to the Grid class to give us all of the nice features of the Grid. However, the assignment of the ResizableGrid's prototype to Grid also made the constructor of ResizableGrid the constructor of Grid. Not the intended effect of inheritance. Hence, the constructor replacement.
The sizing algorithm in the anonymous setInterval function determines if two main conditions are true for us. One; is the width of the new grid large enough to contain another column of cells? Two; is the height of the new grid large enough to contain another column of rows? If so, the Resize method of Grid is called with a new number of columns and/or rows, respectively.