Skip to content

Commit 2e9d595

Browse files
siddhi-244siddhi-244
authored
added color guessor game
1 parent 4e2989e commit 2e9d595

File tree

3 files changed

+211
-0
lines changed

3 files changed

+211
-0
lines changed

‎color-guessor/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
<h1>COLOR GUESSING GAME<br>
9+
<span id="rgbspan"></span><br> Guess the color above
10+
</h1>
11+
12+
<div class="line">
13+
<button id="playAgain">New Colors</button>
14+
<span class="status"></span>
15+
<button style="color:#f88989;" id="easyBtn">Easy</button>
16+
<button id="hardBtn">Hard</button>
17+
</div>
18+
19+
<div class="mainbox">
20+
<div class="box"></div>
21+
<div class="box"></div>
22+
<div class="box"></div>
23+
<div class="box"></div>
24+
<div class="box"></div>
25+
<div class="box"></div>
26+
</div>
27+
<script type="text/javascript" src="script.js"></script>
28+
</body>
29+
</html>

‎color-guessor/script.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
var boxes=document.querySelectorAll(".box");
2+
var s=document.querySelector("#rgbspan");
3+
var colors=generateRandomColor(6);
4+
var pickedColor=colors[Math.floor(Math.random()*6)];
5+
s.textContent=pickedColor;
6+
var playbtn=document.querySelector("#playAgain");
7+
var easybtn=document.querySelector("#easyBtn");
8+
var hardbtn=document.querySelector("#hardBtn");
9+
var boxCount=6;
10+
var statusText=document.querySelector(".status");
11+
statusText.textContent="Lets Play!";
12+
13+
easybtn.addEventListener("click",function(){
14+
document.querySelector("h1").style.background="#f88989";
15+
statusText.textContent="Lets Play!";
16+
boxCount=3;
17+
this.style.background="#f88989";
18+
this.style.color="white";
19+
hardbtn.style.background="white";
20+
hardbtn.style.color="rgb(233,119,119)";
21+
22+
colors=generateRandomColor(boxCount);
23+
pickedColor=colors[Math.floor(Math.random()*3)];
24+
s.textContent=pickedColor;
25+
26+
for(var i=0;i<boxes.length;i++){
27+
if(colors[i]){
28+
boxes[i].style.background=colors[i];
29+
}else{
30+
boxes[i].style.display="none";
31+
}
32+
}
33+
34+
});
35+
hardbtn.addEventListener("click",function(){
36+
document.querySelector("h1").style.background="rgb(233,119,119)";
37+
statusText.textContent="Lets Play!";
38+
39+
this.style.background="rgb(233,119,119)";
40+
this.style.color="white";
41+
easybtn.style.background="white";
42+
easybtn.style.color="rgb(233,119,119)";
43+
boxCount=6;
44+
45+
colors=generateRandomColor(boxCount);
46+
pickedColor=colors[Math.floor(Math.random()*6)];
47+
48+
for(var i=0;i<boxes.length;i++){
49+
boxes[i].style.background=colors[i];
50+
boxes[i].style.display="block";
51+
52+
}
53+
54+
55+
});
56+
57+
58+
playbtn.addEventListener("click",function(){
59+
document.querySelector("h1").style.background="rgb(233,119,119)";
60+
statusText.textContent="Lets Play!";
61+
62+
63+
colors=generateRandomColor(boxCount);
64+
pickedColor=colors[Math.floor(Math.random()*boxCount)];
65+
s.textContent=pickedColor;
66+
67+
for(var i=0;i<boxes.length;i++){
68+
69+
boxes[i].style.background=colors[i];
70+
71+
72+
}
73+
});
74+
for(var i=0;i<colors.length;i++){
75+
boxes[i].style.background=colors[i];
76+
boxes[i].addEventListener("click",function(){
77+
var selectedcolor=this.style.background;
78+
if(selectedcolor===pickedColor){
79+
win();
80+
}
81+
else{
82+
loose(this);
83+
}
84+
});
85+
}
86+
87+
function win(){
88+
for(var i=0;i<colors.length;i++){
89+
boxes[i].style.background=pickedColor;
90+
}
91+
document.querySelector("h1").style.background=pickedColor;
92+
statusText.textContent="CORRECT!!!";
93+
}
94+
95+
function loose(a){
96+
a.style.background="#2f2f2f";
97+
statusText.textContent="TRY AGAIN !";
98+
}
99+
100+
function generateRandomColor(num){
101+
var arr=[];
102+
for(var i=0;i<num;i++){
103+
arr.push(randomColor());
104+
}
105+
return arr;
106+
}
107+
108+
function randomColor(){
109+
var r=Math.floor(Math.random()*256);
110+
var g=Math.floor(Math.random()*256);
111+
var b=Math.floor(Math.random()*256);
112+
return "rgb("+ r + ", " + g + ", " + b + ")";
113+
}

‎color-guessor/style.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
body{
2+
background-color: aquamarine;
3+
color: #fff;
4+
margin: 0;
5+
6+
}
7+
h1{
8+
text-align: center;
9+
font-size: 300%;
10+
margin: 0;
11+
background-color: rgb(233,119,119);
12+
font-weight: normal;
13+
text-transform: uppercase;
14+
}
15+
16+
.rgbspan{
17+
font-size: 200%;
18+
}
19+
20+
.mainbox{
21+
max-width: 600px;
22+
margin: 0 auto;
23+
}
24+
25+
button{
26+
border:none;
27+
background: none;
28+
text-transform: uppercase;
29+
height: 100%;
30+
font-weight: 700;
31+
color: #fff;
32+
font-size: inherit;
33+
letter-spacing: 1px;
34+
transition: all 0.3s;
35+
}
36+
#playAgain{
37+
border-radius: 20px;
38+
color: #f88989;
39+
}
40+
#hardBtn{
41+
color: #f88989;
42+
43+
}
44+
#easyBtn{
45+
color: #f88989;
46+
}
47+
48+
.status{
49+
display: inline-block;
50+
width: 20%;
51+
color: #f88989;
52+
font-weight: 900;
53+
}
54+
.box{
55+
width: 30%;
56+
background: rgb(255,255,255);
57+
padding-bottom: 30%;
58+
float: left;
59+
margin: 1.66%;
60+
border-radius: 20px;
61+
transition: all 05s;
62+
63+
}
64+
.line{
65+
width: 100%;
66+
height: 40px;
67+
text-align: center;background-color: white;
68+
padding: 0;
69+
}

0 commit comments

Comments
 (0)