frankV/handlebars_example3.html

## handlebars_example3.html
<!DOCTYPE html>
<html>
<head>
  <title>Test 3</title>
	<script src="js/handlebars.js"></script>
	<script src="js/webtoolkit.md5.js"></script>

	<!-- notice this will not display until the data is populated -->
	<script id="result-template" type="text/x-handlebars-template">
	<h2>Your Gravatar</h2>
	<p>
	The gravatar associated with {{email}} is:<br/><br/>
	<img src="{{gravatarurl email }}">
	</p>

	</script>

</head>

<body>

	<h2>Enter Email Address for Awesomeness</h2>
	<input type="email" id="email" placeholder="Email goes here...">
	<button id="demoButton">Demo</button>

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

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

		Handlebars.registerHelper('gravatarurl', function(email) {
		    return 'http://www.gravatar.com/avatar/' + MD5(email) + '.jpg?s=250';
		});

		//Get the contents from the script block
		var source = document.querySelector("#result-template").innerHTML;
		//Compile that baby into a template
		template = Handlebars.compile(source);

		document.querySelector("#demoButton").addEventListener("click", function() {
			var email = document.querySelector("#email").value;
			if(!email.length) return;

			var html = template({email:email});
			document.querySelector("#resultDiv").innerHTML = html;

		});
	});
	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test 3</title>
	<script src="js/handlebars.js"></script>
	<script src="js/webtoolkit.md5.js"></script>

	<!-- notice this will not display until the data is populated -->
	<script id="result-template" type="text/x-handlebars-template">
	<h2>Your Gravatar</h2>
	<p>
	The gravatar associated with {{email}} is:<br/><br/>
	<img src="{{gravatarurl email }}">
	</p>

	</script>

	</head>

	<body>

	<h2>Enter Email Address for Awesomeness</h2>
	<input type="email" id="email" placeholder="Email goes here...">
	<button id="demoButton">Demo</button>

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

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

	Handlebars.registerHelper('gravatarurl', function(email) {
	return 'http://www.gravatar.com/avatar/' + MD5(email) + '.jpg?s=250';
	});

	//Get the contents from the script block
	var source = document.querySelector("#result-template").innerHTML;
	//Compile that baby into a template
	template = Handlebars.compile(source);

	document.querySelector("#demoButton").addEventListener("click", function() {
	var email = document.querySelector("#email").value;
	if(!email.length) return;

	var html = template({email:email});
	document.querySelector("#resultDiv").innerHTML = html;

	});
	});
	</script>

	</body>
	</html>