<div class="container">
<div class="group">
<button class="new">New Color</button>
<button class="guess">Check Guess</button>
</div>
<div class="amount">
<span>Red (0-255)</span>
<input type="range" min="0" max="255" value="0">
<input type="text" data-class="r" value="0">
</div>
<div class="amount">
<span>Green (0-255)</span>
<input type="range" min="0" max="255" value="0">
<input type="text" data-class="g" value="0">
</div>
<div class="amount">
<span>Blue (0-255)</span>
<input type="range" min="0" max="255" value="0">
<input type="text" data-class="b" value="0">
</div>
<div class="last-guess">
Your last guess:
<div class="patch"></div>
</div>
<div class="hints">
<div class="hint hint1">
<strong>Hint 1</strong>
<p>Base 10: <span></span></p>
</div>
<div class="hint hint2">
<strong>Hint 2</strong>
<p>Base 2: <span></span></p>
</div>
<div class="hint hint3">
<strong>Hint 3</strong>
<p>Base 8: <span></span></p>
</div>
<div class="hint hint4">
<strong>Hint 4</strong>
<p>Base 16: <span></span></p>
</div>
</div>
</div>
* {
box-sizing: border-box;
}
body {
background: transparent;
color: inherit;
}
.container {
width: 90%;
max-width: 750px;
margin: 20px auto;
text-align: center;
}
.group {
text-align: center;
padding: 0 0 1em;
}
button {
cursor: pointer;
}
.amount {
display: flex;
align-items: center;
justify-content: center;
}
.amount span {
display: inline-block;
width: 20%;
}
.amount input[type="range"] {
margin: 0 15px;
}
.amount + .amount {
margin-top: 10px;
}
.last-guess {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
justify-content: center;
align-items: center;
}
.patch {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid black;
background-color: red;
margin-left: 10px;
}
.hints {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
}
.hint {
width: 48%;
text-align: left;
}
.hint:nth-child(1),
.hint:nth-child(2) {
margin-bottom: 10px;
}
.hint:nth-child(odd) {
margin-right: 4%;
}
var randomColor; // a representation of a color in number form
setRandomColor('html');
$('.last-guess').hide();
$('.new').on('click', function() {
setRandomColor('html');
$('.last-guess').hide();
});
$('.guess').on('click', function() {
var randomColorRgb = colorToRgb(randomColor);
var selectedRgb = {};
$('.amount').each(function() {
var $this = $(this);
var $input = $this.find('input[type="text"]');
var inputVal = parseInt($input.val());
var inputClass = $input.attr('data-class');
selectedRgb[inputClass] = inputVal;
});
checkObj(randomColorRgb, selectedRgb);
$('.last-guess').show();
$('.last-guess .patch').css('background-color', '#' + colorToHex(rgbToColor(selectedRgb)));
});
$('input[type="range"]').on('input', function() {
var $this = $(this);
$this.next().val($this.val());
});
$('input[type="text"]').on('change', function() {
var $this = $(this);
$this.prev().val($this.val());
});
function setRandomColor(el) {
randomColor = Math.floor(Math.random() * (1 << 24) - 1);
$(el).css('background', "#" + colorToHex(randomColor));
$(el).css('color', isDark(randomColor) ? 'white' : 'black');
setHints();
}
function setHints() {
var hint1 = randomColor;
var hint2 = randomColor.toString(2);
var hint3 = randomColor.toString(8);
var hint4 = colorToHex(randomColor);
// add an underscore after every four digits for readability
// see https://stackoverflow.com/a/26910622/3124288
hint2 = padLeft(hint2, "0", 24).match(/.{4}/g).join('_');
$('.hint1 span').text(hint1);
$('.hint2 span').text(hint2);
$('.hint3 span').text(hint3);
$('.hint4 span').text(hint4);
}
function checkObj(obj1, obj2) {
if (obj1.r === obj2.r && obj1.g === obj2.g && obj1.b === obj2.b) {
alert('Correct!');
} else {
var rDif = diff(obj1.r, obj2.r);
var gDif = diff(obj1.g, obj2.g);
var bDif = diff(obj1.b, obj2.b);
var res = rDif + gDif + bDif;
alert('You are off by a total of ' + res + '!');
}
}
function diff(a, b) {
return Math.abs(a - b);
}
function colorToRgb(color) {
return {
r: (color & 0xFF0000) >> 16,
g: (color & 0xFF00) >> 8,
b: color & 0xFF
}
}
function colorToHex(color) {
return padLeft(color.toString(16), "0", 6);
}
function rgbToColor(rgb) {
return (rgb.r << 16) | (rgb.g << 8) | rgb.b;
}
function padLeft(str, chr, len) {
var val = str;
while (val.length < len) {
val = chr + val;
}
return val;
}
function isDark(color) {
var rgb = colorToRgb(color);
// see https://www.w3.org/TR/AERT/#color-contrast
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) < 128000;
}