sigonasr2/pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

example solution

Browse Source
This commit is contained in:
THACHER 2016-08-10 14:55:19 -07:00
parent 95d5e236b7
commit ddcd8fa42f
5 changed files with 168 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
CNAME Normal file
View File

2
README.md
View File

@ -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.

92
app.js Normal file
View File

@ -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();

16
index.html
View File

@ -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>

58
style.css Normal file
View File

@ -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;
}