jpetto · September 12, 2012 01:14
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Week 2!</title>

 	<style type="text/css">
 		#main {
 			padding: 10px;
 			background: #FFC4DC;
 		}

 		.callout {
 			padding: 15px;
 			background: #ABEDFF;
 		}
 	</style>
 </head>
 <body>

 	<h1>Week 2, DOM Stuffs</h1>

 	<header>
 		<h2>DOM is not JavaScript!</h2>

 		<p class="callout">
 			Sesame snaps toffee candy canes marzipan powder cake marzipan gummi bears caramels. Powder wypas dragée. Icing cheesecake oat cake chocolate cake marshmallow wafer caramels.
 		</p>
 	</header>

 	<section id="content">
 		<form id="feelings_form">
 			<input type="text" name="feelings" id="feelings" />
 			<button id="get_feelings" type="submit">Tell Me Your Feelings</button>
 		</form>

 		<p id="main">
 			Sesame snaps toffee candy canes marzipan powder cake marzipan gummi bears caramels. Powder wypas dragée. Icing cheesecake oat cake chocolate cake marshmallow wafer caramels.
 		</p>

 		<p class="callout">
 			Sesame snaps toffee candy canes marzipan powder cake marzipan gummi bears caramels. Powder wypas dragée. Icing cheesecake oat cake chocolate cake marshmallow wafer caramels.
 		</p>
 	</section>

 	<footer class="callout">
 		&copy; 2012 My Awesome Self
 	</footer>

 	<script type="text/javascript">
 		var feelings_textbox = document.querySelector('#feelings');
 		var feelings_form = document.querySelector("#feelings_form");
 		var feelings_button = document.querySelector('#get_feelings');

 		// put the cursor in the text box
 		feelings_textbox.focus();

 		feelings_form.onsubmit = function(e) {
 			e.preventDefault();

 			// get the user's feelings
 			var feelings = feelings_textbox.value;
 			//console.log(feelings);

 			// create a new p tag in the content section
 			var p = document.createElement('p');
 			var p_text = document.createTextNode("Oh, I see that you are feeling " + feelings + ". Interesting.");

 			p.appendChild(p_text);

 			// get reference to content section
 			var content = document.querySelector('#content');

 			// inject new p tag into content section
 			content.appendChild(p);
 		}

 		/*
 		// access element the old school way
 		//var main_p = document.getElementById('main');

 		// new school way
 		var main_p = document.querySelector("#main");

 		// get first .callout element
 		var callout = document.querySelector(".callout");

 		// get all .callout elements
 		var callouts = document.querySelectorAll('.callout, #main');

 		// get all p tags
 		//var ps = document.getElementsByTagName('p');

 		console.log(callouts);
 		*/
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Week 2!</title>

	<style type="text/css">
	#main {
	padding: 10px;
	background: #FFC4DC;
	}

	.callout {
	padding: 15px;
	background: #ABEDFF;
	}
	</style>
	</head>
	<body>

	<h1>Week 2, DOM Stuffs</h1>

	<header>
	<h2>DOM is not JavaScript!</h2>

	<p class="callout">
	Sesame snaps toffee candy canes marzipan powder cake marzipan gummi bears caramels. Powder wypas dragée. Icing cheesecake oat cake chocolate cake marshmallow wafer caramels.
	</p>
	</header>

	<section id="content">
	<form id="feelings_form">
	<input type="text" name="feelings" id="feelings" />
	<button id="get_feelings" type="submit">Tell Me Your Feelings</button>
	</form>

	<p id="main">
	Sesame snaps toffee candy canes marzipan powder cake marzipan gummi bears caramels. Powder wypas dragée. Icing cheesecake oat cake chocolate cake marshmallow wafer caramels.
	</p>

	<p class="callout">
	Sesame snaps toffee candy canes marzipan powder cake marzipan gummi bears caramels. Powder wypas dragée. Icing cheesecake oat cake chocolate cake marshmallow wafer caramels.
	</p>
	</section>

	<footer class="callout">
	© 2012 My Awesome Self
	</footer>

	<script type="text/javascript">
	var feelings_textbox = document.querySelector('#feelings');
	var feelings_form = document.querySelector("#feelings_form");
	var feelings_button = document.querySelector('#get_feelings');

	// put the cursor in the text box
	feelings_textbox.focus();

	feelings_form.onsubmit = function(e) {
	e.preventDefault();

	// get the user's feelings
	var feelings = feelings_textbox.value;
	//console.log(feelings);

	// create a new p tag in the content section
	var p = document.createElement('p');
	var p_text = document.createTextNode("Oh, I see that you are feeling " + feelings + ". Interesting.");

	p.appendChild(p_text);

	// get reference to content section
	var content = document.querySelector('#content');

	// inject new p tag into content section
	content.appendChild(p);
	}

	/*
	// access element the old school way
	//var main_p = document.getElementById('main');

	// new school way
	var main_p = document.querySelector("#main");

	// get first .callout element
	var callout = document.querySelector(".callout");

	// get all .callout elements
	var callouts = document.querySelectorAll('.callout, #main');

	// get all p tags
	//var ps = document.getElementsByTagName('p');

	console.log(callouts);
	*/
	</script>
	</body>
	</html>