craigprotzel/JS_Example_03

## JS_Example_03
<html>
  <head>
		<title>JS Example 3</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				font-family: Helvetica;
			}

			.instructions{
				margin-top: 20px;
				margin-left: 20px;
				font-weight: bolder;
			}

			.button{
				background-color: yellow;
				width: 60px;
				text-align: center;
				padding: 10px;
				margin: 10px;
			}
			.button:hover{
				background-color: gray;
			}


			#buttonOne{
				color: pink;
			}
			#buttonTwo{
				color: green;
			}
			#buttonThree{
				color: red;
			}

			#box{
				color: white;
				width: 200px;
				height: 150px;
				text-align: center;
				line-height: 30px;
				margin-top: 30px;
				margin-left: auto;
				margin-right: auto;
				background-color: pink;
			}
		</style>

		<script type="text/javascript">

			var hidden = false;

			$( document ).ready( function(){

				$('#buttonOne').click(function(){
					console.log("We clicked Button One!");
					$('#box').css('background-color','pink');
				});

				$('#buttonTwo').click(function(){
					console.log("We clicked Button Two!");
					$('#box').css('background-color','green');
				});

				$('#buttonThree').click(function(){
					console.log("We clicked Button Three!");

					hidden = !hidden;
					var buttonThreeText;
					if (hidden){
						buttonThreeText = 'SHOW';
					}
					else{
						buttonThreeText = 'HIDE';
					}
					//Change the text for button Three
					$('#buttonThree').html(buttonThreeText);
					//Toggle the display of the box
					$('#box').toggle();
				});

			});

		</script>
	</head>

	<body>
		<div class="instructions">CHANGE THE COLOR
			<div class="button" id="buttonOne">PINK</div>
			<div class="button" id="buttonTwo">GREEN</div>
		</div>

		<div class = "instructions">TOGGLE THE BOX DISPLAY
			<div class="button" id="buttonThree">HIDE</div>
		</div>

		<div id="box"></div>
	</body>
</html>
	<html>
	<head>
	<title>JS Example 3</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<style type="text/css">
	*{
	margin: 0px;
	padding: 0px;
	font-family: Helvetica;
	}

	.instructions{
	margin-top: 20px;
	margin-left: 20px;
	font-weight: bolder;
	}

	.button{
	background-color: yellow;
	width: 60px;
	text-align: center;
	padding: 10px;
	margin: 10px;
	}
	.button:hover{
	background-color: gray;
	}


	#buttonOne{
	color: pink;
	}
	#buttonTwo{
	color: green;
	}
	#buttonThree{
	color: red;
	}

	#box{
	color: white;
	width: 200px;
	height: 150px;
	text-align: center;
	line-height: 30px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	background-color: pink;
	}
	</style>

	<script type="text/javascript">

	var hidden = false;

	$( document ).ready( function(){

	$('#buttonOne').click(function(){
	console.log("We clicked Button One!");
	$('#box').css('background-color','pink');
	});

	$('#buttonTwo').click(function(){
	console.log("We clicked Button Two!");
	$('#box').css('background-color','green');
	});

	$('#buttonThree').click(function(){
	console.log("We clicked Button Three!");

	hidden = !hidden;
	var buttonThreeText;
	if (hidden){
	buttonThreeText = 'SHOW';
	}
	else{
	buttonThreeText = 'HIDE';
	}
	//Change the text for button Three
	$('#buttonThree').html(buttonThreeText);
	//Toggle the display of the box
	$('#box').toggle();
	});

	});

	</script>
	</head>

	<body>
	<div class="instructions">CHANGE THE COLOR
	<div class="button" id="buttonOne">PINK</div>
	<div class="button" id="buttonTwo">GREEN</div>
	</div>

	<div class = "instructions">TOGGLE THE BOX DISPLAY
	<div class="button" id="buttonThree">HIDE</div>
	</div>

	<div id="box"></div>
	</body>
	</html>