From a19bf5cd1734682dc41e169075e904fa6afca498 Mon Sep 17 00:00:00 2001 From: Danny Fritz Date: Tue, 3 Nov 2015 15:37:31 -0700 Subject: [PATCH] :sparkles: Pixel Art Maker --- README.md | 22 +++++++++++++++++++++- pixel-art-maker.png | Bin 0 -> 11914 bytes 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 pixel-art-maker.png diff --git a/README.md b/README.md index c1da6bb..18396b7 100644 --- a/README.md +++ b/README.md @@ -1 +1,21 @@ -# pixel-art-maker +# Assignment - Pixel Art Maker + +Create your own Pixel Art Maker, which lets you click on a grid to "paint" pixel art. The interface is completely up to you, but it could look something like this: + +![Example of Pixel Art Maker](pixel-art-maker.png) + +It boils down to this: A user selects a color and clicks on pixels to paint them with the selected color. + +Here's the order of steps that I would implement: + +1. Get 10 or so small divs on the screen +2. Add an event listener to each so that when I click on a pixel it turns red +3. Add a color palette div with 2 colors(red and purple)which allows the user to set the current "paintbrush" color instead of it always being set to red +4. Add the rest of the standard rainbow colors to the color palette +5. Add enough divs to fill up the entire screen + +**Bonus Challenges:** + +* Add a color picker which allows the user to select any color. Look into the HTML5 color input. +* Add the ability to click and drag to paint multiple pixels at once +* Add a paintbucket tool which allows a user to drag a box across the screen and paint all pixels that fall inside that box diff --git a/pixel-art-maker.png b/pixel-art-maker.png new file mode 100644 index 0000000000000000000000000000000000000000..480251e45808ca963061fbf8f0404d7369fffab6 GIT binary patch literal 11914 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