Make the solution more dynamic

app.css

@@ -1,68 +1,76 @@
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
 body {
   background: #ccc;
 }
 
 h2 {
-  font-size: 1.75em;
-  float: left;
-  font-family: Gill Sans;
   color: #999;
+  font-family: Gill Sans;
+  font-size: 1.5rem;
   font-weight: 400;
+  float: left;
   letter-spacing: 3px;
-  margin: 8px 24px 0 0;
+  line-height: 2.4rem;
-}
+  margin: 0;
-
-.info {
-  float: left;
-  padding-left: 24px;
-  width: 440px;
-  height: 40px;
-}
-
-.current {
-  float: left;
-  width: 100px;
-  height: 36.5px;
-  box-shadow: 0 0 5px #999;
-  border-radius: 5%;
-  margin-top: 5px;
 }
 
 #container {
-  width: 72%;
-  height: 670px;
   background: #e5e5e5;
+  border-radius: 3.5%;
+  box-shadow: 0 0 20px #999;
   margin: 0 auto;
   margin-top: 2%;
   padding: 2%;
-  border-radius: 3.5%;
+  width: 905px;
-  box-shadow: 0 0 20px #999;
 }
 
-#palette-container {
+#canvas {
-  width: 100%;
+  clear: both;
-  height: 100px;
-}
-
-.canvas {
-  width: 100%;
-  height: 570px;
   margin: 0 auto;
 }
 
+#palette {
+  clear: both;
+  height: 100px;
+  width: 100%;
+}
+
 .pixel {
-  width: 14px;
-  height: 14px;
   background: white;
   border: 1px solid #e5e5e5;
   float: left;
+  height: 14px;
+  width: 14px;
 }
 
-.palette{
+.color {
-  width: 36.5px;
+  border: 1px solid #bbbbbb;
-  height: 36.5px;
-  border: 1px solid #e5e5e5;
-  float: left;
   border-radius: 50%;
-  margin: 5px;
+  height: 35.5px;
+  float: left;
+  margin: 5px 5px 0 0;
+  width: 35.5px;
+}
+
+.selection {
+  float: left;
+  height: 35.5px;
+  margin-top: 6px;
+  padding-left: 18px;
+}
+
+.current {
+  border: 1px solid #999999;
+  border-radius: 5%;
+  float: left;
+  height: 35.5px;
+  margin-left: 12px;
+  width: 100px;
 }

app.js

@@ -1,15 +1,96 @@
-
+'use strict';
 
 var brush;
-var current = document.querySelector('.current');
 
-var colorField = document.querySelector('#container');
+var drawCanvas = function() {
-colorField.addEventListener('click', function(event) {
+  var canvas = document.querySelector('#canvas');
-  if (event.target.parentNode.id === 'palette-container') {
+  var pixel;
-    brush = event.target.style.background;
+
-    current.style.background = brush;
+  for (var i = 0; i < 2013; i++) {
-  } else if (event.target.className === 'pixel') {
+    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 selection = document.createElement('div');
+  selection.className = 'selection';
+
+  var heading = document.createElement('h2');
+  heading.textContent = 'CURRENT COLOR >';
+
+  var current = document.createElement('div');
+  current.className = 'current';
+
+  selection.appendChild(heading);
+  selection.appendChild(current);
+  palette.appendChild(selection);
+
+  palette.addEventListener('click', function(event) {
+    if (event.target.className !== 'color') {
+      return;
+    }
+
+    brush = event.target.style.background;
+    current.style.background = brush;
+  });
+}
+
+drawCanvas();
+drawPalette();