example solution

9 years ago · ddcd8fa42f
parent 95d5e236b7
commit ddcd8fa42f
5 changed files with 168 additions and 0 deletions
--- a/0
+++ b/0
--- a/README.md
+++ b/README.md
@ -1,3 +1,5 @@
+####Example solution deployed to [surge](example-pixel-art.surge.sh)
+
 # Pixel Art Maker

 In this exercise, you'll create your own pixel art maker which will allow a user to choose colors from a palette and then paint pixel art. The interface is completely up to you, but it could look something like this.
--- a/app.js
+++ b/app.js
@ -0,0 +1,92 @@
+'use strict';
+
+var brush;
+
+var drawCanvas = function() {
+  var canvas = document.querySelector('#canvas');
+  var pixel;
+
+  for (var i = 0; i < 2013; i++) {
+    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 heading = document.createElement('h2');
+  heading.textContent = 'BRUSH COLOR >';
+
+  var brushColor = document.createElement('div');
+  brushColor.className = 'brushColor';
+
+  palette.appendChild(heading);
+  palette.appendChild(brushColor);
+
+  palette.addEventListener('click', function(event) {
+    if (event.target.className !== 'color') {
+      return;
+    }
+
+    brush = event.target.style.background;
+    brushColor.style.background = brush;
+  });
+}
+
+drawCanvas();
+drawPalette();
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Pixel Art Maker</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <main>
+      <div id="canvas"></div>
+      <div id="palette"></div>
+    </main>
+
+    <script src="app.js"></script>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,58 @@
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  background: #ccc;
+}
+
+h2 {
+  color: #999;
+  font-family: Gill Sans;
+  font-size: 1.5rem;
+  font-weight: 400;
+  letter-spacing: 3px;
+  line-height: 2.2rem;
+  margin: 6px 0 0 20px;
+}
+
+main {
+  background: #e5e5e5;
+  border-radius: 15px;
+  box-shadow: 0 0 20px #999;
+  margin: 20px auto 0;
+  padding: 20px;
+  width: 894px;
+}
+
+.pixel {
+  background: white;
+  border: 1px solid #e5e5e5;
+  height: 14px;
+  width: 14px;
+}
+
+.color {
+  border: 1px solid #bbbbbb;
+  border-radius: 50%;
+  height: 35.5px;
+  margin: 5px 5px 0 0;
+  width: 35.5px;
+}
+
+.brushColor {
+  border: 1px solid #999999;
+  border-radius: 3px;
+  height: 35.5px;
+  margin: 6px 0 0 12px;
+  width: 100px;
+}
+
+#canvas, #palette {
+  display: flex;
+  flex-wrap: wrap;
+}