Simple Vanilla JS ColorPicker

just for fun and for 2ch

by Alex Sol

HTML

<div id='app'>
  <div class="target"></div>
  <div class="colorPicker"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-weight: 300;
  background-color: darkgrey;
}

.target {
  display: block;
  width: 100px;
  height: 100px;
  margin: 15px auto;
  border: 3px solid #000;
  border-radius: 10px;
  background: #FFF;
}

.colorPicker {
  display: flex;
  margin: 0 auto;
  flex-direction: row;
  vertical-align: middle;
  width: 250px;
  height: 40px;
  justify-content: space-around;
  align-items: center;
}

.color {
  display: block;
  width: 30px;
  height: 30px;
  border: 2px solid lightslategrey;
  border-radius: 50%;
  cursor: pointer;
}

.color:hover {
  border-color: black;
}

JavaScript

var COLORS = ["red", "green", "yellow", "blue", "brown"];

var colorPicker = document.querySelector('.colorPicker'),
    targetEl = document.querySelector('.target');

for (var i = 0; i < COLORS.length; i++) {
	var colorEl = document.createElement('div');
  		colorEl.classList.add('color', COLORS[i]);
     	colorEl.style.background = COLORS[i];
      
  		colorPicker.appendChild(colorEl);
}

colorPicker.addEventListener('click', pickColor);

function pickColor(e) {
	var cColorEl = e.target;
  
  if (cColorEl === colorPicker) {
  	console.log('false');
  } else {
  	var bgCol = cColorEl.style.backgroundColor;
  	targetEl.style.backgroundColor = bgCol;
  }
}