craigprotzel/JS_Example_02

## JS_Example_02
<html>
  <head>
		<title>JS Example 2</title>

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

			#buttonOne{
				color: black;
				background-color: yellow;
				width: 100px;
				text-align: center;
				padding: 10px;
				margin: 10px;
			}

			#buttonOne:hover{
				background-color: gray;
			}

			#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 buttonClicked = false;

			var changeBoxColor = function(){
				if (buttonClicked == true){
					document.getElementById('box').style.backgroundColor = 'green';
				}
				else if (buttonClicked == false){
					document.getElementById('box').style.backgroundColor = 'pink';
				}
			}

			window.onload = function(){

				//Check if page properly loaded
				console.log("Page is Loaded!!!!");

				//Initialize button variable
				var buttonOne = document.getElementById('buttonOne');

				//Create the click event
				buttonOne.addEventListener('click', function(){
						console.log("We clicked Button One!");
						buttonClicked = !buttonClicked;
						console.log(buttonClicked);
						changeBoxColor();
					},false
				);
			};
		</script>
	</head>

	<body>
		<div id="buttonOne">CLICK HERE</div>
		<div id="box"></div>
	</body>
</html>
	<html>
	<head>
	<title>JS Example 2</title>

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

	#buttonOne{
	color: black;
	background-color: yellow;
	width: 100px;
	text-align: center;
	padding: 10px;
	margin: 10px;
	}

	#buttonOne:hover{
	background-color: gray;
	}

	#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 buttonClicked = false;

	var changeBoxColor = function(){
	if (buttonClicked == true){
	document.getElementById('box').style.backgroundColor = 'green';
	}
	else if (buttonClicked == false){
	document.getElementById('box').style.backgroundColor = 'pink';
	}
	}

	window.onload = function(){

	//Check if page properly loaded
	console.log("Page is Loaded!!!!");

	//Initialize button variable
	var buttonOne = document.getElementById('buttonOne');

	//Create the click event
	buttonOne.addEventListener('click', function(){
	console.log("We clicked Button One!");
	buttonClicked = !buttonClicked;
	console.log(buttonClicked);
	changeBoxColor();
	},false
	);
	};
	</script>
	</head>

	<body>
	<div id="buttonOne">CLICK HERE</div>
	<div id="box"></div>
	</body>
	</html>