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-11 15:47:42 -08:00 committed by Brent Gardner
parent 6c1a57711b
commit cecb8d1f40
2 changed files with 217 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
index.css
View File

@ -36,15 +36,7 @@ main {
width: 14px;
}
.color {
border: 1px solid #bbbbbb;
border-radius: 50%;
height: 35.5px;
margin: 5px 5px 0 0;
width: 35.5px;
}
.brushColor {
.brush {
border: 1px solid #999999;
border-radius: 3px;
height: 35.5px;
@ -52,6 +44,175 @@ main {
width: 100px;
}
.color {
/* Prevent classes like 'carmine-red' from specifying the border-color */
border: 1px solid #bbbbbb !important;
border-radius: 50%;
height: 35.5px;
margin: 5px 5px 0 0;
width: 35.5px;
}
.carmine-red {
background-color: #b23232;
border-color: #b23232;
}
.coral-red {
background-color: #ff4848;
border-color: #ff4848;
}
.pastel-red {
background-color: #ff6c6c;
border-color: #ff6c6c;
}
.tigers-eye-orange {
background-color: #e59b40;
border-color: #e59b40;
}
.pastel-orange {
background-color: #ffad48;
border-color: #ffad48;
}
.topaz-orange {
background-color: #ffc57e;
border-color: #ffc57e;
}
.sandstorm-yellow {
background-color: #e5de40;
border-color: #e5de40;
}
.lemon-yellow {
background-color: #fff748;
border-color: #fff748;
}
.pastel-yellow {
background-color: #fffa91;
border-color: #fffa91;
}
.lime-green {
background-color: #39cc4b;
border-color: #39cc4b;
}
.ufo-green {
background-color: #48ff5e;
border-color: #48ff5e;
}
.mint-green {
background-color: #91ff9e;
border-color: #91ff9e;
}
.cerulean-blue {
background-color: #3248b2;
border-color: #3248b2;
}
.ultramarine-blue {
background-color: #4867ff;
border-color: #4867ff;
}
.carolina-blue {
background-color: #91a3ff;
border-color: #91a3ff;
}
.purple-heart {
background-color: #6432b2;
border-color: #6432b2;
}
.lavender-indigo {
background-color: #8f48ff;
border-color: #8f48ff;
}
.bright-lavender {
background-color: #bb91ff;
border-color: #bb91ff;
}
.bruise-purple {
background-color: #7c2b99;
border-color: #7c2b99;
}
.heliotrope-purple {
background-color: #cf48ff;
border-color: #cf48ff;
}
.lavender-magenta {
background-color: #e291ff;
border-color: #e291ff;
}
.black-black {
background-color: #000000;
border-color: #000000;
}
.drab-black {
background-color: #323232;
border-color: #323232;
}
.dim-gray {
background-color: #666666;
border-color: #666666;
}
.manatee-gray {
background-color: #999999;
border-color: #999999;
}
.pastel-gray {
background-color: #cccccc;
border-color: #cccccc;
}
.white-white {
background-color: #ffffff;
border-color: #ffffff;
}
.bistre-brown {
background-color: #3a2119;
border-color: #3a2119;
}
.noir-brown {
background-color: #512e23;
border-color: #512e23;
}
.bole-brown {
background-color: #754233;
border-color: #754233;
}
.chestnut-brown {
background-color: #90675b;
border-color: #90675b;
}
.grullo-brown {
background-color: #ac8d84;
border-color: #ac8d84;
}
#canvas, #palette {
display: flex;
flex-wrap: wrap;

94
index.js
View File

@ -1,6 +1,6 @@
'use strict';
let brush;
let brushClass;
const drawCanvas = function() {
const canvas = document.querySelector('#canvas');
@ -8,83 +8,83 @@ const drawCanvas = function() {
for (let i = 0; i < 2013; i++) {
pixel = document.createElement('div');
pixel.className = 'pixel';
pixel.classList.add('pixel');
canvas.appendChild(pixel);
}
canvas.addEventListener('click', (event) => {
if (event.target.className !== 'pixel') {
if (event.target === canvas) {
return;
}
event.target.style.background = brush;
event.target.style.borderColor = brush;
event.target.classList.add(brushClass);
});
}
const drawPalette = function() {
const palette = document.querySelector('#palette');
const hexColors = [
'#b23232',
'#ff4848',
'#ff6c6c',
'#e59b40',
'#ffad48',
'#ffc57e',
'#e5de40',
'#fff748',
'#fffa91',
'#39cc4b',
'#48ff5e',
'#91ff9e',
'#3248b2',
'#4867ff',
'#91a3ff',
'#6432b2',
'#8f48ff',
'#bb91ff',
'#7c2b99',
'#cf48ff',
'#e291ff',
'#000000',
'#323232',
'#666666',
'#999999',
'#cccccc',
'#ffffff',
'#3a2119',
'#512e23',
'#754233',
'#90675b',
'#ac8d84'
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 hexColor of hexColors) {
for (const colorClass of colorClasses) {
color = document.createElement('div');
color.className = 'color';
color.style.background = hexColor;
color.classList.add('color', colorClass);
palette.appendChild(color);
}
const heading = document.createElement('h2');
heading.textContent = 'BRUSH COLOR >';
const brushColor = document.createElement('div');
brushColor.className = 'brushColor';
const brush = document.createElement('div');
brush.classList.add('brush');
palette.appendChild(heading);
palette.appendChild(brushColor);
palette.appendChild(brush);
palette.addEventListener('click', (event) => {
if (event.target.className !== 'color') {
if (event.target === palette) {
return;
}
brush = event.target.style.background;
brushColor.style.background = brush;
brushClass = event.target.classList.item(1);
brush.classList.remove(brush.classList.item(1));
brush.classList.add(brushClass);
});
}