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

Revert "example solution"

Browse Source 
This reverts commit ddcd8fa42f1dd476e595720969b98dd0947dacae.
This commit is contained in:
Craig Quincy 2016-08-12 07:50:35 -06:00
parent 4a3ed86b3d
commit 79871b8708
5 changed files with 0 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
CNAME
View File

2
README.md
View File

@ -1,5 +1,3 @@
####Example solution deployed to [surge](example-pixel-art.surge.sh)
# Pixel Art Maker # 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. 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
View File

@ -1,92 +0,0 @@
'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

@ -1,16 +0,0 @@
<!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
View File

@ -1,58 +0,0 @@
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;
}