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

Improve the solution

Browse Source
solution
Ryan Sobol 8 years ago committed by Brent Gardner
parent e7deb660cb
commit d703db5bac
2 changed files with 114 additions and 114 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. 8
      index.css
  2. 220
      index.js

8
index.css
Unescape View File

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

220
index.js
Unescape View File

@ -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);
});
// 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);
// }
// });
// }
}
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);
canvas.addEventListener('click', (event) => {
if (event.target === canvas) {
return;
}
paintPixel(event.target);
});
// 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 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'
];
for (const colorClass of colorClasses) {
const color = document.createElement('div');
color.classList.add('color', colorClass);
palette.appendChild(color);
}
const brush = document.createElement('div');
brush.classList.add('brush', brushClass);
const heading = document.createElement('h2');
heading.textContent = 'BRUSH COLOR >';
palette.appendChild(heading);
palette.appendChild(brush);
const brushIndicator = document.createElement('div');
brushIndicator.classList.add('brushIndicator', brushClass);
palette.addEventListener('click', (event) => {
if (event.target === palette) {
return;
}
palette.appendChild(heading);
palette.appendChild(brushIndicator);
palette.addEventListener('click', (event) => {
if (event.target === palette) {
return;
}
brushClass = event.target.classList.item(1);
brushClass = event.target.classList.item(1);
brush.classList.remove(brush.classList.item(1));
brush.classList.add(brushClass);
});
}
brushIndicator.classList.remove(brushIndicator.classList.item(1));
brushIndicator.classList.add(brushClass);
});
}
drawCanvas();
drawPalette();
drawCanvas();
drawPalette();
})();

Write Preview
Loading…
Cancel
Save