Sample Mini Projects

Darts Game

 

Color Game

Darts Score Recorder

  • Create an empty project in VS Code
  • Create HTML code to produce web-page as below:
<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1>0 : 0</h1>
	<h3>501 : 501</h3>

	
	<button>Player 1</button>
	<input type="number" name="">
	<button>Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span>0</span> : <span>0</span></h1>
	<h3><span>501</span> : <span>501</span></h3>

	
	<button>Player 1</button>
	<input type="number" name="">
	<button>Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button>Player 1</button>
	<input type="number" name="">
	<button>Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • Add Code that takes away number entered in input away from first 501 when Player 1 button is clicked
  • Add Code that takes away number entered in input away from second 501 when Player 2 button is clicked
<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • Add Code that creates a player1Score variable a sets it to 501
  • Add code that subtracts number entered into input away from player1Score when button is clicked
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");

var p1_score = 501;


<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • Add Code that creates a player1Score variable a sets it to 501
  • Add code that subtracts number entered into input away from player1Score when button is clicked
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");

var p1_score = 501;

b1.addEventListener("click",function()
	{
		p1_score = p1_score - scoreBox.valueAsNumber;
		console.log(p1_score);
	});
<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • Add Code that changes the h3 text to reflect the score of player1
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");



var p1_score = 501;

b1.addEventListener("click",function()
	{
		p1_score = p1_score - scoreBox.valueAsNumber;
		console.log(p1_score);
  
	});
<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • Add Code that changes the h3 text to reflect the score of player1
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");

var h3_p1 = document.querySelector("#p1_score");

var p1_score = 501;

b1.addEventListener("click",function()
	{
		p1_score = p1_score - scoreBox.valueAsNumber;
		console.log(p1_score);
		h3_p1.textContent = p1_score;
	});
<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • Do the same for player 2
    • Create variable
    • Add new listener
    • ...
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");
 

var h3_p1 = document.querySelector("#p1_score");


var p1_score = 501;


b1.addEventListener("click",function()
	{
		p1_score = p1_score - scoreBox.valueAsNumber;
		h3_p1.textContent = p1_score;
	});


<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • Do the same for player 2
    • Create variable
    • Add new listener
    • ...
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");
var b2 = document.querySelector("#button2");

var h3_p1 = document.querySelector("#p1_score");
var h3_p2 = document.querySelector("#p2_score");//<---new line

var p1_score = 501;
var p2_score = 501;//<---new line

b1.addEventListener("click",function()
	{
		p1_score = p1_score - scoreBox.valueAsNumber;
		h3_p1.textContent = p1_score;
	});

b2.addEventListener("click",function()
	{
		p2_score = p2_score - scoreBox.valueAsNumber;
		h3_p2.textContent = p2_score;
	});//<---new listener
<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • When a player reaches 0 (i.e. wins a leg)
    • Increase h1 heading by 1 for that player
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");
var b2 = document.querySelector("#button2");

var h3_p1 = document.querySelector("#p1_score");
var h3_p2 = document.querySelector("#p2_score");


var p1_score = 501;
var p2_score = 501;

b1.addEventListener("click",function()
	{
		p1_score = p1_score - scoreBox.valueAsNumber;
		h3_p1.textContent = p1_score;

	});

b2.addEventListener("click",function()
	{
		p2_score = p2_score - scoreBox.valueAsNumber;
		h3_p2.textContent = p2_score;

	});




<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • When a player reaches 0 (i.e. wins a leg)
    • Increase h1 heading by 1 for that player
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");
var b2 = document.querySelector("#button2");

var h3_p1 = document.querySelector("#p1_score");
var h3_p2 = document.querySelector("#p2_score");

var h1_p1 = document.querySelector("#p1_games");//<---new line
var h1_p2 = document.querySelector("#p2_games");//<---new line


var p1_sets =0;//<---new line
var p2_sets =0;//<---new line

var p1_score = 501;
var p2_score = 501;

b1.addEventListener("click",function()
	{
		p1_score = p1_score - scoreBox.valueAsNumber;
		h3_p1.textContent = p1_score;

		if(p1_score === 0)//<---new if statment
		{
			p1_sets = p1_sets + 1;//<---new line
			h1_p1.textContent = p1_sets;//<---new line
		}
	});

b2.addEventListener("click",function()
	{
		p2_score = p2_score - scoreBox.valueAsNumber;
		h3_p2.textContent = p2_score;

		if(p2_score === 0)//<---new if statment
		{
			p2_sets = p2_sets + 1;//<---new line
			h1_p2.textContent = p2_sets;//<---new line
		}
	});




