CodePen Embed - Coloured Pixel Art Demo

<div id="drawingBoard">
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  <div class="pixel white"></div>
  
</div>

html {
  background-color: #333;
}

body {
  margin: 0;
}

#drawingBoard {
  width: 100vmin;
  height: 100vmin;
  
  display: flex;
  flex-wrap: wrap;
  
  border-style: solid;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

#drawingBoard .pixel {
  box-sizing: border-box;
  border-right: 1px solid rgba(0,0,0,0.1);
  border-bottom:1px solid rgba(0,0,0,0.1);
  width: 10%;
  height: 10%;
}

.white {
  background-color: white;
}

.black {
  background-color: black;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.purple {
  background-color: purple;
}

$(".pixel").click(changeColor);

function changeColor() {
  
  var pixel = $(this);
  
  if( pixel.hasClass('white') ) {
    pixel.removeClass('white');
    pixel.addClass('black');
  } 
  
  else if( pixel.hasClass('black') ) {
    pixel.removeClass('black');
    pixel.addClass('red'); 
  } 
  
  else if( pixel.hasClass('red') ) {
    pixel.removeClass('red');
    pixel.addClass('orange');  
  } 
  
  else if( pixel.hasClass('orange') ) {
    pixel.removeClass('orange');
    pixel.addClass('yellow');  
  } 
  
  else if( pixel.hasClass('yellow') ) {
    pixel.removeClass('yellow');
    pixel.addClass('green'); 
  } 
  
  else if( pixel.hasClass('green') ) {
    pixel.removeClass('green');
    pixel.addClass('blue');
    
  }
  
  else if( pixel.hasClass('blue') ) {
    pixel.removeClass('blue');
    pixel.addClass('purple');
    
  } 
  
  else if( pixel.hasClass('purple') ) {
    pixel.removeClass('purple');
    pixel.addClass('white');
    
  }
  
  
}

This Pen is owned by Gather Workshops on CodePen.

See more by @gatherworkshops on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js