colorgame.js

var numSquares = 6;
var colors = [];
var steelblue = "steelblue";

var squares = document.querySelectorAll(".square");
var pickedColor;
var colorDisplay = document.getElementById('colorDisplay');
var messageDisplay = document.querySelector("#message");

var h1 = document.querySelector("h1");
var resetButton = document.querySelector("#reset");
var modeButtons = document.querySelectorAll(".mode");

init();

function init() {
	setupModeButtons();

	setupSquares();
	reset();
}



function reset(){

	
	// generate all new colors
	colors = generateRandomColors(numSquares);
	//pick a new random color from array
	pickedColor = pickColor();
	//change colorDisplay to match picked color
	colorDisplay.textContent = pickedColor;
	resetButton.textContent = "New Colors";
	messageDisplay.textContent = "";
	// change colors of squares
	for (var i = 0; i < squares.length; i++) {
		if(colors[i]){
			squares[i].style.display = "block";
			squares[i].style.background = colors[i];
		} else {
		squares[i].style.display = "none";
		}
	};
	
	h1.style.background = steelblue;
}



// reset button

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







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

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

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

function randomColor(){
	//pick a "red" from 0 - 255
	var r = Math.floor(Math.random() * 256);
	//pick a "green" from 0 -255
	var g = Math.floor(Math.random() * 256);
	//pick a "blue" from 0 -255
	var b = Math.floor(Math.random() * 256);
	//"rgb(r,g,b)"
	//return RGB
	return "rgb(" + r + ", " + g + ", " + b + ")";
}

function setupModeButtons() {
		//mode buttons event listeners
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");
		if(this.textContent === "Easy"){
			numSquares = 3;
		} else {
			numSquares = 6;
		}
		reset();
		//figure out how many squares to show
		//pick new colors
		//pick a new pickedColor
		//update page to reflect changes

	});
};
}

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) {
			messageDisplay.textContent = "Got Em!";
			resetButton.textContent = "Play Again";
			h1.style.background = clickedColor;
			changeColors(clickedColor);
		} else {
			this.style.background = "#232323";
			messageDisplay.textContent = "Try Again";
		}
	});
};
}