From e7deb660cb040aa165b0bd86173c0a5a5d5ab554 Mon Sep 17 00:00:00 2001
From: Ryan Sobol <contact@ryansobol.com>
Date: Fri, 11 Nov 2016 16:04:23 -0800
Subject: [PATCH] Improve the solution

---
 index.js | 40 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index f6c279e..f3e285b 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,11 @@
 'use strict';
 
-let brushClass;
+let brushClass = 'drab-black';
+
+const paintPixel = function(pixel) {
+  pixel.classList.remove(pixel.classList.item(1));
+  pixel.classList.add(brushClass);
+}
 
 const drawCanvas = function() {
   const canvas = document.querySelector('#canvas');
@@ -17,10 +22,35 @@ const drawCanvas = function() {
       return;
     }
 
-    if (brushClass) {
-      event.target.classList.add(brushClass);
-    }
+    paintPixel(event.target);
   });
+
+  // or...
+  // let isPainting = false;
+  //
+  // canvas.addEventListener('mousedown', () => {
+  //   isPainting = true;
+  //
+  //   if (event.target === canvas) {
+  //     return;
+  //   }
+  //
+  //   paintPixel(event.target);
+  // });
+  //
+  // canvas.addEventListener('mouseup', () => {
+  //   isPainting = false;
+  // });
+  //
+  // const pixels = document.querySelectorAll('.pixel');
+  //
+  // for (const pixel of pixels) {
+  //   pixel.addEventListener('mouseenter', () => {
+  //     if (isPainting) {
+  //       paintPixel(event.target);
+  //     }
+  //   });
+  // }
 }
 
 const drawPalette = function() {
@@ -73,7 +103,7 @@ const drawPalette = function() {
   heading.textContent = 'BRUSH COLOR >';
 
   const brush = document.createElement('div');
-  brush.classList.add('brush');
+  brush.classList.add('brush', brushClass);
 
   palette.appendChild(heading);
   palette.appendChild(brush);