frankV · June 26, 2013 15:50
diff --git a/handlebars_example1.html b/handlebars_example1.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Handelbars Example 1</title>
  <script src="js/handlebars.js"></script>
 	
 	<!-- notice this will not display until the data is populated -->
 	<script id="result-template" type="text/x-handlebars-template">
 	<h2>Your Bio</h2>
 	<p>
 	Your name is {{firstname}} {{lastname}} and you love {{food}}.
 	</p>
 	</script>

 </head>
 
 <body>
 
 	<h2>Render Simple Bio</h2>
 
 	<input type="text" id="firstname" placeholder="First Name"><br/>
 	<input type="text" id="lastname" placeholder="Last Name"><br/>
 	<input type="text" id="food" placeholder="Favorite Food"><br/>
 	<button id="demoButton">Demo</button>

 	<div id="resultDiv"> <!-- the template will display here --> </div>
 
 	<!-- le javascript -->
 	<script>
 	document.addEventListener("DOMContentLoaded", function() {
 
 		//Get the contents from the script block 
 		var source = document.querySelector("#result-template").innerHTML;
 		
 		//Compile them into a template
 		template = Handlebars.compile(source);
 
 		// on click of #demobutton, populate values and display template
 		document.querySelector("#demoButton").addEventListener("click", 
 			function() {
 				var fname = document.querySelector("#firstname").value;
 				var lname = document.querySelector("#lastname").value;
 				var food = document.querySelector("#food").value;
 
 				var html = template({firstname:fname, lastname:lname, food:food});
 				document.querySelector("#resultDiv").innerHTML = html;
 
 		});
 	});
 	</script>
 
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Handelbars Example 1</title>
	<script src="js/handlebars.js"></script>

	<!-- notice this will not display until the data is populated -->
	<script id="result-template" type="text/x-handlebars-template">
	<h2>Your Bio</h2>
	<p>
	Your name is {{firstname}} {{lastname}} and you love {{food}}.
	</p>
	</script>

	</head>

	<body>

	<h2>Render Simple Bio</h2>

	<input type="text" id="firstname" placeholder="First Name"><br/>
	<input type="text" id="lastname" placeholder="Last Name"><br/>
	<input type="text" id="food" placeholder="Favorite Food"><br/>
	<button id="demoButton">Demo</button>

	<div id="resultDiv"> <!-- the template will display here --> </div>

	<!-- le javascript -->
	<script>
	document.addEventListener("DOMContentLoaded", function() {

	//Get the contents from the script block
	var source = document.querySelector("#result-template").innerHTML;

	//Compile them into a template
	template = Handlebars.compile(source);

	// on click of #demobutton, populate values and display template
	document.querySelector("#demoButton").addEventListener("click",
	function() {
	var fname = document.querySelector("#firstname").value;
	var lname = document.querySelector("#lastname").value;
	var food = document.querySelector("#food").value;

	var html = template({firstname:fname, lastname:lname, food:food});
	document.querySelector("#resultDiv").innerHTML = html;

	});
	});
	</script>

	</body>
	</html>