franvarney/index.html

## index.html
<!doctype html>
<html>
  <head>
  	<style>
  		.red {
  			background-color: #FF0000;
  		}

  		.yellow {
  			background-color: #FFFF00;
  		}

  		.green {
  			background-color: #00FF00;
  		}

  		.blue {
  			background-color: #0000FF;
  		}
  	</style>
  </head>
  <body>
  	<div id='preview'></div>
  	<div>
  		<div class='colors red'></div>
  		<div class='colors yellow'></div>
  		<div class='colors green'></div>
  		<div class='colors blue'></div>
  	</div>
  	<script>
  		// Your code here!
      // rgb(100, 100, 100) mixed with rgb(255, 0, 0) =
      // rgb(100*0.9 + 255*0.1,
      //     100 * 0.9 + 0 * 0.1,
      //     100 * 0.9 + 0 * 0.1) = rgb(116, 90, 90)

      var preview = document.getElementById(‘preview’).styles.backgroundColor

      function mixColors(color) {
      	var values = color.slice(3, color.length -1).split(‘, ‘)
        var prevValues = preview.slice(3, preview.length -1).split(‘, ‘)
        var newColor = ‘rgb(‘ + (prevValues[0] * 0.9) + (values[0] * 0.1) + ‘, ’ + (prevValues[1] * 0.9)  + (values[1] * 0.1) + ‘, ’ + (prevValues[2] * 0.9)  + (values[2] * 0.1) + ‘)’
        document.getElementById(‘preview’).styles.backgroundColor = newColor
      }

      var elems = document.getElementsByClassName(‘colors’)
      elems.on(‘click’, function (e) {
        switch(this.className) {
          case ‘red’:
          	mixColors(this.styles.backgroundColor)
            break;
          case ‘yellow’:
          	mixColors(this.styles.backgroundColor)
            break;
          case ‘green’:
          	mixColors(this.styles.backgroundColor)
            break;
          case ‘blue’:
      	    mixColors(this.styles.backgroundColor)
            break;
          // default
        }
      })
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	.red {
	background-color: #FF0000;
	}

	.yellow {
	background-color: #FFFF00;
	}

	.green {
	background-color: #00FF00;
	}

	.blue {
	background-color: #0000FF;
	}
	</style>
	</head>
	<body>
	<div id='preview'></div>
	<div>
	<div class='colors red'></div>
	<div class='colors yellow'></div>
	<div class='colors green'></div>
	<div class='colors blue'></div>
	</div>
	<script>
	// Your code here!
	// rgb(100, 100, 100) mixed with rgb(255, 0, 0) =
	// rgb(1000.9 + 2550.1,
	// 100 * 0.9 + 0 * 0.1,
	// 100 * 0.9 + 0 * 0.1) = rgb(116, 90, 90)

	var preview = document.getElementById(‘preview’).styles.backgroundColor

	function mixColors(color) {
	var values = color.slice(3, color.length -1).split(‘, ‘)
	var prevValues = preview.slice(3, preview.length -1).split(‘, ‘)
	var newColor = ‘rgb(‘ + (prevValues[0] * 0.9) + (values[0] * 0.1) + ‘, ’ + (prevValues[1] * 0.9) + (values[1] * 0.1) + ‘, ’ + (prevValues[2] * 0.9) + (values[2] * 0.1) + ‘)’
	document.getElementById(‘preview’).styles.backgroundColor = newColor
	}

	var elems = document.getElementsByClassName(‘colors’)
	elems.on(‘click’, function (e) {
	switch(this.className) {
	case ‘red’:
	mixColors(this.styles.backgroundColor)
	break;
	case ‘yellow’:
	mixColors(this.styles.backgroundColor)
	break;
	case ‘green’:
	mixColors(this.styles.backgroundColor)
	break;
	case ‘blue’:
	mixColors(this.styles.backgroundColor)
	break;
	// default
	}
	})
	</script>
	</body>
	</html>