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;

44
index.js
View File

@ -1,18 +1,18 @@
'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 drawCanvas = function() {
const canvas = document.querySelector('#canvas'); const canvas = document.querySelector('#canvas');
let pixel;
for (let i = 0; i < 2013; i++) { for (let i = 0; i < 2013; i++) {
pixel = document.createElement('div'); const pixel = document.createElement('div');
pixel.classList.add('pixel'); pixel.classList.add('pixel');
canvas.appendChild(pixel); canvas.appendChild(pixel);
} }
@ -25,7 +25,8 @@ const drawCanvas = function() {
paintPixel(event.target); paintPixel(event.target);
}); });
// or... // Bonus 1 - paintbrush
//
// let isPainting = false; // let isPainting = false;
// //
// canvas.addEventListener('mousedown', () => { // canvas.addEventListener('mousedown', () => {
@ -38,7 +39,7 @@ const drawCanvas = function() {
// paintPixel(event.target); // paintPixel(event.target);
// }); // });
// //
// canvas.addEventListener('mouseup', () => { // document.addEventListener('mouseup', () => {
// isPainting = false; // isPainting = false;
// }); // });
// //
@ -51,9 +52,9 @@ const drawCanvas = function() {
// } // }
// }); // });
// } // }
} }
const drawPalette = function() { const drawPalette = function() {
const palette = document.querySelector('#palette'); const palette = document.querySelector('#palette');
const colorClasses = [ const colorClasses = [
@ -91,10 +92,8 @@ const drawPalette = function() {
'grullo-brown' 'grullo-brown'
]; ];
let color;
for (const colorClass of colorClasses) { for (const colorClass of colorClasses) {
color = document.createElement('div'); const color = document.createElement('div');
color.classList.add('color', colorClass); color.classList.add('color', colorClass);
palette.appendChild(color); palette.appendChild(color);
} }
@ -102,11 +101,11 @@ const drawPalette = function() {
const heading = document.createElement('h2'); const heading = document.createElement('h2');
heading.textContent = 'BRUSH COLOR >'; heading.textContent = 'BRUSH COLOR >';
const brush = document.createElement('div'); const brushIndicator = document.createElement('div');
brush.classList.add('brush', brushClass); brushIndicator.classList.add('brushIndicator', brushClass);
palette.appendChild(heading); palette.appendChild(heading);
palette.appendChild(brush); palette.appendChild(brushIndicator);
palette.addEventListener('click', (event) => { palette.addEventListener('click', (event) => {
if (event.target === palette) { if (event.target === palette) {
@ -115,10 +114,11 @@ const drawPalette = function() {
brushClass = event.target.classList.item(1); brushClass = event.target.classList.item(1);
brush.classList.remove(brush.classList.item(1)); brushIndicator.classList.remove(brushIndicator.classList.item(1));
brush.classList.add(brushClass); brushIndicator.classList.add(brushClass);
}); });
} }
drawCanvas(); drawCanvas();
drawPalette(); drawPalette();
})();