cfjedimaster/test1.html

## test1.html
<!DOCTYPE html>
<html>
<head>
	<title>Test 1</title>
	<script src="js/handlebars-1.0.0.beta.6.js"></script>
	<script id="result-template" type="text/x-handlebars-template">
	<h2>Your Bio</h2>
	<p>
	Your name is {{firstname}} {{lastname}} and you are {{age}} years old.
	</p>
	</script>
    <link rel="stylesheet" href="style.css" type="text/css" />
</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="number" id="age" placeholder="Age"><br/>
	<button id="demoButton">Demo</button>

	<div id="resultDiv"></div>

	<script>

	document.addEventListener("DOMContentLoaded", function() {

		//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 fname = document.querySelector("#firstname").value;
			var lname = document.querySelector("#lastname").value;
			var age = document.querySelector("#age").value;

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

		});
	});


	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test 1</title>
	<script src="js/handlebars-1.0.0.beta.6.js"></script>
	<script id="result-template" type="text/x-handlebars-template">
	<h2>Your Bio</h2>
	<p>
	Your name is {{firstname}} {{lastname}} and you are {{age}} years old.
	</p>
	</script>
	<link rel="stylesheet" href="style.css" type="text/css" />
	</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="number" id="age" placeholder="Age"><br/>
	<button id="demoButton">Demo</button>

	<div id="resultDiv"></div>

	<script>

	document.addEventListener("DOMContentLoaded", function() {

	//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 fname = document.querySelector("#firstname").value;
	var lname = document.querySelector("#lastname").value;
	var age = document.querySelector("#age").value;

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

	});
	});


	</script>

	</body>
	</html>