<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  • When a player reaches 0 (i.e. wins a leg)
    • Increase h1 heading by 1 for that player
    • Reset scores to 501 (get ready for next leg)
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");
var b2 = document.querySelector("#button2");

var h3_p1 = document.querySelector("#p1_score");
var h3_p2 = document.querySelector("#p2_score");

var h1_p1 = document.querySelector("#p1_games");
var h1_p2 = document.querySelector("#p2_games");


var p1_sets =0;
var p2_sets =0;

var p1_score = 501;
var p2_score = 501;

b1.addEventListener("click",function()
	{
		p1_score = p1_score - scoreBox.valueAsNumber;
		h3_p1.textContent = p1_score;

		if(p1_score === 0)
		{
			p1_sets = p1_sets + 1;
			h1_p1.textContent = p1_sets;
          	
          	//reset scores
            p1_score = 501;//<---new line
            p2_score = 501;//<---new line
            h3_p1.textContent = p1_score;//<---new line
            h3_p2.textContent = p2_score;//<---new line
		}
	});

b2.addEventListener("click",function()
	{
		p2_score = p2_score - scoreBox.valueAsNumber;
		h3_p2.textContent = p2_score;

		if(p2_score === 0)
		{
			p2_sets = p2_sets + 1;
			h1_p2.textContent = p2_sets;//<---new line
          
          	//reset scores
            p1_score = 501;//<---new line
            p2_score = 501;//<---new line
            h3_p1.textContent = p1_score;//<---new line
            h3_p2.textContent = p2_score;//<---new line
		}
  		
	});




<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="scr.js"></script>
</body>
</html>
  • To win a set, a player must reach exactly 0
    • When registering a score, ensure that the players overall score does not go below 0.
    • If the current score will cause a negative score, then the current score in canceled
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");
var b2 = document.querySelector("#button2");

var h3_p1 = document.querySelector("#p1_score");
var h3_p2 = document.querySelector("#p2_score");

var h1_p1 = document.querySelector("#p1_games");
var h1_p2 = document.querySelector("#p2_games");


var p1_sets =0;
var p2_sets =0;

var p1_score = 501;
var p2_score = 501;

b1.addEventListener("click",function()
	{
  		
		
		p1_score = p1_score - scoreBox.valueAsNumber;//<---new line
		
		h3_p1.textContent = p1_score;

		if(p1_score === 0)
		{
			p1_sets = p1_sets + 1;
			h1_p1.textContent = p1_sets;
          	
          	//reset scores
            p1_score = 501;
            p2_score = 501;
            h3_p1.textContent = p1_score;
            h3_p2.textContent = p2_score;
		}
	});

b2.addEventListener("click",function()
	{
		
		p2_score = p2_score - scoreBox.valueAsNumber;//<---new line
		
		h3_p2.textContent = p2_score;

		if(p2_score === 0)
		{
			p2_sets = p2_sets + 1;
			h1_p2.textContent = p2_sets;
          
          	//reset scores
            p1_score = 501;
            p2_score = 501;
            h3_p1.textContent = p1_score;
            h3_p2.textContent = p2_score;
		}
  		
	});




<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="scr.js"></script>
</body>
</html>
  • To win a set, a player must reach exactly 0
    • When registering a score, ensure that the players overall score does not go below 0.
    • If the current score will cause a negative score, then the current score in canceled
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");
var b2 = document.querySelector("#button2");

var h3_p1 = document.querySelector("#p1_score");
var h3_p2 = document.querySelector("#p2_score");

var h1_p1 = document.querySelector("#p1_games");
var h1_p2 = document.querySelector("#p2_games");


var p1_sets =0;
var p2_sets =0;

var p1_score = 501;
var p2_score = 501;

b1.addEventListener("click",function()
	{
  		
		if(p1_score - scoreBox.valueAsNumber >= 0)//<---new line
		{
			p1_score = p1_score - scoreBox.valueAsNumber;//<---new line
		}
		h3_p1.textContent = p1_score;

		if(p1_score === 0)
		{
			p1_sets = p1_sets + 1;
			h1_p1.textContent = p1_sets;
          	
          	//reset scores
            p1_score = 501;
            p2_score = 501;
            h3_p1.textContent = p1_score;
            h3_p2.textContent = p2_score;
		}
	});

b2.addEventListener("click",function()
	{
		if(p2_score - scoreBox.valueAsNumber >= 0)//<---new line
		{
			p2_score = p2_score - scoreBox.valueAsNumber;//<---new line
		}
		h3_p2.textContent = p2_score;

		if(p2_score === 0)
		{
			p2_sets = p2_sets + 1;
			h1_p2.textContent = p2_sets;
          
          	//reset scores
            p1_score = 501;
            p2_score = 501;
            h3_p1.textContent = p1_score;
            h3_p2.textContent = p2_score;
		}
  		
	});




