Skip to content

Instantly share code, notes, and snippets.

@franvarney

franvarney/index.html

Created May 10, 2016 23:32
Show Gist options
  • Save franvarney/bbea2bb671c9056a49d45c508e3b6b27 to your computer and use it in GitHub Desktop.
Save franvarney/bbea2bb671c9056a49d45c508e3b6b27 to your computer and use it in GitHub Desktop.
Download ZIP
GI
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment