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

24
index.js
View File

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