LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

	
	Color Game


   

The Great
RGB
Color Game

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%;
	transition: background 0.6s;
	-webkit-transition: background 0.6s;
	-moz-transition: background 0.6s;
}


#container {
	margin: 20px auto;
	max-width: 600px;
}

h1 {
	color:white;
	text-align: center;
	font-weight: normal;
	line-height: 1.1;
	text-transform: uppercase;
	background: steelblue;
	margin: 0;
	padding: 20px 0;
}

#colorDisplay {
	font-size: 200%;
}

#message {
	display: inline-block;
	width: 20%;
}

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

.selected {
	color: white;
	background: steelblue;

}

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;
}
JS
// assign colors
var numSquares = 6;
var colors = [];
var pickedColor;
var squares = document.querySelectorAll(".square");
var colorDisplay = document.querySelector("#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;
				reset();
			});
		}
}

function setupSquares() {
	for(var i = 0; i < squares.length; i++){
	squares[i].addEventListener("click", function(){
		var clickedColor = this.style.background;
		if(clickedColor === pickedColor){
		  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);
	pickedColor = pickColor();
	colorDisplay.textContent = pickedColor;
	resetButton.textContent = "New Colors";
	messageDisplay.textContent = "";
	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";
}

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


function changeColors(color){
	for(var i = 0; i < colors.length; i++) {
		squares[i].style.background = color;
	}
}


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


function generateRandomColors(num) {
	var arr = [];
	for(var i = 0; i < num; i++) {
		arr.push(randomColor());
	}
	return arr;
}

function randomColor() {
	var r = Math.floor(Math.random() * 256)
	var g = Math.floor(Math.random() * 256)
	var b = Math.floor(Math.random() * 256)
	"rgb(r, g, b)"
	return "rgb(" + r + ", " + g + ", " + b +")";

}

Description

a code-along of the Complete Web Developer Bootcamp by Colt Steele, Udemy
Term
Wed, 12/27/2017 - 06:58

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv