joelcarranza · August 29, 2015 14:21
diff --git a/gistfile1.html b/gistfile1.html
 <html>
 <title>Inspect Me</title>

 <style>
 body {
 	margin: 20px;
 	font-size: 18px;
 }

 img {
 	border: 3px solid gray;
 }

 button {
 	font-size: 16px;
 }

 .photo {
 	padding-bottom: 10px;
 }

 #caption {
 	font-size: 120%;
 	color: rgb(255,0,0);
 }
 </style>

 <body>
 	<div class="photo">
 		<img id="image" src="http://static.guim.co.uk/sys-images/Observer/Pix/pictures/2011/7/13/1310556523267/Boredom-feature-007.jpg">
 		<p id="caption">I'm bored....</p>
 	</div>
 	<button id="party">Let' Party!</button>
 </body>
 <script>
 	var PARTY_URL = 'http://33.media.tumblr.com/45cd650e8ce9ff54512063d1c4e8047e/tumblr_mjy3d7lx2P1s2hhg6o1_500.gif';

 	var partyButton = document.getElementById('party');
 	partyButton.addEventListener('click',function() {
 		var imageElement = document.getElementById('image');
 		imageElement.setAttribute('src',PARTY_URL);

 		var captionElement = document.getElementById('caption');
 		captionElement.style.display = 'none';
 	});
 </script>
 </html>
	<html>
	<title>Inspect Me</title>

	<style>
	body {
	margin: 20px;
	font-size: 18px;
	}

	img {
	border: 3px solid gray;
	}

	button {
	font-size: 16px;
	}

	.photo {
	padding-bottom: 10px;
	}

	#caption {
	font-size: 120%;
	color: rgb(255,0,0);
	}
	</style>

	<body>
	<div class="photo">
	<img id="image" src="http://static.guim.co.uk/sys-images/Observer/Pix/pictures/2011/7/13/1310556523267/Boredom-feature-007.jpg">
	<p id="caption">I'm bored....</p>
	</div>
	<button id="party">Let' Party!</button>
	</body>
	<script>
	var PARTY_URL = 'http://33.media.tumblr.com/45cd650e8ce9ff54512063d1c4e8047e/tumblr_mjy3d7lx2P1s2hhg6o1_500.gif';

	var partyButton = document.getElementById('party');
	partyButton.addEventListener('click',function() {
	var imageElement = document.getElementById('image');
	imageElement.setAttribute('src',PARTY_URL);

	var captionElement = document.getElementById('caption');
	captionElement.style.display = 'none';
	});
	</script>
	</html>