Disco Lights

In this project, we're going to make a webpage with crazy flashing colors!

Click here to view fullscreen.

1. Give your page a title.

2. Using CSS, set the width and height of the HTML and body to 100% each.

3. Make an array that holds a bunch of different colors. This can help you with colors.

4. Using a random number, write a function that changes the background color of the body to a random color from your array.

5. Make that function run every x seconds ("x" is any number of your choice). Play around to decide how fast you want the colors to change.

6. In JavaScript, create 100 div elements and store them in a new array. (Hint: don't create the div's one by one. Instead, use a for loop).

7. Append the div's to the page when the page loads.

8. Make the function that changes the background color of the body change the background color of just the first div in your array.

9. Now, make the function work on all of the div's in the array.

10. If your div's are all in a line, format them into a grid.

(Hint: use the CSS display property).

11. Set the height and width of the div's so that they take up the whole page. You can do this with CSS or JavaScript.

12. Continue working until you are happy with your project.

13. Save and share your project!