Color-Guessing-Game/site.js at main · omharicu/Color-Guessing-Game · GitHub

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
var square = document.querySelectorAll(".square");
var h1=document.querySelector("h1");
var resetButton = document.getElementById("reset");
var message= document.getElementById("message");
var displayedColor = document.getElementById("displayedColor");
var easyBtn = document.getElementById("easyBtn");
var hardBtn = document.getElementById("hardBtn");
var numSquare=6;
var colors=generateRandomColor(numSquare);
var pickedColor=colors[Math.floor(Math.random()*numSquare)];

easyBtn.addEventListener("click", function()
{
    h1.style.backgroundColor= null;
    message.textContent="";
    easyBtn.classList.add("selected");
    hardBtn.classList.remove("selected");
    numSquare=3;
    colors=generateRandomColor(numSquare);
    pickedColor=colors[Math.floor(Math.random()*numSquare)];
    displayedColor.textContent=pickedColor;

    for(var i=0; i<square.length; i++)
    {
        if(colors[i])
        {
            square[i].style.backgroundColor=colors[i];
        }
        else
        {
            square[i].style.backgroundColor="#232323";
        }

    }

});
hardBtn.addEventListener("click", function()
{
    message.textContent="";
    easyBtn.classList.remove("selected");
    hardBtn.classList.add("selected");
    numSquare=6;
    colors=generateRandomColor(numSquare);
    pickedColor=colors[Math.floor(Math.random()*numSquare)];
    displayedColor.textContent=pickedColor;
    h1.style.backgroundColor= null;

    for(var i=0; i<numSquare; i++)
    {
        square[i].style.backgroundColor=colors[i];
        square[i].style.di
    }
});


displayedColor.textContent=pickedColor;

resetButton.addEventListener("click", function()
{
    message.textContent="";
    colors=generateRandomColor(numSquare);
    pickedColor=colors[Math.floor(Math.random()*numSquare)];
    displayedColor.textContent=pickedColor;
    resetButton.textContent="NEW COLOR";
    h1.style.backgroundColor= null;

    for(var i=0; i<numSquare; i++)
    {
        square[i].style.backgroundColor =colors[i];
    }

});

for(var j=0; j<numSquare; j++)
   {
       square[j].style.backgroundColor =colors[j];
       square[j].addEventListener("click", function()
       {
           var clickedColor=this.style.backgroundColor;
           if(clickedColor===pickedColor)
           {
               message.textContent="Correct!";
               resetButton.textContent="Play Again?";
               h1.style.backgroundColor=clickedColor;
               for(var p=0; p<numSquare; p++)
               {
                   square[p].style.backgroundColor=clickedColor;
               }
           }
           else
           {
               this.style.backgroundColor="#232323";
               message.textContent="Try Again";
           }
       })
   }
function generateRandomColor(num)
{
    var c=[];
    for(var i=0; i<num; i++)
    {

        var temp1=Math.floor(Math.random()*256);
        var temp2=Math.floor(Math.random()*256);
        var temp3=Math.floor(Math.random()*256);
        var temp="rgb("+temp1+", "+temp2+", "+temp3+")";
        c.push(temp);
    }
    return c;

}