<div class="target">
  <div class="buttons">
    <div class="action" onclick="getRandomColor()">Generate a target color</div>
  <div class="action" onclick="calcDistance()">Check results</div>
    </div>
      <div class="picker"></div>
  <span>Try to replicate the color above, adjusting the sliders below.</span>
</div>

<div class="rgb">
  <h2>RGB</h2>
  <div class="picker"></div>
  <div class="controls">
     <span>R</span><input id="red" type="range" name="points" min="0" max="255" value="0" onchange>
     <span>G</span><input id="green" type="range" name="points" min="0" max="255" value="0">
     <span>B</span><input id="blue" type="range" name="points" min="0" max="255" value="0">
  </div>
  <span>distance from target: </span><span class="distance">0</span>
</div>
<div class="hsl">
  <h2>HSL</h2>
  <div class="picker"></div>
  <div class="controls">
     <span>H</span><input id="hue" type="range" value="0" min="0" max="360" onchange>
     <span>S</span><input id="saturation" type="range" value="0" name="points" min="0" max="100">
     <span>L</span><input id="lightness" type="range" value="0" name="points" min="0" max="100">
  </div>
    <span>distance from target: </span><span class="distance">0</span>
</div>

.picker {
  width:500px;
  height:50px;
  background-color:black;
}


.action {
  border: 1px solid black;
  padding: 5px;
  background-color: hsl(180, 10%, 60%);
  cursor: pointer;
}

.buttons {
    width:500px;
  justify-content: space-between;
  display: flex;
  margin: 5px 0;
}

const hslColor = {
  hue: 0,
  sat: 0,
  lit: 0,
  get: function() {
    return  `hsl(${this.hue},${this.sat}%,${this.lit}%)`
  },
  set: function(prop, value) {
    this[prop] = value;
    setColor(".hsl ", this.get())
  }
} 

const rgbColor = {
  red: 0,
  green: 0,
  blue: 0,
  get: function() {
    return  `rgb(${this.red},${this.green},${this.blue})`
  },
  set: function(prop, value) {
    this[prop] = value;
    setColor(".rgb ", this.get())
  }
} 


document.getElementById('hue').oninput = function() {
    hslColor.set("hue", this.value);
}

document.getElementById('saturation').oninput = function() {
    hslColor.set("sat", this.value);
}

document.getElementById('lightness').oninput = function() {
    hslColor.set("lit", this.value);
}

document.getElementById('red').oninput = function() {
    rgbColor.set("red", this.value);
}

document.getElementById('green').oninput = function() {
    rgbColor.set("green", this.value);
}

document.getElementById('blue').oninput = function() {
    rgbColor.set("blue", this.value);
}


function setColor(section, color) {
  const res = document.querySelector(section + ' .picker')
  res.style.backgroundColor = color;
}

function getRandomColor(){
  const hue1 = Math.floor(Math.random()*360)
  const sat1 = Math.floor(Math.random()*100)
  const lit1 = Math.floor(Math.random()*100)
  setColor('.target',  `hsl(${hue1},${sat1}%,${lit1}%)`)
  calcDistance()
}

function calcDistance(){
  const target = getColor(".target .picker")
  
  const rgb = getColor(".rgb .picker")
  
  document.querySelector(".rgb .distance").textContent = getDistance(target, rgb)
  
    const hsl = getColor(".hsl .picker")
    console.log("s", hsl)
  document.querySelector(".hsl .distance").textContent = getDistance(target, hsl)
}

function getColor(selector){ 
  return window.getComputedStyle(document.querySelector(selector)).getPropertyValue("background-color").replace(/[^\d,]/g, '').split(',');
}

function getDistance(a, b){
  const d = Math.floor(Math.sqrt(pow(a[1]-b[1]) + pow(a[2]-b[2]) + pow(a[0]-b[0])))
  const feedback = d < 1 ? "perfect!" :
     d < 10 ? "almost there" :
     d < 20 ? "close enough" : 
     d < 50 ? "you can do better than this" : 
      "please take this seriously, put some effort into this"
  return `${d} - ${feedback}`
}

function pow(x){
  return x*x
}