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

Improve the solution

Browse Source
This commit is contained in:
Ryan Sobol 2016-11-14 10:57:54 -08:00 committed by Brent Gardner
parent e7deb660cb
commit d703db5bac
2 changed files with 112 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.css
View File

@ -7,7 +7,7 @@ html {
} }
body { body {
background: #ccc; background-color: #ccc;
} }
h2 { h2 {
@ -21,7 +21,7 @@ h2 {
} }
main { main {
background: #e5e5e5; background-color: #e5e5e5;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 0 20px #999; box-shadow: 0 0 20px #999;
margin: 20px auto 0; margin: 20px auto 0;
@ -30,13 +30,13 @@ main {
} }
.pixel { .pixel {
background: white; background-color: white;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
height: 14px; height: 14px;
width: 14px; width: 14px;
} }
.brush { .brushIndicator {
border: 1px solid #999999; border: 1px solid #999999;
border-radius: 3px; border-radius: 3px;
height: 35.5px; height: 35.5px;

216
index.js
View File

@ -1,124 +1,124 @@
'use strict'; (function() {
'use strict';
let brushClass = 'drab-black'; let brushClass = 'drab-black';
const paintPixel = function(pixel) { const paintPixel = function(pixel) {
pixel.classList.remove(pixel.classList.item(1)); pixel.classList.remove(pixel.classList.item(1));
pixel.classList.add(brushClass); pixel.classList.add(brushClass);
}
const drawCanvas = function() {
const canvas = document.querySelector('#canvas');
let pixel;
for (let i = 0; i < 2013; i++) {
pixel = document.createElement('div');
pixel.classList.add('pixel');
canvas.appendChild(pixel);
} }
canvas.addEventListener('click', (event) => { const drawCanvas = function() {
if (event.target === canvas) { const canvas = document.querySelector('#canvas');
return;
for (let i = 0; i < 2013; i++) {
const pixel = document.createElement('div');
pixel.classList.add('pixel');
canvas.appendChild(pixel);
} }
paintPixel(event.target); canvas.addEventListener('click', (event) => {
}); if (event.target === canvas) {
return;
}
// or... paintPixel(event.target);
// let isPainting = false; });
//
// canvas.addEventListener('mousedown', () => {
// isPainting = true;
//
// if (event.target === canvas) {
// return;
// }
//
// paintPixel(event.target);
// });
//
// canvas.addEventListener('mouseup', () => {
// isPainting = false;
// });
//
// const pixels = document.querySelectorAll('.pixel');
//
// for (const pixel of pixels) {
// pixel.addEventListener('mouseenter', () => {
// if (isPainting) {
// paintPixel(event.target);
// }
// });
// }
}
const drawPalette = function() { // Bonus 1 - paintbrush
const palette = document.querySelector('#palette'); //
// let isPainting = false;
const colorClasses = [ //
'carmine-red', // canvas.addEventListener('mousedown', () => {
'coral-red', // isPainting = true;
'pastel-red', //
'tigers-eye-orange', // if (event.target === canvas) {
'pastel-orange', // return;
'topaz-orange', // }
'sandstorm-yellow', //
'lemon-yellow', // paintPixel(event.target);
'pastel-yellow', // });
'lime-green', //
'ufo-green', // document.addEventListener('mouseup', () => {
'mint-green', // isPainting = false;
'cerulean-blue', // });
'ultramarine-blue', //
'carolina-blue', // const pixels = document.querySelectorAll('.pixel');
'purple-heart', //
'lavender-indigo', // for (const pixel of pixels) {
'bright-lavender', // pixel.addEventListener('mouseenter', () => {
'bruise-purple', // if (isPainting) {
'heliotrope-purple', // paintPixel(event.target);
'lavender-magenta', // }
'black-black', // });
'drab-black', // }
'dim-gray',
'manatee-gray',
'pastel-gray',
'white-white',
'bistre-brown',
'noir-brown',
'bole-brown',
'chestnut-brown',
'grullo-brown'
];
let color;
for (const colorClass of colorClasses) {
color = document.createElement('div');
color.classList.add('color', colorClass);
palette.appendChild(color);
} }
const heading = document.createElement('h2'); const drawPalette = function() {
heading.textContent = 'BRUSH COLOR >'; const palette = document.querySelector('#palette');
const brush = document.createElement('div'); const colorClasses = [
brush.classList.add('brush', brushClass); 'carmine-red',
'coral-red',
'pastel-red',
'tigers-eye-orange',
'pastel-orange',
'topaz-orange',
'sandstorm-yellow',
'lemon-yellow',
'pastel-yellow',
'lime-green',
'ufo-green',
'mint-green',
'cerulean-blue',
'ultramarine-blue',
'carolina-blue',
'purple-heart',
'lavender-indigo',
'bright-lavender',
'bruise-purple',
'heliotrope-purple',
'lavender-magenta',
'black-black',
'drab-black',
'dim-gray',
'manatee-gray',
'pastel-gray',
'white-white',
'bistre-brown',
'noir-brown',
'bole-brown',
'chestnut-brown',
'grullo-brown'
];
palette.appendChild(heading); for (const colorClass of colorClasses) {
palette.appendChild(brush); const color = document.createElement('div');
color.classList.add('color', colorClass);
palette.addEventListener('click', (event) => { palette.appendChild(color);
if (event.target === palette) {
return;
} }
brushClass = event.target.classList.item(1); const heading = document.createElement('h2');
heading.textContent = 'BRUSH COLOR >';
brush.classList.remove(brush.classList.item(1)); const brushIndicator = document.createElement('div');
brush.classList.add(brushClass); brushIndicator.classList.add('brushIndicator', brushClass);
});
}
drawCanvas(); palette.appendChild(heading);
drawPalette(); palette.appendChild(brushIndicator);
palette.addEventListener('click', (event) => {
if (event.target === palette) {
return;
}
brushClass = event.target.classList.item(1);
brushIndicator.classList.remove(brushIndicator.classList.item(1));
brushIndicator.classList.add(brushClass);
});
}
drawCanvas();
drawPalette();
})();