JSFiddle - React, Tailwind, and code Playground

by asdf

HTML

<div class="color red"></div>
<div class="color green"></div>
<div class="color blue"></div>
<div class="preview"></div>

CSS

.color {
  height: 100px;
  width: 100px;
  float: left;
  border: 1px solid lightgrey;
  margin: 0 10px 10px 0;
}
.red {
  background-color: rgb(255, 0, 0);
}
.green {
  background-color: rgb(0, 255, 0);
}
.blue {
  background-color: rgb(0, 0, 255);
}
.preview {
  background-color: rgb(255, 255, 255);
  height: 100px;
  border: 1px solid lightgrey;
  clear: both;
}

JavaScript

// Create webpage with several color “swatches” (e.g. red, yellow, green and blue) and a main color preview element (square block) with some initial color. When color-swatch is clicked, we want to mix it into preview color with proportion of 10%.
function parseRGB (str) {
	var colorObj = {};
  var num;
  var arr = str.substring(4, str.length-1).split(',');
  for (var i=0; i<arr.length; i++) {
  	num = parseInt(arr[i], 10);
    switch (i) {
    	case 0:
      	colorObj.r = num;
        break;
      case 1:
      	colorObj.g = num;
        break;
      case 2:
      	colorObj.b = num;
        break;
      default:
      	throw 'Not valid initial data passed';
    }
  }
  return colorObj;
}
function mixColors (color, mixing, percent) {
	var res = {r: color.r, g: color.g, b: color.b};
  var rgb = ['r', 'g', 'b'];
  var i, j, val;
  for (i=0; i<rgb.length; i++) {
  	val = res[rgb[i]] + Math.ceil(mixing[rgb[i]]*percent/100);
    if (val > 255) {
      for (j=0; j<rgb.length; j++) {
      	if (j !== i) {
        	res[rgb[j]] = Math.max(0, res[rgb[j]] - (val - 255));
        }
      }
    }
    res[rgb[i]] = Math.min(255, val);
  }
  return res;
}
function colorMixer () {
	var $preview = $('.preview');
	$('.color').click(function(e) {
    var currentColor = parseRGB($preview.css('background-color'));
    var mixColor = parseRGB($(e.target).css('background-color'));
    var newColor = mixColors(currentColor, mixColor, 10);
    var newBg = 'rgb(' + newColor.r + ', ' + newColor.g + ', ' + newColor.b + ')';
    //console.log(newBg);
    $preview.css('background-color', newBg);
  });
}

colorMixer();