Click For Color

In this project, we're going to make a webpage whose background color is set via a blending of Red, Green, and Blue values. There will be buttons that add or subtract from the Red, Green, and Blue levels to change the background of the page.

Click Here to View Full Screen!

1. Open a new HTML file and give your page a title.

2. Make a "+" button and a "-" button that appear side-by-side. Set their background color to red.

3. Now make two more "+" and "-" buttons under the first two. Set their background color to green.

4. Make two final "+" and "-" buttons under those. Set their background color to blue.

5. Using JavaScript, make three variables (red, green, and blue) and set them all to random numbers between 0 and 255.

6. Using those values, set the background color of the page. For example if you have Red = 110, Blue = 95, Green = 215, set the background of the page to be the color rgb(110,215,95).

Click here to learn more about rgb values.

7. Write code that makes your red buttons cause the red variable to go up and down, then make it update the page color.

8. Now do the same for the green and blue buttons.

9. Play around with the style of your page. Choose the shape for your buttons, choose which shades of red, blue and green to color them, etc.

10. Save and share your project!