2016-05-13 06:54:47 -07:00
# Pixel Art Maker
2015-11-03 15:37:31 -07:00
2016-05-13 07:24:15 -07:00
In this exercise, you'll create your own pixel art maker which will allow a user to choose colors from a palette and then "paint" pixel art. The interface is completely up to you, but it could look something like this.
2015-11-03 15:37:31 -07:00
2016-05-07 23:42:43 -07:00

2015-11-03 15:37:31 -07:00
2016-05-13 06:58:21 -07:00
More specifically, your pixel art maker should allow a user to do the following.
2015-11-03 15:37:31 -07:00
2016-05-13 06:58:03 -07:00
1. Start with a blank canvas of "pixels".
1. Select a color from a palette.
1. Paint the pixels on the canvas using the selected color.
2015-11-03 15:37:31 -07:00
2016-05-13 06:54:47 -07:00
Here's a development workflow that we recommend you use.
2016-05-13 07:12:00 -07:00
1. Fork and clone this repository.
2016-05-13 06:54:47 -07:00
1. Create a small, 2x2 grid canvas made up of white, square `div` tags with a border.
1. Add an event listener to each `div` so when clicked the background turns red.
1. Create a small palette of two colors (e.g. red and blue) below the canvas using more `div` tags.
2016-05-13 06:58:03 -07:00
1. Add an event listener to these `div` tags so when clicked the current "brush" color is remembered.
2016-05-13 06:54:47 -07:00
1. Expand the dimensions of the pixel canvas.
2016-05-13 07:01:26 -07:00
1. Expand the palette with the rest of the standard colors as well as an eraser. (i.e. red, orange, yellow, green, blue, purple, brown, gray, black, white, etc.)
2016-05-13 07:19:42 -07:00
1. Expand the palette with a current color indicator so the user knows which color was last selected.
2016-05-13 07:10:57 -07:00
1. Improve the look and feel of the canvas and color palette. Be careful not to break your program's behavior!
2016-05-13 07:01:26 -07:00
**TIP:** Check out [this handy tool ](http://www.colors.commutercreative.com/grid/ ) to see a list of all the named colors in CSS.
2015-11-03 15:37:31 -07:00
2016-05-13 07:07:26 -07:00
### Bonus 1
2015-11-03 15:37:31 -07:00
2016-05-13 07:16:05 -07:00
Add a color picker which allows the user to select any color using the [`<input type="color">` tag ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color ) and the [`change` event ](https://developer.mozilla.org/en-US/docs/Web/Events/change ).
### Bonus 2
2016-05-13 07:07:26 -07:00
Add tools that augment the type of user interaction
2016-05-13 07:14:26 -07:00
- Pencil tool: Click and drag across the canvas to paint pixels.
- Selection tool: Click and drag across the canvas to paint all pixels that fall inside a rectangular selection.