From d703db5bac861475489d11e7e4c6768a19ea78ac Mon Sep 17 00:00:00 2001
From: Ryan Sobol <contact@ryansobol.com>
Date: Mon, 14 Nov 2016 10:57:54 -0800
Subject: [PATCH] Improve the solution

---
 index.css |   8 +-
 index.js  | 220 +++++++++++++++++++++++++++---------------------------
 2 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/index.css b/index.css
index 978df96..c410190 100644
--- a/index.css
+++ b/index.css
@@ -7,7 +7,7 @@ html {
 }
 
 body {
-  background: #ccc;
+  background-color: #ccc;
 }
 
 h2 {
@@ -21,7 +21,7 @@ h2 {
 }
 
 main {
-  background: #e5e5e5;
+  background-color: #e5e5e5;
   border-radius: 15px;
   box-shadow: 0 0 20px #999;
   margin: 20px auto 0;
@@ -30,13 +30,13 @@ main {
 }
 
 .pixel {
-  background: white;
+  background-color: white;
   border: 1px solid #e5e5e5;
   height: 14px;
   width: 14px;
 }
 
-.brush {
+.brushIndicator {
   border: 1px solid #999999;
   border-radius: 3px;
   height: 35.5px;
diff --git a/index.js b/index.js
index f3e285b..5739b2e 100644
--- a/index.js
+++ b/index.js
@@ -1,124 +1,124 @@
-'use strict';
+(function() {
+  'use strict';
 
-let brushClass = 'drab-black';
+  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');
-  let pixel;
-
-  for (let i = 0; i < 2013; i++) {
-    pixel = document.createElement('div');
-    pixel.classList.add('pixel');
-    canvas.appendChild(pixel);
+  const paintPixel = function(pixel) {
+    pixel.classList.remove(pixel.classList.item(1));
+    pixel.classList.add(brushClass);
   }
 
-  canvas.addEventListener('click', (event) => {
-    if (event.target === canvas) {
-      return;
+  const drawCanvas = function() {
+    const canvas = document.querySelector('#canvas');
+
+    for (let i = 0; i < 2013; i++) {
+      const pixel = document.createElement('div');
+      pixel.classList.add('pixel');
+      canvas.appendChild(pixel);
     }
 
-    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() {
-  const palette = document.querySelector('#palette');
-
-  const colorClasses = [
-    'carmine-red',
-    'coral-red',
-    'pastel-red',
-    'tigers-eye-orange',
-    'pastel-orange',
-    'topaz-orange',
-    'sandstorm-yellow',
-    'lemon-yellow',
-    'pastel-yellow',
-    'lime-green',
-    'ufo-green',
-    'mint-green',
-    'cerulean-blue',
-    'ultramarine-blue',
-    'carolina-blue',
-    'purple-heart',
-    'lavender-indigo',
-    'bright-lavender',
-    'bruise-purple',
-    'heliotrope-purple',
-    'lavender-magenta',
-    'black-black',
-    'drab-black',
-    'dim-gray',
-    'manatee-gray',
-    'pastel-gray',
-    'white-white',
-    'bistre-brown',
-    'noir-brown',
-    'bole-brown',
-    'chestnut-brown',
-    'grullo-brown'
-  ];
-
-  let color;
-
-  for (const colorClass of colorClasses) {
-    color = document.createElement('div');
-    color.classList.add('color', colorClass);
-    palette.appendChild(color);
+    canvas.addEventListener('click', (event) => {
+      if (event.target === canvas) {
+        return;
+      }
+
+      paintPixel(event.target);
+    });
+
+    // Bonus 1 - paintbrush
+    //
+    // let isPainting = false;
+    //
+    // canvas.addEventListener('mousedown', () => {
+    //   isPainting = true;
+    //
+    //   if (event.target === canvas) {
+    //     return;
+    //   }
+    //
+    //   paintPixel(event.target);
+    // });
+    //
+    // document.addEventListener('mouseup', () => {
+    //   isPainting = false;
+    // });
+    //
+    // const pixels = document.querySelectorAll('.pixel');
+    //
+    // for (const pixel of pixels) {
+    //   pixel.addEventListener('mouseenter', () => {
+    //     if (isPainting) {
+    //       paintPixel(event.target);
+    //     }
+    //   });
+    // }
   }
 
-  const heading = document.createElement('h2');
-  heading.textContent = 'BRUSH COLOR >';
+  const drawPalette = function() {
+    const palette = document.querySelector('#palette');
+
+    const colorClasses = [
+      'carmine-red',
+      'coral-red',
+      'pastel-red',
+      'tigers-eye-orange',
+      'pastel-orange',
+      'topaz-orange',
+      'sandstorm-yellow',
+      'lemon-yellow',
+      'pastel-yellow',
+      'lime-green',
+      'ufo-green',
+      'mint-green',
+      'cerulean-blue',
+      'ultramarine-blue',
+      'carolina-blue',
+      'purple-heart',
+      'lavender-indigo',
+      'bright-lavender',
+      'bruise-purple',
+      'heliotrope-purple',
+      'lavender-magenta',
+      'black-black',
+      'drab-black',
+      'dim-gray',
+      'manatee-gray',
+      'pastel-gray',
+      'white-white',
+      'bistre-brown',
+      'noir-brown',
+      'bole-brown',
+      'chestnut-brown',
+      'grullo-brown'
+    ];
+
+    for (const colorClass of colorClasses) {
+      const color = document.createElement('div');
+      color.classList.add('color', colorClass);
+      palette.appendChild(color);
+    }
 
-  const brush = document.createElement('div');
-  brush.classList.add('brush', brushClass);
+    const heading = document.createElement('h2');
+    heading.textContent = 'BRUSH COLOR >';
 
-  palette.appendChild(heading);
-  palette.appendChild(brush);
+    const brushIndicator = document.createElement('div');
+    brushIndicator.classList.add('brushIndicator', brushClass);
 
-  palette.addEventListener('click', (event) => {
-    if (event.target === palette) {
-      return;
-    }
+    palette.appendChild(heading);
+    palette.appendChild(brushIndicator);
+
+    palette.addEventListener('click', (event) => {
+      if (event.target === palette) {
+        return;
+      }
 
-    brushClass = event.target.classList.item(1);
+      brushClass = event.target.classList.item(1);
 
-    brush.classList.remove(brush.classList.item(1));
-    brush.classList.add(brushClass);
-  });
-}
+      brushIndicator.classList.remove(brushIndicator.classList.item(1));
+      brushIndicator.classList.add(brushClass);
+    });
+  }
 
-drawCanvas();
-drawPalette();
+  drawCanvas();
+  drawPalette();
+})();