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.
More specifically, your pixel art maker should allow a user to do the following.
- Start with a blank canvas of "pixels".
- Select a color from a palette.
- Paint the pixels on the canvas using the selected color.
Here's a development workflow that we recommend you use.
- Fork and clone this repository.
- Create a small, 2x2 grid canvas made up of white, square
div
tags with a border. - Add an event listener to each
div
so when clicked the background turns red. - Create a small palette of two colors (e.g. red and blue) below the canvas using more
div
tags. - Add an event listener to these
div
tags so when clicked the current "brush" color is remembered. - Expand the dimensions of the pixel canvas.
- 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.)
- Expand the palette with a current color indicator so the user knows which color was last selected.
- Improve the look and feel of the canvas and color palette. Be careful not to break your program's behavior!
TIP: Check out this handy tool to see a list of all the named colors in CSS.
Add a color picker which allows the user to select any color using the <input type="color">
tag and the change
event.
Add tools that augment the type of user interaction
- 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.
Review the following articles on the Surge platform and then deploy your website to production.
A good domain name for this project is USERNAME-pixel-art-maker.surge.sh
where USERNAME
is your GitHub username in all lowercase letters. Once deployed and everything works as you expect, copy the URL to your site and paste it below.
nhedeker-pixel-art-maker.surge.sh