<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;
}