added solution

app.js

@@ -0,0 +1,15 @@
+
+
+var brush;
+var current = document.querySelector('.current');
+
+var colorField = document.querySelector('#container');
+colorField.addEventListener('click', function(event) {
+  if (event.target.parentNode.id === 'palette-container') {
+    brush = event.target.style.background;
+    current.style.background = brush;
+  } else if (event.target.className === 'pixel') {
+    event.target.style.background = brush;
+    event.target.style.borderColor = brush;
+  }
+});

styles.css

@@ -0,0 +1,68 @@
+body {
+  background: #ccc;
+}
+
+h2 {
+  font-size: 1.75em;
+  float: left;
+  font-family: Gill Sans;
+  color: #999;
+  font-weight: 400;
+  letter-spacing: 3px;
+  margin: 8px 24px 0 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;
+  margin: 0 auto;
+  margin-top: 2%;
+  padding: 2%;
+  border-radius: 3.5%;
+  box-shadow: 0 0 20px #999;
+}
+
+#palette-container {
+  width: 100%;
+  height: 100px;
+}
+
+.canvas {
+  width: 100%;
+  height: 570px;
+  margin: 0 auto;
+}
+
+.pixel {
+  width: 14px;
+  height: 14px;
+  background: white;
+  border: 1px solid #e5e5e5;
+  float: left;
+}
+
+.palette{
+  width: 36.5px;
+  height: 36.5px;
+  border: 1px solid #e5e5e5;
+  float: left;
+  border-radius: 50%;
+  margin: 5px;
+}