Improve the solution

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;

index.js

@@ -1,3 +1,4 @@
+(function() {
   'use strict';
 
   let brushClass = 'drab-black';
@@ -9,10 +10,9 @@ const paintPixel = function(pixel) {
 
   const drawCanvas = function() {
     const canvas = document.querySelector('#canvas');
-  let pixel;
 
     for (let i = 0; i < 2013; i++) {
-    pixel = document.createElement('div');
+      const pixel = document.createElement('div');
       pixel.classList.add('pixel');
       canvas.appendChild(pixel);
     }
@@ -25,7 +25,8 @@ const drawCanvas = function() {
       paintPixel(event.target);
     });
 
-  // or...
+    // Bonus 1 - paintbrush
+    //
     // let isPainting = false;
     //
     // canvas.addEventListener('mousedown', () => {
@@ -38,7 +39,7 @@ const drawCanvas = function() {
     //   paintPixel(event.target);
     // });
     //
-  // canvas.addEventListener('mouseup', () => {
+    // document.addEventListener('mouseup', () => {
     //   isPainting = false;
     // });
     //
@@ -91,10 +92,8 @@ const drawPalette = function() {
       'grullo-brown'
     ];
 
-  let color;
-
     for (const colorClass of colorClasses) {
-    color = document.createElement('div');
+      const color = document.createElement('div');
       color.classList.add('color', colorClass);
       palette.appendChild(color);
     }
@@ -102,11 +101,11 @@ const drawPalette = function() {
     const heading = document.createElement('h2');
     heading.textContent = 'BRUSH COLOR >';
 
-  const brush = document.createElement('div');
-  brush.classList.add('brush', brushClass);
+    const brushIndicator = document.createElement('div');
+    brushIndicator.classList.add('brushIndicator', brushClass);
 
     palette.appendChild(heading);
-  palette.appendChild(brush);
+    palette.appendChild(brushIndicator);
 
     palette.addEventListener('click', (event) => {
       if (event.target === palette) {
@@ -115,10 +114,11 @@ const drawPalette = function() {
 
       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();
+})();