gabep89/RGBguess.css

## RGBguess.css
body {
	background-color: #232323;
	margin: 0;
	font-family: "Montserrat", "Avenir";
}

.square {
	width: 30%;
	background: purple;
	padding-bottom: 30%;
	float: left;
	margin: 1.66%;
	border-radius: 15%;
	/*^^for rounded corners*/
	transition: background 0.6s;
	-webkit-transition: background 0.6s;
	-moz-transition: background 0.6s;
	/*^^ for browser compatibility*/
}
/*^^^6 squares total; want each row to hold 3 squares wide
- width of 30% * 3 = 90%
- margins of 1.66% * 6 = 9.96
- width is about 99.96% of total width
- padding-bottom (could have been padding-top) is used to make the initial purple squares visible on the page
- float left prevents each box from stacking on top of each other*/

#container {
	max-width: 600px;
	/*^^^ to prevent squares from getting too large*/
	margin: 20px auto;
}

h1 {
	text-align: center;
	line-height: 1.1;
	font-weight: normal;
	color: white;
	background-color: steelblue;
	margin: 0;
	/*^^ so color heading stretches full length of screen*/
	text-transform: uppercase;
	padding: 20px 0;
}

#colorDisplay{
	font-size: 200%;
}

#message{
	display: inline-block;
	width: 20%;
}
/*^^pushes elements to the side to make the white gap*/

#stripe {
	background-color: white;
	height: 30 px;
	text-align: center;
	color: black;
}

.selected {
	color: white;
	background: steelblue;
}

button{
	border: none;
	background: none;
	text-transform: uppercase;
	font-height: 100%;
	/*^^height of font takes up full space of area given*/
	font-weight: 700;
	color: steelblue;
	letter-spacing: 1px;
	font-size: inherit;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	/*^^ for browser compatibility*/
	outline: none;
}

button:hover{
	color: white;
	background: steelblue;
}

## RGBguess.html
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="RGBguess.css">
</head>
<body>
	<h1>
	The Great
	<br>
	<span id="colorDisplay">RGB</span>
	<br>
	Color Game</h1>

<div id="stripe">
	<button id="reset">New Colors</button>
	<span id="message"></span>
	<button class="mode">Easy</button>
	<button class="mode selected">Hard</button>
</div>

<div id="container">
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
</div>

<script type="text/javascript" src="RGBguess.js"></script>
</body>
</html>

## RGBguess.js
var numSquares = 6;
var colors = [];
// ^originally started with 6 colors that couldn't be randomized; now making a function to give 6 random RGB colors (or 3 depending on difficulty)
var pickedColor;
var squares = document.querySelectorAll(".square");
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 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;
				// ^^^ TERNARY OPERATOR USED IN PLACE OF THE BELOW CODE
				// if(this.textContent === "Easy"){
				// 	numSquares = 3;
				// } else{
				// 	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 picked square
		var clickedColor = this.style.backgroundColor;

		// compare color to pickedColor
		if(clickedColor === pickedColor){
			messageDisplay.textContent = "Correct!";
			resetButton.textContent = "Play Again?";
			changeColors(clickedColor);
			// ^^if correct, the colors will all change to the correct color clicked on
			h1.style.backgroundColor = clickedColor;
			// ^^if correct, header will change color to the correct color as well
			} else {
				this.style.backgroundColor = "#232323";
				// if wrong, the square becomes the same color as the background
				messageDisplay.textContent = "Try Again";
			}
		});
	}
// ^^^loops through each .square and assigns a color from the given 6
// will set it up so a random number from 0-255 is randomized for R, G, and B

}

function reset(){
	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 the squares and hides any depending on the difficulty level
	for (var i = 0; i < squares.length; i++){
		if(colors[i]){
			squares[i].style.display = "block";
			squares[i].style.backgroundColor = colors[i];
		} else {
			squares[i].style.display = "none";
		}
	}
	h1.style.backgroundColor = "steelblue";
}