<!DOCTYPE html>
<html>
<head>
	<title>Darts Score Recorder</title>
</head>
<body>
	<h1><span id="p1_games">0</span> : <span id="p2_games">0</span></h1>
	<h3><span id="p1_score">501</span> : <span id="p2_score">501</span></h3>

	
	<button id="button1">Player 1</button>
	<input type="number" name="" id="score">
	<button id="button2">Player 2</button>

	<script type="text/javascript" src="scr.js"></script>
</body>
</html>
  • Tidy up the "reset scores" part
    • Create a resetScores() function
var scoreBox = document.querySelector("#score");
var b1 = document.querySelector("#button1");
var b2 = document.querySelector("#button2");

var h3_p1 = document.querySelector("#p1_score");
var h3_p2 = document.querySelector("#p2_score");

var h1_p1 = document.querySelector("#p1_games");
var h1_p2 = document.querySelector("#p2_games");


var p1_sets =0;
var p2_sets =0;

var p1_score = 501;
var p2_score = 501;

b1.addEventListener("click",function()
	{
  		
		if(p1_score - scoreBox.valueAsNumber >= 0)
		{
			p1_score = p1_score - scoreBox.valueAsNumber;
		}
		h3_p1.textContent = p1_score;

		if(p1_score === 0)
		{
			p1_sets = p1_sets + 1;
			h1_p1.textContent = p1_sets;
          	
          	//reset scores
            resetScores();//<---new line to replace old 4 lines of code
		}
	});

b2.addEventListener("click",function()
	{
		if(p2_score - scoreBox.valueAsNumber >= 0)
		{
			p2_score = p2_score - scoreBox.valueAsNumber;
		}
		h3_p2.textContent = p2_score;

		if(p2_score === 0)
		{
			p2_sets = p2_sets + 1;
			h1_p2.textContent = p2_sets;
          
          	//reset scores
            resetScores();//<---new line to replace old 4 lines of code
		}
  		
	});

function resetScores()//<----new function
{
  p1_score = 501;
  p2_score = 501;
  h3_p1.textContent = p1_score;
  h3_p2.textContent = p2_score;
}

DOM Events

So far we have only seen the click event

There are many types of event which you can create listeners for:

See Here

DOM Events

mouseover

mouseout

The event occurs when the pointer is moved onto an element, or onto one of its children

The event occurs when a user moves the mouse pointer out of an element, or out of one of its children

hoverEvent

Sample Mini Project

Color Game

  • Create colorGame.html and colorGame.css
  • Add divs to represent squares
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<div id="squareHolder">
		<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>
</body>
</html>

body
{
	background-color: #f1e8b8;
}

.square {
	margin: 1.6%;

	width: 30%;
        padding-top: 30%;

	background: black;
	
}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<div id="squareHolder">
		<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>
</body>
</html>
  • Set background color
  • Set width of square to 30%
  • Set padding-top to 30% also
body
{
	background-color: #f1e8b8;
}

.square {
	margin: 1.6%;

	width: 30%;
        padding-top: 30%;

	background: black;
	
        float: left;
}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<div id="squareHolder">
		<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>
</body>
</html>
  • Set float: left
  • Allows squares appear next to each other
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<div id="squareHolder">
		<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>
</body>
</html>

body
{
	background-color: #f1e8b8;
}

.square {
	margin: 1.6%;
	width: 30%;
        padding-top: 30%;
	background: black;
        float: left;
}

#squareHolder {
	max-width: 600px;
}
  • Set max width of the container "squareHolder"
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<div id="squareHolder">
		<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>
</body>
</html>

body
{
	background-color: #f1e8b8;
}

.square {
	width: 30%;
	background: #2ec4b6;
	padding-bottom: 30%;
	float: left;
	margin: 1.66%;
}

#squareHolder {
	max-width: 600px;
        margin: 0 auto 0 auto;/*new line*/
}
  • Center the container "squareHolder"
<!DOCTYPE html>
...
<body>

	<h1>The Best RGB Game Ever!</h1>

	<div id="squareHolder">
		<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>
</body>

h1
{
	color: #ff6666;
        background-color: #5d2e8c;
}
  • Add <h1> heading to the html
  • Style the h1
<!DOCTYPE html>
...
<body>

	<h1>The Best RGB Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>

