Computing Concepts Final Programming Assignment
Tom Linton,Central College, Fall 2001
As a final homework assignment in HTML and JavaScript, you are to design and implement an RGB Color mixer web page. The page will display various HTML colors (like FF30A5) selected by the user. To display the colors, the pages background color is altered.

To create this web page, you may use FrontPage, your text book and class notes, any HTML pages or JavaScript scripts from class (in your folders, or in the classes drop folder G:\Lintont\COSC106\pickup), but you must work alone, and you cannot use scripts from other (non Central College) color-picker web pages.
 

The Interface

(15 points) A picture of the web page is shown below. You should look at this picture on line (so you can see the colors) at
http://www.central.edu/homepages/lintont/rgbmixer.jpg
and do your best to exactly match the design of the page. Tables are used both for alignment, and for coloring. There is actually a table within a table in the web page pictured, but you may not need to nest your tables. Note that the form where the user enters information does not change color, only the background outside the information area changes color.
 
 

 

 

Scripts

The Show Me button
(20 points) When the user presses the Show Me button, your script for this button should:
  1. Read in the values from the red, green, and blue fields on the form, and parse them as numbers.
  2. Convert the red, green, and blue values read into hexadeximal (2-digit) numbers. The hexColor web page and its scripts should be useful for this part.
  3. Concatenate the hexadecimal red, green, and blue numbers into an HTML color format (like F02A64) and set the bgColor of the webpage to this result.
Once this seems to work, try to fix things if the user has entered negative values, or values larger than 255. If, for example, the value redNumber is larger than 255, then (redNumber % 256) will be between 0 and 255. This fact can be used to fix numbers that are too big.

Negatives are a bit trickier. Unfortunately in JavaScript, (-10 % 256) = -10 (instead of 246, like we want). However, the number ( ( (variable % 256) + 256) % 256) will always be between 0 and 255. You can also see the hexColor web page, and look at how incorrect values were adjusted there.

The More buttons
(8 points) Each of the More buttons should call its own function. The scripts executed for the different More buttons will be very similar, basically you need to:
  1. read in and parse the appropriate color value;
  2. add 10 to that value;
  3. fix things if the result is too big (larger than 255);
  4. re-display the new resulting value in the form's field;
  5. change the background color of the web page to the new color.
The last step can likely be carried out by simpy calling whatever script you executed for the Show Me button. You might find it useful to look at the three buttons and click-counters script.
The Less buttons
(7 points) Similar to the More buttons, each should call its own function, and these functions are very similar. In this case, you need to fix things if the new value is negative (but since you only subtracted 10, if the result is negative, just add 256 to it, to get a value in the correct range).