diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..e69de29
diff --git a/README.md b/README.md
index b1b6877..179826d 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+####Example solution deployed to [surge](example-pixel-art.surge.sh)
+
# 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.
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..0d79c30
--- /dev/null
+++ b/app.js
@@ -0,0 +1,92 @@
+'use strict';
+
+var brush;
+
+var drawCanvas = function() {
+ var canvas = document.querySelector('#canvas');
+ var pixel;
+
+ for (var i = 0; i < 2013; i++) {
+ pixel = document.createElement('div');
+ pixel.className = 'pixel';
+ canvas.appendChild(pixel);
+ }
+
+ canvas.addEventListener('click', function(event) {
+ if (event.target.className !== 'pixel') {
+ return;
+ }
+
+ event.target.style.background = brush;
+ event.target.style.borderColor = brush;
+ });
+}
+
+var drawPalette = function() {
+ var palette = document.querySelector('#palette');
+
+ var hexColors = [
+ '#b23232',
+ '#ff4848',
+ '#ff6c6c',
+ '#e59b40',
+ '#ffad48',
+ '#ffc57e',
+ '#e5de40',
+ '#fff748',
+ '#fffa91',
+ '#39cc4b',
+ '#48ff5e',
+ '#91ff9e',
+ '#3248b2',
+ '#4867ff',
+ '#91a3ff',
+ '#6432b2',
+ '#8f48ff',
+ '#bb91ff',
+ '#7c2b99',
+ '#cf48ff',
+ '#e291ff',
+ '#000000',
+ '#323232',
+ '#666666',
+ '#999999',
+ '#cccccc',
+ '#ffffff',
+ '#3a2119',
+ '#512e23',
+ '#754233',
+ '#90675b',
+ '#ac8d84'
+ ];
+
+ var color;
+
+ for (var hexColor of hexColors) {
+ color = document.createElement('div');
+ color.className = 'color';
+ color.style.background = hexColor;
+ palette.appendChild(color);
+ }
+
+ var heading = document.createElement('h2');
+ heading.textContent = 'BRUSH COLOR >';
+
+ var brushColor = document.createElement('div');
+ brushColor.className = 'brushColor';
+
+ palette.appendChild(heading);
+ palette.appendChild(brushColor);
+
+ palette.addEventListener('click', function(event) {
+ if (event.target.className !== 'color') {
+ return;
+ }
+
+ brush = event.target.style.background;
+ brushColor.style.background = brush;
+ });
+}
+
+drawCanvas();
+drawPalette();
diff --git a/index.html b/index.html
index e69de29..5367205 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+ Pixel Art Maker
+
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..074e911
--- /dev/null
+++ b/style.css
@@ -0,0 +1,58 @@
+html {
+ box-sizing: border-box;
+}
+
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+
+body {
+ background: #ccc;
+}
+
+h2 {
+ color: #999;
+ font-family: Gill Sans;
+ font-size: 1.5rem;
+ font-weight: 400;
+ letter-spacing: 3px;
+ line-height: 2.2rem;
+ margin: 6px 0 0 20px;
+}
+
+main {
+ background: #e5e5e5;
+ border-radius: 15px;
+ box-shadow: 0 0 20px #999;
+ margin: 20px auto 0;
+ padding: 20px;
+ width: 894px;
+}
+
+.pixel {
+ background: white;
+ border: 1px solid #e5e5e5;
+ height: 14px;
+ width: 14px;
+}
+
+.color {
+ border: 1px solid #bbbbbb;
+ border-radius: 50%;
+ height: 35.5px;
+ margin: 5px 5px 0 0;
+ width: 35.5px;
+}
+
+.brushColor {
+ border: 1px solid #999999;
+ border-radius: 3px;
+ height: 35.5px;
+ margin: 6px 0 0 12px;
+ width: 100px;
+}
+
+#canvas, #palette {
+ display: flex;
+ flex-wrap: wrap;
+}