Scribd
Upload
6 views26 pages

Color Picker

The Color Picker Game involves selecting a target color from a set of options, with feedback provided for correct or incorrect selections. The game features a reset button that changes to 'Play Again?' after completion. The document includes HTML, CSS, and JavaScript code necessary for implementing the game's functionality and styling.

Uploaded by

Smridh Sud
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views26 pages

Color Picker

The Color Picker Game involves selecting a target color from a set of options, with feedback provided for correct or incorrect selections. The game features a reset button that changes to 'Play Again?' after completion. The document includes HTML, CSS, and JavaScript code necessary for implementing the game's functionality and styling.

Uploaded by

Smridh Sud
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Color Picker Game

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Game Overview
● Target color : It will be mentioned at the top and will be the target that has to
be picked from the remaining options

● New Color button : Click it will reset the game

● “Try Again” message should be printed when wrong color is clicked and
“Correct” message should get printed, once the correct color is clicked.

● Once game is over, “New Color” button should change its name to “Play
Again?”

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Game Start Page

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
When Wrong Color Is Picked

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
When Right Color Is Picked

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
HTML CODE

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
<!DOCTYPE html>
<html>
<head>
<title>Color Game</title>
<link rel="stylesheet" type="text/css" href="colorPicker.css"> CSS file linked
</head>
<body>
<h1>Color Picker
This will hold the RGB of target color
<br>
<span id="targetColor"></span>
<br>
</h1> Stripe div will hold the button and
message of the game
<div id="stripe">
<button id="NewColor">New Color</button>
<span id="message"></span>

</div>
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
<div class="container"> Container will hold all the squares
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<script type="text/javascript" src="colorPicker.js"></script> Javascript file linked
</body>
</html>

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Just HTML

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
CSS CODE

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Setting h1 color white with steelblue background color and 0 margin.
Setting padding of top and bottom to 20px
h1{
color: white;
background-color: steelblue;
text-align: center;
font-weight: normal;
text-transform: uppercase;
padding: 20px 0;

Setting body background color to black and font to arial

body{
background: #232323;
margin:0;
font-family: "arial";
}
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Setting target color font size double to the rest of the text

#targetColor{
font-size: 200%;
}

Setting button background color to white with bold text


and some other styling

button{
border:none;
background-color: white;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: steelblue;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
}
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Hovering button should change text to white and
background to steelblue

button:hover{
color:white;
background-color: steelblue;
}

Squares with default red color are of width 12% with little bit of margin for gaps between squares.
Float is set to left that specifies that squares should come one after the other. Radius will make
square 30% round

.square{
background-color: red;
width: 12%;
margin:1.66%;
float: left;
padding-bottom: 30%;
border-radius: 30%;
transition: background 0.7s;
}
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Container that will contain all the squares should be of
width 600px

.container{
margin: 20px auto;
max-width: 600px;

Stripe background color overwritten to white and all text should be aligned in center

#stripe{
text-align: center;
background-color: white;
padding:auto 0;

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Message should be in arial and upper case with some other
styling

#message{
font-family: "arial";
text-transform: uppercase;
height: 100%;
font-weight: 700;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
HTML + CSS

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
JS CODE

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
All the HTML elements are fetched and assigned to some JS variable

var noOfSquares=6;

//pallet
var arr= [];

//color picked for target


var picked;

//to get all the squares div


var squares = document.getElementsByClassName("square");

//to get the RGB display


var targetColor = document.getElementById("targetColor");

//message that can be empty, try again or correct


var message = document.getElementById("message");

//heading
var head = document.querySelector("h1");

//reset button
var reset = document.getElementById("NewColor");
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Calling init() as first statement will set the game

init();

Defining init()

function init()
{
//generate random coloured palette
arr= generateRandomColor(noOfSquares);

//get target color randomly from the array size


picked = arr[randomPickedColorIndex()];

//updating target RGB display


targetColor.textContent = picked;

for(var i=0;i<squares.length;i++)
{
//setting square's color one by one to palette color
squares[i].style.backgroundColor=arr[i];
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
//adding eventListener to all squares
for(var i=0;i<squares.length;i++)
{
//setting square's color one by one to palette color
squares[i].style.backgroundColor=arr[i];

//adding eventListener to all squares


squares[i].addEventListener("click",function(){
if(picked===this.style.backgroundColor)
{
message.textContent="Correct";
message.style.color="green";

//when correct, set everything to the target color and set newcolor to
playagain

changeColor(this.style.backgroundColor);
reset.textContent="Play Again?";
}
else
{
message.textContent="Try Again";
message.style.color="red";

//to hide the wrong square, we will set it to background color


this.style.backgroundColor ="#232323";
}
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
});
Setting eventlistener for reset button

reset.addEventListener("click", resetIn);

To get the random color from existing palette

function randomPickedColorIndex()
{
return Math.floor(Math.random()*arr.length);
}

To get the random palette of colors

function generateRandomColor(limit)
{
var color=[];
for(var i=0;i<limit;i++)
color.push(rgbGenerator());
return color;
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
}
To generate a single rgb

function rgbGenerator()
{
var r= Math.floor(Math.random()*256);
var g= Math.floor(Math.random()*256);
var b= Math.floor(Math.random()*256);

return "rgb("+r+", "+g+", "+b+")" ;


}

When correct, change everything to the correct color

function changeColor(color)
{
for(var i=0;i<squares.length;i++)
squares[i].style.backgroundColor=color;
head.style.backgroundColor=color;
}

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Set things when player try to reset

function resetIn(){
arr=generateRandomColor(noOfSquares);
picked=arr[randomPickedColorIndex()];
targetColor.textContent = picked;
message.textContent="";
head.style.backgroundColor= "steelblue";

for(var i=0;i<squares.length;i++)
squares[i].style.backgroundColor=arr[i];

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
HTML + CSS + JS

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
IT’S DONE!

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Thank You

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.

You might also like