var colors = ["red", 
              "green", 
              "blue", 
              "magenta", 
              "yellow", 
              "cyan"
             ]
  • Start creating the JS code
  • Create array of strings representing RGB colors
<!DOCTYPE html>
...
<body>

	<h1>The Best RGB Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>

var colors = [
    "rgb(255, 0, 0)",//red
    "rgb(0, 255, 0)",//green
    "rgb(0, 0, 255)",//blue
    "rgb(255, 0, 255)",//magenta
    "rgb(255, 255, 0)",//yellow
    "rgb(0, 255, 255)"//cyan
]
  • Start creating the JS code
  • Create array of strings representing RGB colors
<!DOCTYPE html>
...
<body>

	<h1>The Best RGB Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>

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

//try yourself..add code here

Assign colors in array to each square

"rgb(255,0,0)" squares[0]
"rgb(0,255,0)" squares[1]
"rgb(0,0,255)" squares[2]
"rgb(255,255,0)" squares[3]
"rgb(255,0,255)" squares[4]
"rgb(0,255,255)" squares[5] 
<!DOCTYPE html>
...
<body>

	<h1>The Best RGB Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>

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

//try yourself..add code here

Assign colors in array to each square

colors[0] squares[0]
colors[1] squares[1]
colors[2] squares[2]
colors[3] squares[3]
colors[4] squares[4]
colors[5] squares[5] 
<!DOCTYPE html>
...
<body>

	<h1>The Best RGB Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>

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


squares[0].style.backgroundColor = colors[0];

 

  • Assign colors in array to each square
<!DOCTYPE html>
...
<body>

	<h1>The Best RGB Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>

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

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

 

  • Assign colors in array to each square
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>

	...
</body>

...

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

var secretColor = colors[3];


//to do...update the heading to include the secret color
  • Create a chosenColor variable
  • Add an id="RGB" to part of the heading so we can "grab" it
  • TO DO: Update the heading to include the chosen color 
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>

	...
</body>

...

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

var secretColor = colors[3];

var rgbHeading = document.querySelector("#rgb");
rgbHeading.textContent = secretColor;
  • Create a chosenColor variable
  • Add an id="RGB" to part of the heading so we can "grab" it
  • TO DO: Update the heading to include the chosen color 
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
...

rgbHeading.textContent = secretColor;


//to do..add a click listener to each square
  • TO DO: Add click listeners to each square
    • For now the click listener should just print to console (e.g. "square clicked")
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
...

rgbHeading.textContent = secretColor;



//add click listeners
squares[0].addEventListener("click",function()
                            {

  console.log("Square Clicked!");

});
  • Add click listeners to the FIRST square
    • For now the click listener should just print to console (e.g. "square clicked")
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
...

rgbHeading.textContent = secretColor;



squares[0].addEventListener("click",function()
                            {

  console.log("Square Clicked!");

});
  • Add click listeners to ALL squares
    • For now the click listener should just print to console (e.g. "square clicked")
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
...

rgbHeading.textContent = secretColor;


for(var i=0; i<squares.length; i++)
{
	//add click listeners
	squares[i].addEventListener("click",function()
	{
		
            console.log("Square Clicked!");
		
	});
}
  • Add click listeners to ALL squares
    • For now the click listener should just print to console (e.g. "square clicked")
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
...

rgbHeading.textContent = secretColor;


for(var i=0; i<squares.length; i++)
{
	//add click listeners
	squares[i].addEventListener("click",function()
	{
		var currentColor = this.style.backgroundColor;
		
        	//to do..check if currentColor is same as secretColor
	});
}
  • Click listener should check color of current square and evaluate if it is the same as the secret color
    • If current color and secret color are same, print "correct color" to console
    • Otherwise print "wrong color" to console
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
...

rgbHeading.textContent = secretColor;


for(var i=0; i<squares.length; i++)
{
	//add click listeners
	squares[i].addEventListener("click",function()
	{
		var currentColor = this.style.backgroundColor;
		
                if(currentColor === secretColor)
		{
			console.log("Correct Color Chosen");
		}
		else
		{
			console.log("Wrong Color Chosen");
		}
	});
}
  • Click listener should check color of current square and evaluate if it is the same as the secret color
    • If current color and secret color are same, print "correct color" to console
    • Otherwise print "wrong color" to console
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>


for(var i=0; i<squares.length; i++)
{
	//add click listeners
	squares[i].addEventListener("click",function()
	{
		var currentColor = this.style.backgroundColor;
		if(currentColor === secretColor)
		{
			console.log("Correct Color Chosen");
		}
		else
		{
			console.log("Wrong Color Chosen");
			this.style.backgroundColor = "#f1e8b8";//<-----add this
		}
	});
}
  • If Wrong, set square color to same as background (i.e. make it disappear)
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div>
		<span id="label"></span>
	</div>

	...
