1. Review the code in 'myApp.js'
2. Open the console in your browser
3. Update the code so that clicking on anywhere on the "canvas" below pops up an alert with a message
4. Remove the alert, and modify above code to console log the event object, and the event.target
4b. Update the code so it only console logs if the target is one of the divs in the "canvas"
5. When a user clicks on a square, change it's background color to 'cyan'
6. When a user clicks on a square, change it's background color to 'magenta' if the color is already 'cyan'
7. When a user clicks on a square, change it's background color to 'yellow' if the color is already 'magenta'
8. When a user clicks on a square, change it's background color to 'cyan' if the color is already 'yellow'
9. When a user "double clicks" on a square, change it's background color to 'white'
10. Add a text input where a user can type in the color they want to have instead of 'cyan'. Note that this is for practice only, in a real world scenario inputs from the users should be sanitized and validated
Note: If you'd like to experiment and do something different here, we encourage it, just please let your instructor know and get approval before proceeding. Go wild, have fun!
11. Create a color pallette: Add a row of squares with different background colors for the user to pick
12. Add a single square at the start or end of the pallette to represent the current color, give it a solid black border
13. When a user clicks on a square in the pallette, show the picked color by updating the "current color square" background color to match
14. When a user clicks on a square in the "canvas", change it's background color to the picked color
15. Add mouse move: Update the code so that once a square on the "canvas" is clicked, simply moving the mouse changes the background color
16. Update the code so clicking again, deactivates coloring on mouse move
17. Add a button that clears the canvas