1+ var numSquares = 6 ;
2+ var colors = generateRandomColors ( numSquares ) ;
3+ var squares = document . querySelectorAll ( ".square" ) ;
4+ var pickedColor = pickColor ( ) ;
5+ var colorDisplay = document . getElementById ( 'colorDisplay' ) ;
6+ var messageDisplay = document . querySelector ( "#messageDisplay" ) ;
7+ var h1 = document . querySelector ( "h1" ) ;
8+ var resetButton = document . querySelector ( "#reset" ) ;
9+ var easyBtn = document . querySelector ( "#easyBtn" ) ;
10+ var hardBtn = document . querySelector ( "#hardBtn" ) ;
11+
12+ var modeButtons = document . querySelectorAll ( ".mode" ) ;
13+
14+ for ( var i = 0 ; i < modeButtons . length ; i ++ ) {
15+ modeButtons [ i ] . addEventListener ( "click" , function ( ) {
16+ modeButtons [ 0 ] . classList . remove ( "selected" ) ;
17+ modeButtons [ 1 ] . classList . remove ( "selected" ) ;
18+ this . classList . add ( "selected" ) ;
19+ this . textContent === "Easy" ? numSquares = 3 : numSquares = 6 ;
20+ reset ( ) ;
21+ } ) ;
22+ }
23+
24+ function reset ( ) {
25+ colors = generateRandomColors ( numSquares ) ;
26+ //pick a new random color
27+ pickedColor = pickColor ( ) ;
28+ //change the color display
29+ colorDisplay . textContent = pickedColor ;
30+ resetButton . textContent = "NEW COLORS" ;
31+ messageDisplay . textContent = "" ;
32+ //change the color of the square
33+ for ( var i = 0 ; i < squares . length ; i ++ ) {
34+ if ( colors [ i ] ) {
35+ squares [ i ] . style . display = "block" ;
36+ squares [ i ] . style . backgroundColor = colors [ i ] ;
37+ } else {
38+ squares [ i ] . style . display = "none" ; }
39+ }
40+ h1 . style . backgroundColor = "steelblue" ;
41+ }
42+
43+ resetButton . addEventListener ( "click" , function ( ) {
44+ reset ( ) ;
45+
46+ } )
47+
48+ colorDisplay . textContent = pickedColor ;
49+
50+ for ( var i = 0 ; i < squares . length ; i ++ ) {
51+ //setting initial colors to squares
52+ squares [ i ] . style . backgroundColor = colors [ i ] ;
53+ //setting eventListeners on square
54+ squares [ i ] . addEventListener ( "click" , function ( ) {
55+ //grab color of clicked square
56+ var clickedColor = this . style . backgroundColor ;
57+ //check if the pickedColor is same as correctColor
58+ if ( clickedColor === pickedColor ) {
59+ messageDisplay . textContent = "CORRECT!" ;
60+ changeColors ( clickedColor ) ;
61+ h1 . style . backgroundColor = clickedColor ;
62+ resetButton . textContent = "PLAY AGAIN!" ;
63+ } else {
64+ this . style . backgroundColor = "#232323" ;
65+ messageDisplay . textContent = "TRY AGAIN!" ;
66+ }
67+ } ) ;
68+
69+ } ;
70+
71+ function changeColors ( color ) {
72+
73+ //loop through all squares
74+ for ( var i = 0 ; i < squares . length ; i ++ ) {
75+ //change each color to match correct color
76+ squares [ i ] . style . backgroundColor = color ;
77+ } ;
78+ } ;
79+
80+ function pickColor ( ) {
81+ var random = Math . floor ( Math . random ( ) * colors . length ) ;
82+ return colors [ random ] ;
83+ } ;
84+
85+ function generateRandomColors ( num ) {
86+ // create array
87+ var arr = [ ] ;
88+ // add random colors to array (push)
89+ for ( var i = 0 ; i < num ; i ++ ) {
90+ arr . push ( randomColor ( ) )
91+ }
92+ // return array
93+ return arr ;
94+ }
95+
96+ function randomColor ( ) {
97+ // pick a "red" from 0 - 255
98+ var r = Math . floor ( Math . random ( ) * 256 ) ;
99+
100+ // pick a "green" from 0 - 255
101+
102+ var g = Math . floor ( Math . random ( ) * 256 ) ;
103+
104+ //pick a "blue" from 0 - 255
105+ var b = Math . floor ( Math . random ( ) * 256 ) ;
106+ return "rgb(" + r + ", " + g + ", " + b + ")" ;
107+ }
0 commit comments