</body>

var label = document.querySelector("#label");//<----add this

for(var i=0; i<squares.length; i++)
{
	//add click listeners
	squares[i].addEventListener("click",function()
	{
		var currentColor = this.style.backgroundColor;
		if(currentColor === secretColor)
		{
			//to do: edit label here
		}
		else
		{
			//to do: edit label here
			this.style.backgroundColor = "#f1e8b8";
		}
	});
}
  • Add a Correct/Incorrect label to appear in the HTML
    • TO DO: Set to Correct when correct color is clicked
    • TO DO: Set to Incorrect when incorrect color is clicked
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div>
		<span id="label"></span>
	</div>

	...
</body>

var label = document.querySelector("#label");//<----add this

for(var i=0; i<squares.length; i++)
{
	//add click listeners
	squares[i].addEventListener("click",function()
	{
		var currentColor = this.style.backgroundColor;
		if(currentColor === secretColor)
		{
			label.textContent = "Correct!";//<---edit this
		}
		else
		{
			label.textContent = "Incorrect!";//<---edit this
			this.style.backgroundColor = "#f1e8b8";
		}
	});
}
  • Add a Correct/Incorrect label to appear in the HTML
    • Set to Correct when correct color is clicked
    • Set to Incorrect when incorrect color is clicked
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
for(var i=0; i<squares.length; i++)
{
	//add click listeners
	squares[i].addEventListener("click",function()
	{
		var currentColor = this.style.backgroundColor;
		if(currentColor === secretColor)
		{
			label.textContent = "Correct!";
			changeAllSquares(currentColor);//<---add call to function
		}
		else
		{
			this.style.backgroundColor = "#f1e8b8";
			label.textContent = "Incorrect!";
		}
	});
}

function changeAllSquares(color){//<---new function*/

	//1. Add your code here to change all squares the color passed to the function
}
  • When the correct color is chosen:
    • Change color of all 6 squares to the same color as the secret Color 
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
for(var i=0; i<squares.length; i++)
{
	//add click listeners
	squares[i].addEventListener("click",function()
	{
		var currentColor = this.style.backgroundColor;
		if(currentColor === secretColor)
		{
			label.textContent = "Correct!";
			changeAllSquares(currentColor);//<---add call to function
		}
		else
		{
			this.style.backgroundColor = "#f1e8b8";
			label.textContent = "Incorrect!";
		}
	});
}

function changeAllSquares(color){//<---new function*/


	squares[0].style.backgroundColor = color;//<--change ONE square

}
  • When the correct color is chosen:
    • Change color of all 6 squares to the same color as the secret Color 
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
for(var i=0; i<squares.length; i++)
{
	//add click listeners
	squares[i].addEventListener("click",function()
	{
		var currentColor = this.style.backgroundColor;
		if(currentColor === secretColor)
		{
			label.textContent = "Correct!";
			changeAllSquares(currentColor);//<---add call to function
		}
		else
		{
			this.style.backgroundColor = "#f1e8b8";
			label.textContent = "Incorrect!";
		}
	});
}

function changeAllSquares(color){//<---new function*/

	for(var i=0;i<squares.length;i++)
	{
		squares[i].style.backgroundColor = color;
	}
}
  • When the correct color is chosen:
    • Change color of all 6 squares to the same color as the secret Color 
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
//...

var secretColor = selectSecretColor();

//...


function selectSecretColor()
{
	//pick random number between 0 and size of colors list
	var rand = Math.floor(Math.random() * colors.length + 1);
	return colors[rand];
}
  • Make function to chose secret color at random (not just 3 everytime)

Hint: Math.floor(Math.random() * 6 + 1);

<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
function makeRandomColor()
{
	var r = Math.floor(Math.random() * 256);//red part
	var g = Math.floor(Math.random() * 256);//green part
	var b = Math.floor(Math.random() * 256);//blue part

	//make "rgb(r, g, b)" string
	return "rgb(" + r + ", " + g + ", " + b + ")"; 
}
  • Rather than having predefined colors defined in the colors array...
  • Create function that generates a random rgb color string
  • e.g. "rgb(x,y,z)" where x, y and z are numbers between 0 - 255
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
var colors = [
    makeRandomColor(),
    makeRandomColor(),
    makeRandomColor(),
    makeRandomColor(),
    makeRandomColor(),
    makeRandomColor()
];
  • Change the definition of the colors array from predefined values to values created by the makeRandomColor() function
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
var colors = makeRandomColorList(6);

