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

8
index.css

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

216
index.js

@ -1,124 +1,124 @@
'use strict';
(function() {
'use strict';
let brushClass = 'drab-black';
let brushClass = 'drab-black';
const paintPixel = function(pixel) {
pixel.classList.remove(pixel.classList.item(1));
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);
const paintPixel = function(pixel) {
pixel.classList.remove(pixel.classList.item(1));
pixel.classList.add(brushClass);
}
canvas.addEventListener('click', (event) => {
if (event.target === canvas) {
return;
const drawCanvas = function() {
const canvas = document.querySelector('#canvas');
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...
// 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);
// }
// });
// }
}
paintPixel(event.target);
});
const drawPalette = function() {
const palette = document.querySelector('#palette');
const colorClasses = [
'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'
];
let color;
for (const colorClass of colorClasses) {
color = document.createElement('div');
color.classList.add('color', colorClass);
palette.appendChild(color);
// Bonus 1 - paintbrush
//
// let isPainting = false;
//
// canvas.addEventListener('mousedown', () => {
// isPainting = true;
//
// if (event.target === canvas) {
// return;
// }
//
// paintPixel(event.target);
// });
//
// document.addEventListener('mouseup', () => {
// isPainting = false;
// });
//
// const pixels = document.querySelectorAll('.pixel');
//
// for (const pixel of pixels) {
// pixel.addEventListener('mouseenter', () => {
// if (isPainting) {
// paintPixel(event.target);
// }
// });
// }
}
const heading = document.createElement('h2');
heading.textContent = 'BRUSH COLOR >';
const drawPalette = function() {
const palette = document.querySelector('#palette');
const brush = document.createElement('div');
brush.classList.add('brush', brushClass);
const colorClasses = [
'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);
palette.appendChild(brush);
palette.addEventListener('click', (event) => {
if (event.target === palette) {
return;
for (const colorClass of colorClasses) {
const color = document.createElement('div');
color.classList.add('color', colorClass);
palette.appendChild(color);
}
brushClass = event.target.classList.item(1);
const heading = document.createElement('h2');
heading.textContent = 'BRUSH COLOR >';
brush.classList.remove(brush.classList.item(1));
brush.classList.add(brushClass);
});
}
const brushIndicator = document.createElement('div');
brushIndicator.classList.add('brushIndicator', brushClass);
drawCanvas();
drawPalette();
palette.appendChild(heading);
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();
})();