Pixel Drawing

In this project, we're going to make a dark webpage that you can draw on with bright, random colors.

Click here to view fullscreen.

1. Give your page a title.

2. Set the width and height of the HTML and body to 100% each.

3. 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).

5. Set the background color of the div's to black or dark gray.

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

(If the div's are all in a line, make them into a grid using the CSS display property).

7. Set the height and width of the div's so that they take up the whole page.

8. Choose a bunch of bright colors that you want to use -- at least five -- and store them in an array.

9. Make a function that chooses a random color from your array.

10. When the mouse hovers over the first div, run that function, and change the background of the div to the new color.

11. Now make that code work with any div, not just the first one.

Hint: To do this, you will need to use a forEach loop.

12. Keep working on your project until you're happy with it. You could change the number of div's, allow the user to pick which color the div's change to, etc.

13. Save and submit your project!