colorchanger.js

var numSquares=6,
		colors = [],
		pickedColor,
		squares = document.querySelectorAll(".square"),
		colorDisplay = document.querySelector("#colorDisplay"),
		messageDisplay = document.querySelector("#message"),
		gameMessageDisplay = document.querySelector("#gameMessage"),
		h1 = document.querySelector("h1"),
		resetButton = document.querySelector("#reset"),
		modeButtons = document.querySelectorAll(".mode");

init();

function init(){
	setupModeButtons();
  setupSquares();
  reset()
}



function setupModeButtons(){
	for(var i = 0; i < modeButtons.length; i++){
		modeButtons[i].addEventListener("click", function(){
			modeButtons[0].classList.remove("selected");
			modeButtons[1].classList.remove("selected");
			this.classList.add("selected");
			this.textContent === "Easy" ? numSquares = 3: numSquares = 6;
			reset();
		});
	}
}

function setupSquares(){
	for(var i = 0; i < squares.length; i++){
	//add click listeners to squares
		squares[i].addEventListener("click", function(){
			//grab color of clicked square
			var clickedColor = this.style.background;
			//compare color to pickedColor
			if(clickedColor === pickedColor){
				gameMessageDisplay.className = "active";
				messageDisplay.textContent = "Correct!";
				resetButton.textContent = "Play Again?"
				changeColors(clickedColor);
				h1.style.background = clickedColor;
			} else {
				this.style.background = "#232323";
				messageDisplay.textContent = "Try Again"
			}
		});
	}
}


function reset(){
	colors = generateRandomColors(numSquares);
	//pick a new random color from array
	pickedColor = pickColor();
	//change color display to match picked color
	colorDisplay.textContent = pickedColor;
  resetButton.textContent = "New Colors";
	messageDisplay.textContent="";
    //change colors of square
    for(var i=0; i<squares.length;i++){
    	if(colors[i]){
    		squares[i].style.visibility = "visible";
    		squares[i].style.background = colors[i];
    	}else{
    		squares[i].style.visibility = "hidden";
    	}

    }

    h1.style.background="steelblue";
}

resetButton.addEventListener("click",function(){
	gameMessageDisplay.className = "";
	reset();
    });

    h1.style.background="steelblue";




function changeColors(color){
 //loop through all the squares
 for (var i = 0; i<squares.length; i++) {
 	//change color to match given color
   squares[i].style.background=color;
   }
}

function pickColor(){
	var random =Math.floor(Math.random() * colors.length);
	return colors[random]
}

function generateRandomColors (num){
	//make an array
	var arr=[]
	// add num random colors to array
	for(var i=0;i<num;i++){
		arr.push(randomColor())
		//get random color and push to array
	}
	//return that array
	return arr;
}

function randomColor(){
	//pick a "red" from 0-255
	var r= Math.floor(Math.random() * 256)
	//pick a "red" from 0-255
	var g= Math.floor(Math.random() * 256)
	//pick a "red" from 0-255
	var b= Math.floor(Math.random() * 256)

	return "rgb(" + r +", " + g +", " + b +")"
}