//...

function makeRandomColorList(size)
{
	var list = [];

	for(var i = 0; i < size; i++)
	{
		list.push(makeRandomColor());
	}
	return list;
}

function makeRandomColor()
{
	var r = Math.floor(Math.random() * 256);//red part
	var g = Math.floor(Math.random() * 256);//green part
	var b = Math.floor(Math.random() * 256);//blue part

	//make "rgb(r, g, b)" string
	return "rgb(" + r + ", " + g + ", " + b + ")"; 
}
  • Make the 6 squares have 6 random colors
    • Improve the code by making function to generate list
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
	</div>

	...
</body>

#menu
{
	background-color: #2ec4b6;
	height: 30px;
	text-align: center;
}
  • Add a menu bar with a reset button
    • Show the correct/incorrect label in the menu bar also
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
//...

var reset = document.querySelector("#resetButton");

//try it yourself..add event listener to the reset button
  • Add event listener for the Reset button
    • Just make it do a console.log("reset clicked") for now
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
//...

var reset = document.querySelector("#resetButton");

reset.addEventListener("click",function()
{
	console.log("reset clicked");
});
  • Add event listener for the Reset button
    • Just make it do a console.log("reset clicked") for now
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
var reset = document.querySelector("#resetButton");

reset.addEventListener("click",function()
{
	//try it yourself...code goes here
});
  • Add logic for reseting game
    • Generate color list
    • Select secret color
    • Change heading to show rgb or secret color
    • Change colors of squares
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
var reset = document.querySelector("#resetButton");
reset.addEventListener("click",function()
{
	colors = makeRandomColorList(6);
	secretColor = selectSecretColor();
	rgbHeading.textContent = secretColor;

	for(var i=0; i<squares.length; i++)
	{
		squares[i].style.backgroundColor = colors[i];
	}
});
  • Add logic for reseting game
    • Generate color list
    • Select secret color
    • Change heading to show rgb or secret color
    • Change colors of squares
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button>Easy</button>
		<button>Hard</button>
	</div>

	...
</body>
...
  • Add Easy and Hard mode
    • Add Easy and Hard buttons to the menu bar
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	...
</body>
...
.selected
{
	background-color: #ccff66;
}
  • Add Easy and Hard mode
  • Add "selected" class styling to css
  • Toggle button styling when hard or easy is selected
var hardButton = document.querySelector("#hardButton");
var easyButton = document.querySelector("#easyButton");

//...to do add event listeners
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	...
</body>
...
.selected
{
	background-color: #ccff66;
}
  • Add Easy and Hard mode
  • Add "selected" class styling to css
  • Toggle button styling when hard or easy is selected (hint: classlist)
var hardButton = document.querySelector("#hardButton");
var easyButton = document.querySelector("#easyButton");

hardButton.addEventListener("click",function()
	{
		//try it..your code here
	});


easyButton.addEventListener("click",function()
	{
		//try it..your code here
	});
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	...
</body>
...
.selected
{
	background-color: #ccff66;
}
  • Add Easy and Hard mode
  • Add "selected" class styling to css
  • Toggle button styling when hard or easy is selected
var hardButton = document.querySelector("#hardButton");
var easyButton = document.querySelector("#easyButton");

hardButton.addEventListener("click",function()
	{
		hardButton.classList.add("selected");
		easyButton.classList.remove("selected");
	});


easyButton.addEventListener("click",function()
	{
		hardButton.classList.remove("selected");
		easyButton.classList.add("selected");
	});
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
.selected
{
	background-color: #ccff66;
}
  • Add Easy and Hard mode
    • Toggle button color when hard or easy is selected
var hardButton = document.querySelector("#hardButton");
var easyButton = document.querySelector("#easyButton");

hardButton.addEventListener("click",function()
	{
		hardButton.classList.add("selected");
		easyButton.classList.remove("selected");
	});


easyButton.addEventListener("click",function()
	{
		hardButton.classList.remove("selected");
		easyButton.classList.add("selected");
	});
<!DOCTYPE html>
...
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	...
</body>
...
  • Add Easy mode logic
    • Easy mode will only have 3 colors to choose from
    • When easy is selected, reset the game but only choose 3 colors
    • Set the top 3 square to the 3 random colors
    • Set the bottom 3 squares to not be displayed
var hardButton = document.querySelector("#hardButton");
var easyButton = document.querySelector("#easyButton");

