diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..5fb55d5f
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
deleted file mode 100644
index 20a06fb7..00000000
--- a/README.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Pixel Art Maker
-
-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.
-
-1. Start with a blank canvas of pixels.
-1. Select a brush color from a palette of colors.
-1. Paint the pixels on the canvas using the brush color.
-1. Repeat step 2.
-
-Here's a development workflow that we recommend you use.
-
-1. Fork and clone this repository.
-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.
-1. Add an event listener to these `div` tags so when clicked the brush color is saved.
-1. Expand the dimensions of the pixel canvas.
-1. Expand the palette with more colors. (i.e. red, orange, yellow, green, blue, purple, brown, gray, black, white, etc.)
-1. Expand the palette with a brush color indicator.
-1. 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](http://www.colors.commutercreative.com/grid/) to see a list of all the named colors in CSS.
-
-### Bonus 1
-
-Improve the mouse so it behaves like a real paintbrush. In other words, allow the user to paint by clicking and dragging across the canvas. For this, you'll need a combination of the `mousedown`, `mouseenter`, and `mouseup` events.
-
-**TIP:** The [`mouseenter` event](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter) doesn't bubble up the DOM tree.
-
-### Bonus 2
-
-Add a color picker which allows the user to select any brush color using the [`` 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 3
-
-Research [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage) and make a way to Save and Load a drawing. Research [JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and [JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) as a way to put the drawing into LocalStorage.
-
-### Bonus 4
-
-Create a fill tool that will [flood fill](https://en.wikipedia.org/wiki/Flood_fill) boundaries with a chosen paint color.
-
-
-### Deployment
-
-Read over the following articles to learn how to deploy this web site to Surge.
-
-- [Getting started with Surge](http://surge.sh/help/getting-started-with-surge)
-- [Remembering a domain](http://surge.sh/help/remembering-a-domain)
-
-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 your Surge URL and paste it at the top of your GitHub repository's page.
diff --git a/app.js b/app.js
new file mode 100644
index 00000000..f270647a
--- /dev/null
+++ b/app.js
@@ -0,0 +1,85 @@
+// create grid
+function createGrid() {
+ for (var i = 0; i < 2024; i++) {
+ $('.grid').append('')
+ }
+}
+
+createGrid()
+
+
+// paint colors
+$('.paint').click(function() {
+ $(this).css('border', 'transparent').siblings().removeAttr('style');
+
+ var currentColor = $(this).css('background-color');
+ $('.current-color-box').removeAttr('style').css('background-color', currentColor);
+
+ $('.pixel').mousedown(function() {
+ $(this).css('background', currentColor).css('border', 'transparent');
+
+ $('.pixel').bind('mousemove', function() {
+ $(this).css('background', currentColor).css('border', 'transparent');
+ })
+ })
+
+ $('.pixel').mouseup(function() {
+ $('.pixel').unbind('mousemove');
+ })
+
+})
+
+// color picker
+$('.eyedrop').click(function() {
+ $(this).css('transform', 'scale(1.3, 1.3)').siblings().removeAttr('style')
+
+ $('.color-picker').show()
+
+ $('#click').click(function() {
+ var pickedColor = $('#colorInput').val();
+
+ $('.current-color-box').removeAttr('style').css('background-color', pickedColor);
+
+ $('.pixel').mousedown(function() {
+ $(this).css('background', pickedColor).css('border', 'transparent');
+
+ $('.pixel').bind('mousemove', function() {
+ $(this).css('background', pickedColor).css('border', 'transparent');
+ })
+ })
+
+ $('.pixel').mouseup(function() {
+ $('.pixel').unbind('mousemove');
+ })
+ })
+
+ $('.close').click(function() {
+ $('.color-picker').hide()
+ $('.eyedrop').removeAttr('style')
+ })
+})
+
+// erase
+$('.erase').click(function() {
+ $(this).css('transform', 'scale(1.3, 1.3)').siblings().removeAttr('style')
+
+ $('.current-color-box').removeAttr('style').css('background-image', 'linear-gradient(-16deg, transparent, transparent 48%, red 49%, red 51%, transparent 52%, transparent)');
+
+ $('.pixel').mousedown(function() {
+ $(this).removeAttr('style');
+
+ $('.pixel').bind('mousemove', function() {
+ $(this).removeAttr('style');
+ })
+ })
+
+ $('.pixel').mouseup(function() {
+ $('.pixel').unbind('mousemove');
+ })
+})
+
+// delete
+$('.delete').click(function() {
+ $('.current-color-box').removeAttr('style').css('background-image', 'linear-gradient(-16deg, transparent, transparent 48%, red 49%, red 51%, transparent 52%, transparent)');
+ $('.pixel').removeAttr('style');
+})
diff --git a/index.html b/index.html
index e69de29b..0b506101 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ Paint by Pixels
+
+
+
+