// DIFFICULTY LEVELS HAVE SINCE BEEN COLLECTED UNDER THE modeButtons CATEGORY
// easyBtn.addEventListener("click", function(){
// 	// removes highlight over hard button...
// 	hardBtn.classList.remove("selected");
// 	// ...and assigns it to the easy button
// 	easyBtn.classList.add("selected");
// 	// establish 3 colors to choose from
// 	numSquares = 3;
// 	colors = generateRandomColors(numSquares);
// 	pickedColor = pickColor();
// 	colorDisplay.textContent = pickedColor;
// 	for (var i = 0; i < squares.length; i++){
// 		if(colors[i]){
// 			squares[i].style.backgroundColor = colors[i];
// 		// hides the bottom 3 squares
// 		} else {
// 			squares[i].style.display = "none";
// 		}
// 	}
// });

// hardBtn.addEventListener("click", function(){
// 	// removes highlight over easy button...
// 	easyBtn.classList.remove("selected");
// 	// ...and assigns it to the hard button
// 	hardBtn.classList.add("selected");
// 	numSquares = 6;
// 	colors = generateRandomColors(numSquares);
// 	pickedColor = pickColor();
// 	colorDisplay.textContent = pickedColor;
// 	for (var i = 0; i < squares.length; i++){
// 		if(colors[i]){
// 			squares[i].style.backgroundColor = colors[i];
// 			squares[i].style.display = "block";
// 		}
// 	}
// });

