Tutorial: Color-Machine

Create a standard HTML page with a label and a pair of buttons. For the label (use <p> or <div>). One is PLUS button, the other a MINUS. The buttons should each have id and onClick attributes,
In the <script> section, create three variable, called redColor, blueColor, and greenColor and set each to 127. Display their values in the label by changing myLabel.innerHTML.
Inside the <head> section of your HTML page, add a section like this:
<style type="text/css"> </style>
Inside this section, add CSS styling for your PLUS and MINUS buttons to be red. So if one button has an id="redPlus", you would create a CSS selector:
.redPlus { background-color: red; }
Next, when each button is clicked, it should run a function and change redColor accordingly, up or down. You should see the change in the label.
Now, set the color of the page to reflect the RGB colors. The code is something like (pay attention to the quotes). :
PAGE BG COLOR = 'rgb(' + redColor + ',' + greenColor + ',' + blueColor + ')';
Of course PAGE BG COLOR is pseudo-code.
Repeat what you created for the Red buttons to add a pair of Green and a pair of Blue buttons.
Do you see the same code in multiple places? Consolidate it! Think about creating a single function that changes the color of the page and also the contents of the label. After a button changes its color variable, have every button call the changePage () function. This way you only have to maintain one set of code to update the page.
If you are enjoying playing with colors, create a Contrast Box on the page, and swap one of the RGB values in it to contrast with the color of the page. So if the page is RGB, make the contrast box BGR. Do the colors look different in contrast to each other?
Style your page, make it look good, add any variations you'd like.

The Color Machine