blob: 2593a4287850dae66723270d4687cb9ee3655346 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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 + ")";
}
|