easyButton.addEventListener("click",function()
	{
		hardButton.classList.remove("selected");
		easyButton.classList.add("selected");

		colors = makeRandomColorList(3);
		secretColor = selectSecretColor();
		rgbHeading.textContent = secretColor; 

		for(var i=0; i<squares.length; i++)
		{
			if(colors[i])//if there is a color for current square
			{
				squares[i].style.backgroundColor = colors[i];
			}
			else//otherwise: make the square not be displayed
			{
				squares[i].style.display = "none";
			}
		}
	});
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
  • Add Hard mode logic
    • Hard mode will change back to 6 colors to choose from
    • When hard is selected, reset the game an ensure 6 squares a displayed
    • Set the all 6 squares color from random color list
var hardButton = document.querySelector("#hardButton");
var easyButton = document.querySelector("#easyButton");

hardButton.addEventListener("click",function()
	{
		hardButton.classList.add("selected");
		easyButton.classList.remove("selected");

		
		//to do: add hard mode logic
	});
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
  • Add Hard mode logic
    • Hard mode will change back to 6 colors to choose from
    • When hard is selected, reset the game an ensure 6 squares a displayed
    • Set the all 6 squares color from random color list
var hardButton = document.querySelector("#hardButton");
var easyButton = document.querySelector("#easyButton");

hardButton.addEventListener("click",function()
	{
		hardButton.classList.add("selected");
		easyButton.classList.remove("selected");

		
		colors = makeRandomColorList(6);
		secretColor = selectSecretColor();
		rgbHeading.textContent = secretColor; 

		for(var i=0; i<squares.length; i++)
		{
			squares[i].style.backgroundColor = colors[i];
			squares[i].style.display = "block";//ensure square is visible
		}
	});
  • We introduced a bug
    • After clicking reset when in easy mode, the game doesn't always work

Lets find the Bug...

<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>
  • We introduced a bug
    • When easy mode is selected and then you click reset, 6 colors will be generated. Not the desired 3 colors for easy.
    • Fix by creating a variable to store the number of squares needed (var numOfSquares)
    • Change variable to 3 when easy is click and 6 when hard is click
    • Remove hard coded "6" and "3" and replace with variable i.e. makeRandomColorList(numOfSquares) 
var numOfSquares = 6;//add this line

//...

