3 files changed, 211 insertions, 0 deletions
diff --git a/COLORGAME.css b/COLORGAME.css
new file mode 100644
index 0000000..5fb8268
--- /dev/null
+++ b/COLORGAME.css
@@ -0,0 +1,73 @@
+body {
+	background-color: #232323;
+	margin: 0;
+	font-family: 'Montserrat', 'Avenir';
+}
+
+.square {
+	width: 30%;
+	background: pink;
+	padding-bottom: 30%;
+	float: left;
+	margin: 1.66%;
+	border-radius: 15%;
+	transition: background 0.6s;
+	-webkit-transition: background 0.6s;
+	-moz-transition: background 0.6s;
+}
+
+#container {
+	margin: 20px auto;
+	max-width: 600px;
+}
+
+h1 {
+	text-align: center;
+	line-height: 1.1;
+	font-weight: normal;
+	color: white;
+	background: steelblue;
+	margin: 0;
+	text-transform: uppercase;
+	padding: 20px 0;
+}
+
+#stripe {
+	background: white;
+	height: 30px;
+	text-align: center;
+}
+
+.selected {
+	color: white;
+	background: steelblue;
+}
+
+#colorDisplay {
+	font-size: 200%;
+}
+
+button {
+	border: none;
+	background: none;
+	text-transform: uppercase;
+	height: 100%;
+	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;
+	outline: none;
+}
+
+button:hover {
+	color: white;
+	background: steelblue;
+}
+
+#message {
+	display: inline-block;
+	width: 20%;
+}
+\ No newline at end of file
diff --git a/COLORGAME.html b/COLORGAME.html
new file mode 100644
index 0000000..7630401
--- /dev/null
+++ b/COLORGAME.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Color Game</title>
+		<link rel="stylesheet" type="text/css" href="COLORGAME.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" id="hardBtn">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="COLORGAME.js"></script>
+	</body>
+</html>
+\ No newline at end of file
diff --git a/COLORGAME.js b/COLORGAME.js
new file mode 100644
index 0000000..2593a42
--- /dev/null
+++ b/COLORGAME.js
@@ -0,0 +1,108 @@
+var numSquares = 6;
+var colors = [];
+var pickedColor;
+var squares = document.querySelectorAll('.square');
+var colorDisplay = document.getElementById('colorDisplay');
+var messageDisplay = document.querySelector('#message');
+var h1 = document.querySelector('h1');
+var resetBtn = document.querySelector('#reset');
+var modeBtns = document.querySelectorAll('.mode');
+
+init();
+
+function init(){
+	setUpModeBtns();
+	setUpSquares();
+	reset();	
+}
+
+function setUpModeBtns(){
+	for(var i = 0; i < modeBtns.length; i++){
+		modeBtns[i].addEventListener('click', function(){
+			modeBtns[0].classList.remove('selected');
+			modeBtns[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.backgroundColor;
+			//compare color to picked color
+			if(clickedColor === pickedColor) {
+				messageDisplay.textContent ='Correct!';
+				changeColors(clickedColor);
+				h1.style.backgroundColor = clickedColor;
+				resetBtn.textContent = 'Play Again?'
+			} else {
+				this.style.backgroundColor = '#232323';
+				messageDisplay.textContent ='Try Again!';
+			}
+		});
+	}
+}
+
+function reset(){
+	//generate all new colors
+	colors = generateRandomColors(numSquares);
+	//pick a new random color from array
+	pickedColor = pickColor();
+	//change colorDisplay to match pickedColor
+	colorDisplay.textContent = pickedColor;
+	resetBtn.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.backgroundColor = colors[i];
+		} else {
+			squares[i].style.display = 'none';
+		}
+	}
+	h1.style.backgroundColor = 'steelblue';	
+}
+
+resetBtn.addEventListener('click', function(){
+	reset();
+});
+
+function changeColors(color) {
+	//loop through all colors
+	for(var i = 0; i< squares.length; i++) {
+		//change all colors to match a given color
+		squares[i].style.backgroundColor = color;
+	}
+}
+
+function pickColor() {
+	var random = Math.floor(Math.random() * colors.length);
+	return colors[random];
+}
+
+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 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 + ")";
+}
+\ No newline at end of file