var css = document.querySelector (".colorValue");
var color1 = document.querySelector (".color1");
var color2 = document.querySelector (".color2");
var body = document.getElementById ("gradient");

setGradient ();

function setGradient () {
  body.style.background = "linear-gradient(to right, "
                        + color1.value + ", "
                        + color2.value + ")";

  css.textContent = body.style.background + ";";
}

color1.addEventListener ("input", setGradient);
color2.addEventListener ("input", setGradient);

function randomColor () {
  var x = Math.round (0xffffff * Math.random()).toString(16);
  var y = (6 - x.length);
  var z = "000000";
  z = z.substring (0, y);
  var rColor = "#" + z + x;
  
  return rColor;
}

function setRandomGradient (element1, element2) {
  element1.value = randomColor();
  element2.style.background = element1.value;
  setGradient ();
}

var button1 = document.getElementById ("button1");
var button2 = document.getElementById ("button2");

button1.addEventListener ("click", function () {
  setRandomGradient (color1, button1);
})
button2.addEventListener ("click", function () {
  setRandomGradient (color2, button2);
})

function selectElementText (element) {
  var range = document.createRange ();
  range.selectNodeContents (element);
  var selection = window.getSelection ();
  selection.removeAllRanges ();
  selection.addRange (range);
}

var btnCopy = document.querySelector (".btn-copy");

btnCopy.addEventListener ("click", function () {
  selectElementText (css);
  document.execCommand ("copy");
});