Valeriy Pogrebitskiy's JavaScript Challenge Project

Requirements:

1. Please create an HTML page with two buttons at the top, followed by a table. The exact positioning and layout is not important, though centering the table in the middle of the browser window would be nice.
2. The table should be a 5x5 table and the squares should be 100x100 pixels.
3. Each square should have a starting background color. I'm not particular how you decide which square gets which starting color; make half blue and half red, it doesn't matter.
4. Clicking the squares should bring up a popup box with an input field and two buttons. The input field is the RGB value of the background color as currently displayed, and the buttons read "Apply" and "Cancel". I should be able to pick a new RGB value, click "Apply" and have that become the new background color for that square. Hitting "Cancel" has the effect of making the popup box disappear and not changing the background color.
5. The buttons at the top of the page have the following functionality: 5.1 Button 1 rotates background color (but not the other attributes) of the cells of OUTER layer of the table - one square to the left (in a "circular" manner).
   5.2 Button 2 rotates background color (but not the other attributes) of the cells of INNER (second) layer of the table one square to the left.

So, if this was the layout before you pressed button 1:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

After pressing button 1:

• bgcolor of square 21 would be where square 22 is now;
• bgcolor of square 5 would be where square 4 is now, etc.

If you pressed button 2:

• the same would happen, only bgcolor of square 17 would replace that of square 18, bgcolor of square 9 would replace bgcolor of square 8, etc.

You don't have to actually swap the cells, just make the colors move.

IMPORTANT:

1. I do not have prior JavaScript experience, this is my first "experiment" with this language. From this prospective - this code is most probably far from being optimal, efficient and elegant. There are most certainly a lot of ways to improve (or even completely redesign) the code. But what's important to understand - is that I ...

   • developed this simple project within (relatively) short amount of time, having no prior JavaScript knowledge/experience
   • learned some basics of the JavaScript language
   • searched online for information related to this assignment, and successfully applied that in the code

In short - this exercise demonstrates my ability to learn new technology quickly, without any help (other that using generally available sources of information).

2. In addition, normally I would ...

   • develop unittest scripts that verify code works exactly as expected. I have not done this on this project - but want to ensure that unittest'ing - is among practices I regard very highly (and consider myself being very good at that)
   • supplement code with good comments (and a lot of them)
   • develop API documentation for the entire application. For example, in Python I was even generating two sets of such documentation - using 'Epydoc' and 'pydoctor' tools

   a give