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

Compare commits

merge into: sigonasr2:master
Branches Tags
sigonasr2:master
sigonasr2:bangalore
sigonasr2:solution_bangalore
sigonasr2:solution
...
pull from: sigonasr2:solution
Branches Tags
sigonasr2:master
sigonasr2:bangalore
sigonasr2:solution_bangalore
sigonasr2:solution

14 Commits
master ... solution

Author SHA1 Message Date
Ryan Sobol
d703db5bac Improve the solution 2018-06-12 08:15:44 +05:30
Ryan Sobol
e7deb660cb Improve the solution 2018-06-12 08:15:44 +05:30
Ryan Sobol
f298427ab8 Improve the solution 2018-06-12 08:15:44 +05:30
Ryan Sobol
cecb8d1f40 Improve the solution 2018-06-12 08:15:44 +05:30
Ryan Sobol
6c1a57711b Improve the solution 2018-06-12 08:15:44 +05:30
Ryan Sobol
b0da25cd29 Improve the solution 2018-06-12 08:15:44 +05:30
Ryan Sobol
bd71278bba Add CNAME to solution 2018-06-12 08:15:44 +05:30
Ryan Sobol
f4152534a0 Tweak CSS 2018-06-12 08:15:44 +05:30
Ryan Sobol
ff1a006ded Complete the painting analogy 2018-06-12 08:15:44 +05:30
Ryan Sobol
08b5fe7384 Refactor to mostly pixels 2018-06-12 08:15:33 +05:30
Ryan Sobol
0dbbca96ed Refactor to flexbox 2018-06-12 08:15:33 +05:30
Ryan Sobol
976cd319cb Add semantic markupto solution :P 2018-06-12 08:15:33 +05:30
Ryan Sobol
98678f2d45 Make the solution more dynamic 2018-06-12 08:15:13 +05:30
Ian Smith
4534b665d6 added solution 2018-06-12 08:15:13 +05:30
4 changed files with 359 additions and 0 deletions
Show Stats Expand all files Collapse all files

1
CNAME Normal file
View File

@ -0,0 +1 @@
ryansobol-pixel-art-maker.surge.sh

219
index.css Normal file
View File

@ -0,0 +1,219 @@
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
body {
background-color: #ccc;
}
h2 {
color: #999;
font-family: Gill Sans;
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 3px;
line-height: 2.2rem;
margin: 6px 0 0 20px;
}
main {
background-color: #e5e5e5;
border-radius: 15px;
box-shadow: 0 0 20px #999;
margin: 20px auto 0;
padding: 20px;
width: 894px;
}
.pixel {
background-color: white;
border: 1px solid #e5e5e5;
height: 14px;
width: 14px;
}
.brushIndicator {
border: 1px solid #999999;
border-radius: 3px;
height: 35.5px;
margin: 6px 0 0 12px;
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;
}

15
index.html
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pixel Art Maker</title>
<script defer src="index.js"></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div id="canvas"></div>
<div id="palette"></div>
</main>
</body>
</html>

124
index.js Normal file
View File

@ -0,0 +1,124 @@
(function() {
'use strict';
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');
for (let i = 0; i < 2013; i++) {
const pixel = document.createElement('div');
pixel.classList.add('pixel');
canvas.appendChild(pixel);
}
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 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 heading = document.createElement('h2');
heading.textContent = 'BRUSH COLOR >';
const brushIndicator = document.createElement('div');
brushIndicator.classList.add('brushIndicator', brushClass);
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();
})();