From ddcd8fa42f1dd476e595720969b98dd0947dacae Mon Sep 17 00:00:00 2001 From: THACHER Date: Wed, 10 Aug 2016 14:55:19 -0700 Subject: [PATCH] example solution --- CNAME | 0 README.md | 2 ++ app.js | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 16 ++++++++++ style.css | 58 ++++++++++++++++++++++++++++++++++ 5 files changed, 168 insertions(+) create mode 100644 CNAME create mode 100644 app.js create mode 100644 style.css diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index b1b6877..179826d 100644 --- 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. diff --git a/app.js b/app.js new file mode 100644 index 0000000..0d79c30 --- /dev/null +++ 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(); diff --git a/index.html b/index.html index e69de29..5367205 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,16 @@ + + + + + Pixel Art Maker + + + +
+
+
+
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..074e911 --- /dev/null +++ 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; +}