var reset = document.querySelector("#resetButton");
reset.addEventListener("click",function()
{
	colors = makeRandomColorList(numOfSquares);//edit this line
	secretColor = selectSecretColor();
	rgbHeading.textContent = secretColor;

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


//...

hardButton.addEventListener("click",function()
	{
		hardButton.classList.add("selected");
		easyButton.classList.remove("selected");

		numOfSquares = 6;//add this line
		colors = makeRandomColorList(numOfSquares);//edit this line
		secretColor = selectSecretColor();
		rgbHeading.textContent = secretColor; 

		for(var i=0; i<squares.length; i++)
		{
			squares[i].style.backgroundColor = colors[i];
			squares[i].style.display = "block";//ensure square is visible
		}
	});


easyButton.addEventListener("click",function()
	{
		hardButton.classList.remove("selected");
		easyButton.classList.add("selected");

		numOfSquares = 3;//add this line
		colors = makeRandomColorList(numOfSquares);//edit this line
		secretColor = selectSecretColor();
		rgbHeading.textContent = secretColor; 

		for(var i=0; i<squares.length; i++)
		{
			if(colors[i])//if there is a color for current square
			{
				squares[i].style.backgroundColor = colors[i];
			}
			else//otherwise: make the square not be displayed
			{
				squares[i].style.display = "none";
			}
		}
	});

There is another Bug.

 

  • Press the reset button multiple times
  • Sometimes, the "RGB(x,y,z)" does not appear
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Center the heading
  • Remove margins on header

 

 

h1
{
	text-align: center;/*add this*/
	color: #ff6666;
	background-color: #5d2e8c;
	margin: 0;/*add this*/
}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <span id="rgb">RGB</span> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Remove margins on body

 

 

body
{
	background-color: #f1e8b8;
	margin: 0;/*add this*/
}

<!DOCTYPE html>
...
<body>

	<h1>The Best <br><span id="rgb">RGB</span></br> Game Ever!</h1>
	
        ...
</body>

Lets style this thing

  • Add separate lines in the header (using <br>)

 

<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the font nicer

 

body
{
	background-color: #f1e8b8;
	margin: 0;
	font-family: 'Open Sans', sans-serif;/*add this*/
}

...

h1
{
    text-align: center;
    color: #ff6666;
    padding: 20px 0 20px 0;
    background-color: #5d2e8c;
    margin: 0;
    font-weight: normal; /*add this*/
    text-transform: uppercase; /*add this*/
    line-height: 1.1; /*add this*/

}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the font nicer
    • Make the RGB( ) bit bigger

 

#rgb
{
    font-size: 200%;
}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the menu buttons nicer
    • Remove borders from buttons
    • Change background color
    • Change height

 

button
{
	border: none;
	background: none;
	text-transform: uppercase;
	height: 100%;
}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the menu buttons nicer
    • Change button text color
    • Bigger button font

 

 
button
{
	border: none;
	background: none;
	text-transform: uppercase;
	height: 100%;
	font-weight: 700;
	color:  #5d2e8c;
}

<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the menu bar nicer
    • Leave a space for the incorrect/correct label

 

#label
{
	display: inline-block;
	width: 20%;
}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the menu bar nicer
    • Add hover effect to buttons

 

button:hover
{
	background-color: #5d2e8c;
	color: #2ec4b6;
}

<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the menu bar nicer
    • Make button look same as hover when selected

 

.selected
{
	background-color: #5d2e8c;
	color: #2ec4b6;
}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the menu bar nicer
    • Add a transition effect when changing button colors

 

button
{
	border: none;
	background: none;
	text-transform: uppercase;
	height: 100%;
	font-weight: 700;
	color:  #5d2e8c;
	transition: all 0.7s;/*add this*/
}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the squares nicer
    • Add rounded corners

 

.square 
{
	width: 30%;
	background: #2ec4b6;
	padding-bottom: 30%;
	float: left;
	margin: 1.66%;
	border-radius: 20%;/*add this*/
}
<!DOCTYPE html>
<html>
<head>
	<title>Color Game</title>
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>

	<h1>The Best <br><span id="rgb">RGB</span><br> Game Ever!</h1>
	<div id="menu">
		<button id="resetButton">Reset</button>
		<span id="label"></span>
		<button id="easyButton">Easy</button>
		<button id="hardButton" class="selected">Hard</button>
	</div>

	<div id="squareHolder">
		<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="colorGame.js"></script>
</body>
</html>

Lets style this thing

  • Make the squares nicer
    • Make the square fade out when clicking on wrong color

 

.square 
{
	width: 30%;
	background: #2ec4b6;
	padding-bottom: 30%;
	float: left;
	margin: 1.66%;
	border-radius: 20%;
	transition: background-color 1s;
}
hardButton.addEventListener("click",function()
{		
        hardButton.classList.add("selected");
	easyButton.classList.remove("selected");

	numOfSquares = 6;
		
	colors = makeRandomColorList(numOfSquares);
	secretColor = selectSecretColor();
	rgbHeading.textContent = secretColor; 

	for(var i=0; i<squares.length; i++)
	{
		squares[i].style.backgroundColor = colors[i];
		squares[i].style.display = "block";//ensure square is visible
	}
});
easyButton.addEventListener("click",function()
{
	hardButton.classList.remove("selected");
	easyButton.classList.add("selected");

	numOfSquares = 3;
		
	colors = makeRandomColorList(numOfSquares);
	secretColor = selectSecretColor();
	rgbHeading.textContent = secretColor; 

	for(var i=0; i<squares.length; i++)
	{
		if(colors[i])//if there is a color for current square
		{
			squares[i].style.backgroundColor = colors[i];
		}
		else//otherwise: make the square not be displayed
		{
			squares[i].style.display = "none";
		}
	}
});
reset.addEventListener("click",function()
{
	colors = makeRandomColorList(numOfSquares);
	secretColor = selectSecretColor();
	rgbHeading.textContent = secretColor;

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

Performing the same tasks

function resetSquares(n) 
{
	colors = makeRandomColorList(n);
	secretColor = selectSecretColor();
	rgbHeading.textContent = secretColor; 

	for(var i=0; i<squares.length; i++)
	{
		if(colors[i])//if there is a color for current square
		{
			squares[i].style.backgroundColor = colors[i];
			squares[i].style.display = "block";//ensure square is visible
		}
		else//otherwise: make the square not be displayed
		{
			squares[i].style.display = "none";
		}
	}
}
hardButton.addEventListener("click",function()
{		
        hardButton.classList.add("selected");
	easyButton.classList.remove("selected");

	numOfSquares = 6;
		
	









});
easyButton.addEventListener("click",function()
{
	hardButton.classList.remove("selected");
	easyButton.classList.add("selected");

	numOfSquares = 3;
		
	














});
reset.addEventListener("click",function()
{
	








});

Performing the same tasks

resetSquares(numOfSquares);
resetSquares(numOfSquares);
resetSquares(numOfSquares);

GameProject

By D.Kelly

Made with Slides.com

GameProject

  • 915

More from D.Kelly