stujo/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>JSample</title>
    <link rel="stylesheet" type="text/css" href="css/jsample.css">
</head>

<body>
    <div class="container">
        <h1>JavaScript Sample</h1>
        <div id="controls">
            <button class="jsample-button" id="doit">Do It</button>
            <button class="jsample-button" id="undoit">Undo It</button>
            <button class="jsample-button" id="toggleit">Toggle It</button>
        </div>
        <div id="doit_target"></div>
    </div>

    <div class="templates">
        <div id="jsample_image_template"><img alt="cat" src="https://actnowtraining.files.wordpress.com/2012/02/cat.jpg?w=200"/></div>
    </div>
    <script type="text/javascript" src="js/jsample.js"></script>
    <script type="text/javascript">
    window.addEventListener("load", function() {
        jsampleOnLoadCallback();
    });
    //window.addEventListener("load", jsampleOnLoadCallback);
    </script>
</body>

</html>

## jsample.js
"use strict";


var five = 5;

console.log("5 is a " + typeof five);

var five_string = '5';


var mary = "Mary";

console.log("'Mary' is a " + typeof foo);


function toggleClassById(id, klass){
  var element = document.getElementById(id);
  if(element){
    element.classList.toggle(klass);
  }
}

function foo()
{
  console.log("foo");
}

console.log("'function foo(){}' is a " + typeof foo);

function getTemplate(selector){
  return document.querySelector(selector).innerHTML
}

function toggleItCallback(event){
  toggleClassById("doit_target", "red");
}


function doItCallback(event){
  document.querySelector("#doit_target").innerHTML = getTemplate('#jsample_image_template');
}

function undoItCallback(event){
  document.querySelector("#doit_target").innerHTML = "";
}


function jsampleOnLoadCallback(){
  console.log("On Load Callback Called");

  document.querySelector("#doit").addEventListener("click", doItCallback, false);
  document.querySelector("#undoit").addEventListener("click", undoItCallback, false);
  document.querySelector("#toggleit").addEventListener("click", toggleItCallback, false);

}
	<!DOCTYPE html>
	<html>

	<head>
	<title>JSample</title>
	<link rel="stylesheet" type="text/css" href="css/jsample.css">
	</head>

	<body>
	<div class="container">
	<h1>JavaScript Sample</h1>
	<div id="controls">
	<button class="jsample-button" id="doit">Do It</button>
	<button class="jsample-button" id="undoit">Undo It</button>
	<button class="jsample-button" id="toggleit">Toggle It</button>
	</div>
	<div id="doit_target"></div>
	</div>

	<div class="templates">
	<div id="jsample_image_template"><img alt="cat" src="https://actnowtraining.files.wordpress.com/2012/02/cat.jpg?w=200"/></div>
	</div>
	<script type="text/javascript" src="js/jsample.js"></script>
	<script type="text/javascript">
	window.addEventListener("load", function() {
	jsampleOnLoadCallback();
	});
	//window.addEventListener("load", jsampleOnLoadCallback);
	</script>
	</body>

	</html>
	"use strict";


	var five = 5;

	console.log("5 is a " + typeof five);

	var five_string = '5';


	var mary = "Mary";

	console.log("'Mary' is a " + typeof foo);


	function toggleClassById(id, klass){
	var element = document.getElementById(id);
	if(element){
	element.classList.toggle(klass);
	}
	}

	function foo()
	{
	console.log("foo");
	}

	console.log("'function foo(){}' is a " + typeof foo);

	function getTemplate(selector){
	return document.querySelector(selector).innerHTML
	}

	function toggleItCallback(event){
	toggleClassById("doit_target", "red");
	}


	function doItCallback(event){
	document.querySelector("#doit_target").innerHTML = getTemplate('#jsample_image_template');
	}

	function undoItCallback(event){
	document.querySelector("#doit_target").innerHTML = "";
	}


	function jsampleOnLoadCallback(){
	console.log("On Load Callback Called");

	document.querySelector("#doit").addEventListener("click", doItCallback, false);
	document.querySelector("#undoit").addEventListener("click", undoItCallback, false);
	document.querySelector("#toggleit").addEventListener("click", toggleItCallback, false);

	}