resetButton.addEventListener("click", 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;
	// this.textContent = "New Colors";

	// messageDisplay.textContent = "";
	// // change colors of the squares
	// for (var i = 0; i < squares.length; i++){
	// 	squares[i].style.backgroundColor = colors[i];
	// }
	// h1.style.backgroundColor = "steelblue";

colorDisplay.textContent = pickedColor;
// header of site rewritten to show the RGB colo to try and pick


function changeColors(color){
	//loop through all squares
	for(var i = 0; i < colors.length; i++){
		// change each color to match the given color
		squares[i].style.backgroundColor = color;
		// ^^referring to the squares array and not the colors array
	}
}

function pickColor(){
	 var random = Math.floor(Math.random() * colors.length)
	 return colors[random];
}
// ^^picks a random whole number between 1 and the total number of squares (varies depending on easy or hard mode), then returns that number

function generateRandomColors(num){
	// make an array
	var arr = []
	// repeat num times
	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);
	return "rgb(" + r + ", " + g + ", " + b + ")";
}
	body {
	background-color: #232323;
	margin: 0;
	font-family: "Montserrat", "Avenir";
	}

	.square {
	width: 30%;
	background: purple;
	padding-bottom: 30%;
	float: left;
	margin: 1.66%;
	border-radius: 15%;
	/^^for rounded corners/
	transition: background 0.6s;
	-webkit-transition: background 0.6s;
	-moz-transition: background 0.6s;
	/^^ for browser compatibility/
	}
	/*^^^6 squares total; want each row to hold 3 squares wide
	- width of 30% * 3 = 90%
	- margins of 1.66% * 6 = 9.96
	- width is about 99.96% of total width
	- padding-bottom (could have been padding-top) is used to make the initial purple squares visible on the page
	- float left prevents each box from stacking on top of each other*/

	#container {
	max-width: 600px;
	/^^^ to prevent squares from getting too large/
	margin: 20px auto;
	}

	h1 {
	text-align: center;
	line-height: 1.1;
	font-weight: normal;
	color: white;
	background-color: steelblue;
	margin: 0;
	/^^ so color heading stretches full length of screen/
	text-transform: uppercase;
	padding: 20px 0;
	}

	#colorDisplay{
	font-size: 200%;
	}

	#message{
	display: inline-block;
	width: 20%;
	}
	/^^pushes elements to the side to make the white gap/

	#stripe {
	background-color: white;
	height: 30 px;
	text-align: center;
	color: black;
	}

	.selected {
	color: white;
	background: steelblue;
	}

	button{
	border: none;
	background: none;
	text-transform: uppercase;
	font-height: 100%;
	/^^height of font takes up full space of area given/
	font-weight: 700;
	color: steelblue;
	letter-spacing: 1px;
	font-size: inherit;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	/^^ for browser compatibility/
	outline: none;
	}

	button:hover{
	color: white;
	background: steelblue;
	}
	<html>
	<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="RGBguess.css">
	</head>
	<body>
	<h1>
	The Great
	<br>
	<span id="colorDisplay">RGB</span>
	<br>
	Color Game</h1>

	<div id="stripe">
	<button id="reset">New Colors</button>
	<span id="message"></span>
	<button class="mode">Easy</button>
	<button class="mode selected">Hard</button>
	</div>

	<div id="container">
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
	</div>

	<script type="text/javascript" src="RGBguess.js"></script>
	</body>
	</html>
	var numSquares = 6;
	var colors = [];
	// ^originally started with 6 colors that couldn't be randomized; now making a function to give 6 random RGB colors (or 3 depending on difficulty)
	var pickedColor;
	var squares = document.querySelectorAll(".square");
	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 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;
	// ^^^ TERNARY OPERATOR USED IN PLACE OF THE BELOW CODE
	// if(this.textContent === "Easy"){
	// numSquares = 3;
	// } else{
	// 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 picked square
	var clickedColor = this.style.backgroundColor;

	// compare color to pickedColor
	if(clickedColor === pickedColor){
	messageDisplay.textContent = "Correct!";
	resetButton.textContent = "Play Again?";
	changeColors(clickedColor);
	// ^^if correct, the colors will all change to the correct color clicked on
	h1.style.backgroundColor = clickedColor;
	// ^^if correct, header will change color to the correct color as well
	} else {
	this.style.backgroundColor = "#232323";
	// if wrong, the square becomes the same color as the background
	messageDisplay.textContent = "Try Again";
	}
	});
	}
	// ^^^loops through each .square and assigns a color from the given 6
	// will set it up so a random number from 0-255 is randomized for R, G, and B

	}

	function reset(){
	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 the squares and hides any depending on the difficulty level
	for (var i = 0; i < squares.length; i++){
	if(colors[i]){
	squares[i].style.display = "block";
	squares[i].style.backgroundColor = colors[i];
	} else {
	squares[i].style.display = "none";
	}
	}
	h1.style.backgroundColor = "steelblue";
	}

	// DIFFICULTY LEVELS HAVE SINCE BEEN COLLECTED UNDER THE modeButtons CATEGORY
	// easyBtn.addEventListener("click", function(){
	// // removes highlight over hard button...
	// hardBtn.classList.remove("selected");
	// // ...and assigns it to the easy button
	// easyBtn.classList.add("selected");
	// // establish 3 colors to choose from
	// numSquares = 3;
	// colors = generateRandomColors(numSquares);
	// pickedColor = pickColor();
	// colorDisplay.textContent = pickedColor;
	// for (var i = 0; i < squares.length; i++){
	// if(colors[i]){
	// squares[i].style.backgroundColor = colors[i];
	// // hides the bottom 3 squares
	// } else {
	// squares[i].style.display = "none";
	// }
	// }
	// });

	// hardBtn.addEventListener("click", function(){
	// // removes highlight over easy button...
	// easyBtn.classList.remove("selected");
	// // ...and assigns it to the hard button
	// hardBtn.classList.add("selected");
	// numSquares = 6;
	// colors = generateRandomColors(numSquares);
	// pickedColor = pickColor();
	// colorDisplay.textContent = pickedColor;
	// for (var i = 0; i < squares.length; i++){
	// if(colors[i]){
	// squares[i].style.backgroundColor = colors[i];
	// squares[i].style.display = "block";
	// }
	// }
	// });

	resetButton.addEventListener("click", 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;
	// this.textContent = "New Colors";

	// messageDisplay.textContent = "";
	// // change colors of the squares
	// for (var i = 0; i < squares.length; i++){
	// squares[i].style.backgroundColor = colors[i];
	// }
	// h1.style.backgroundColor = "steelblue";

	colorDisplay.textContent = pickedColor;
	// header of site rewritten to show the RGB colo to try and pick



	function changeColors(color){
	//loop through all squares
	for(var i = 0; i < colors.length; i++){
	// change each color to match the given color
	squares[i].style.backgroundColor = color;
	// ^^referring to the squares array and not the colors array
	}
	}

	function pickColor(){
	var random = Math.floor(Math.random() * colors.length)
	return colors[random];
	}
	// ^^picks a random whole number between 1 and the total number of squares (varies depending on easy or hard mode), then returns that number

	function generateRandomColors(num){
	// make an array
	var arr = []
	// repeat num times
	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);
	return "rgb(" + r + ", " + g + ", " + b + ")";
	}