script.js

// var css = document.querySelector("h3"); //selecting h3 which will display the code for the colors
// var color1 = document.querySelector(".color1"); //".color1" since you are selecting class="color1"
// var color2 = document.querySelector(".color2"); //samedt
// var body = document.getElementById("gradient"); //this will be the var so that the bg gradient will be selected
// var random = document.getElementById("random"); //this will be the var for the random button

// function setGradient(){
// 	body.style.background = 	//this changes the background for color1. remember ".style.background" = changes the property of css.
// 		"linear-gradient(to right, "
// 		+ color1.value
// 		+ ", "
// 		+ color2.value
// 		+ ")";
// 	css.textContent = body.style.background + ";"; //h3 will display the css code for the linear gradient as we select color1 and color2
// }

// function getRandomColor() {
//   var letters = '0123456789ABCDEF';
//   var randColor = '#';
//   for (var i = 0; i < 6; i++) {
//     randColor += letters[Math.floor(Math.random() * 16)];
//   }
//   return randColor;
// }

// function setRandomGradient(){
// 	body.style.background = 	
// 		"linear-gradient(to right, "
// 		+ getRandomColor()
// 		+ ", "
// 		+ getRandomColor()
// 		+ ")";
// 	css.textContent = body.style.background + ";"; 
// }

// color1.addEventListener("input", setGradient); //input = for the value being selected, do the function
// color2.addEventListener("input", setGradient); // and since this is addEventListener, we do callback by input/click/keypress etc.
// random.addEventListener("click", setRandomGradient); // click then callback for the random button

// //we can also add "oninput="setGradient()" on the <input> tag in html
// //to call the function. e.g. <input oninput="setGradient()">
// //sec11lec109 15:00




// //ORRRRRR

var css = document.querySelector("h3"); //selecting h3 which will display the code for the colors
var color1 = document.querySelector(".color1"); //".color1" since you are selecting class="color1"
var color2 = document.querySelector(".color2"); //samedt
var body = document.getElementById("gradient"); //this will be the var so that the bg gradient will be selected
var random = document.getElementById("random"); //this will be the var for the random button

function randomColor(){ //the addition of '000000' and the slice() at the end will ensure that you'll always get 6digits
	return ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6);
}

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

function randomGradient(){ //same as setGradient() but we are using the random hex generator -- randomColor()
	body.style.background = 
	"linear-gradient(to right, "
		+ '#' + randomColor()
		+ ", "
		+ '#' + randomColor()
		+ ")";
	css.textContent = body.style.background + ";"; 
}

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
random.addEventListener("click", randomGradient);