Improve the solution

4 changed files with 359 additions and 0 deletions
--- a/1
+++ b/1
@ -0,0 +1 @@
 ryansobol-pixel-art-maker.surge.sh
--- a/index.css
+++ b/index.css
@ -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;
 }
--- a/index.html
+++ b/index.html
@ -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>
--- a/index.js
+++ b/index.js
@ -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();
 })();
Author	SHA1	Message	Date
Ryan Sobol	d703db5bac	Improve the solution	7 years ago
Ryan Sobol	e7deb660cb	Improve the solution	7 years ago
Ryan Sobol	f298427ab8	Improve the solution	7 years ago
Ryan Sobol	cecb8d1f40	Improve the solution	7 years ago
Ryan Sobol	6c1a57711b	Improve the solution	7 years ago
Ryan Sobol	b0da25cd29	Improve the solution	7 years ago
Ryan Sobol	bd71278bba	Add CNAME to solution	7 years ago
Ryan Sobol	f4152534a0	Tweak CSS	7 years ago
Ryan Sobol	ff1a006ded	Complete the painting analogy	7 years ago
Ryan Sobol	08b5fe7384	Refactor to mostly pixels	7 years ago
Ryan Sobol	0dbbca96ed	Refactor to flexbox	7 years ago
Ryan Sobol	976cd319cb	Add semantic markupto solution :P	7 years ago
Ryan Sobol	98678f2d45	Make the solution more dynamic	7 years ago
Ian Smith	4534b665d6	added solution	7 years ago