week6.html

<!-- Week 6 Manipulating CSS Class Properties Using JavaScript Creating CSS3 Transitions and Animations in CSS and triggering them with JavaScript-->

<!DOCTYPE HTML>
<html>
<body class = 'background'>
	<header>
		<link rel="stylesheet" type="text/css" href="main.css">
	</header>
	<main>
		<!-- Change Color -->
		<div>
			<button class='color' onclick="changeColor()">What Color am I?</button>
		</div>
		<div class = 'color'>
			<p class = 'color'>Me Too!</p>
		</div>
		<!-- Change Style -->
		<div>
			<button class='bold' onclick="makeBold()">Be Bold</button>
		</div>
		<!-- Change Background Color -->
		<div>
			<button onclick="background()">Background</button>
		</div>
		<!-- Reset -->
		<div>
			<button onclick="reset()">Reset</button>
		</div>

		<!-- Transition-->
		<div id = 'box'>
		</div>
		
		<!-- Animation-->
		<div id = 'boxA'>
			<h4>Wingardium leviosa</h4>
		</div>

	</main>
	<footer>
		
	</footer>
</body>
<script src="week6.js"></script>
</html>