Repository navigation
Expand file tree
/
Copy pathindex.js
More file actions
136 lines (115 loc) · 3.54 KB
/
Copy pathindex.js
File metadata and controls
136 lines (115 loc) · 3.54 KB
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
document.addEventListener("DOMContentLoaded", function(event){
var colors = squaresColor(6);
var square = document.querySelectorAll(".square");
var display = document.getElementById("display");
var navigation = document.getElementById("navigation");
var select = pickColor();
var message = document.getElementById("message");
var easyBtn = document.getElementById("easyBtn");
var hardBtn = document.getElementById("hardBtn");
var h1 = document.querySelector("h1");
display.textContent = select;
for(var i=0 ; i< square.length ; i++)
{
//give cololo to all square
square[i].style.background = colors[i];
//select a color for the headline
//cheak if the color matches
square[i].addEventListener("click",function(){
var x= (this .style.background);
if(x == select)
{
selectColor(x);
message.textContent = "correct!";
h1.style.background = select;
}
else{
this.style.background = "#232323";
message.textContent = "try again!!";
}
});//
//if match then alert
}
function selectColor(color)
{
for(var j=0 ; j< square.length ; j++)
{
square[j].style.background = color;
}
}
function pickColor()
{
var random = Math.floor(Math.random() * colors.length);
return colors[random];
}
function squaresColor(num)
{
var arr = [];
// select color for red
for( var i=0 ; i< num; i++)
{
arr.push(randomColor());
}
return arr;
}
function randomColor()
{
var r = Math.floor(Math.random() * 256);
//select color for green
var g = Math.floor(Math.random() * 256);
// select color for blue
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ", " + g + ", " + b +")";
}
navigation.addEventListener("click",function(){
colors = squaresColor(6);
select = pickColor();
console.log(select);
display.textContent = select;
for(var i=0 ; i< square.length ; i++)
{
console.log(colors[i]);
square[i].style.background = colors[i];
}
h1.style.background = "steelblue";
})
easyBtn.addEventListener("click",function(){
colors = squaresColor(3);
select = pickColor();
display.textContent = select;
for(var i=0 ; i< square.length ; i++)
if(colors[i])
{
console.log(colors[i]);
square[i].style.background = colors[i];
}
else
{
square[i].style.background = "none";
}
});
hardBtn.addEventListener("click",function(){
colors = squaresColor(6);
select = pickColor();
display.textContent = select;
for(var i=0 ; i< square.length ; i++)
{
square[i].style.background = colors[i];
square[i].style.background = "block";
}
})
});
// how to pic a random color from there 6 color
//how to give random color to these 6 squares
// how to reset game
//change the game mode easy or hard
//
//If you want console.log() to spit out the DOM element, you need to log the DOM element and not the jQuery object. The DOM element is always accessible as the 0th element of the jQuery selector. So, the way you would access the actual DOM element from a jQuery selector is like this:
// $("#someSingleDOMObjectSelector")[0]
//And to get the DOM element to appear in the log the way you would like, you would do this:
// console.log($("#someSingleDOMObjectSelector")[0]);
//And for jQuery selectors which contain/return multiple DOM elements, you could loop them, like this:
// $('.someMultipleDOMObjectSelector').each(function(){
//console.log($(this)[0]); //or -->
// console.log(this);
// });