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

Revert "example solution"

Browse Source 
This reverts commit ddcd8fa42f.
bangalore
Craig Quincy 9 years ago
parent 4a3ed86b3d
commit 79871b8708
5 changed files with 0 additions and 168 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 0
      CNAME
  2. 2
      README.md
  3. 92
      app.js
  4. 16
      index.html
  5. 58
      style.css

0
CNAME
Unescape View File

2
README.md
Unescape 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
Unescape 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
Unescape 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
Unescape 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;
}
Write Preview
Loading…
Cancel
Save