GrantSchiller/StackRunner.html

## StackRunner.html
<!--Good luck using this-->
<!--Credit to BC (and Colin Roberts for the sliding effect. Thanks Colin.) Made some alterations myself to suit Stacks-->
<!DOCTYPE html>
<html>
  <head>
		<title>Stack runner</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			body {
				font-family: "Trebuchet MS";
				background-color: #57667A;
				color: #E6E6E6;
			}
			h1 {
				color: #FAFAFA;
				padding: 20px;
			}
			p, ul {
				font-size: 16px;
				padding: 0px 20px;
			}
			ul {
				margin-left: 40px;
			}
			footer {
				width: 100%;
				background-color: #ADB9C9;
				margin-top: 50px;
				padding: 30px;
				text-align: center;
			}
			footer a, footer a:visited {
				color: #0E5880;
			}
			footer a:hover {
				text-decoration: none;
			}
		</style>
		<script type="text/javascript" src="Stack.js"></script>
		<script type="text/javascript" src="Node.js"></script>
		<script type="text/javascript">
			var myQ;
			function init() {
				myQ = new Stack();
			}
			function addToQueue() {
				// You should not need to change anything here: just implement the enqueue method
				var c = prompt("What is the content of this new node?");
				if (c != null) {
					var n = new Node(c);
					myQ.push(n);
					displayAll();
				}
			}
			function removeFromQueue() {
				// You should not need to change anything here: just implement the dequeue method
				var result = myQ.pop();
				alert(result.getContent());
				displayAll();
			}
			function viewTopElement() {
				// You should not need to change anything here: just implement the peek method
				var result = myQ.peek();
				alert(result.getContent());
			}
			function checkLength() {
				// You should not need to change anything here: just implement the getLength method
				var result = myQ.getLength();
				alert(result);
			}
			function displayAll() {
				// No need to edit this function. It should automagically update the list items in the <ul> to match what is in your Queue
				var n = myQ.peek();
				var ul = document.getElementById("list");
				var html = "";
				while (n != null) {
					html += "<li>"+n.getContent()+"</li>";
					n = n.getNextNode();
				}
				ul.innerHTML = html;
			}
			function empty() {
				// You should not need to change anything here: just implement the dequeue method
				alert(myQ.isEmpty());
			}
		</script>
	</head>
	<marquee>
	<body onload="init();">
		<h1>Stack runner...</h1>
		<p>This is a page all about Stacks in Computer Science. Stacks are one kind of LinkedList.</p>
		<p>Let's do some brainstorming about when Stacks are useful...</p>
		<p>
			<button onclick="addToQueue();">Push</button>
			<button onclick="removeFromQueue();">Pop</button>
			<button onclick="viewTopElement();">Peek</button>
			<button onclick="checkLength();">Get length</button>
			<button onclick="empty();">Is empty?</button>
		</p>
		<ul id="list">
			<li>e.g. </li>
			<li>e.g. </li>
			<li>e.g. </li>
		</ul>
		<footer>
			<p>
				<a href="http://blogs.friendscentral.org/cs1">CS1</a> |
				<a href="http://blogs.friendscentral.org/cs2">CS2</a> |
				<a href="http://www.friendscentral.org">FCS</a>
			</p>
		</footer>
	</body>
	</marquee>
</html>
	<!--Good luck using this-->
	<!--Credit to BC (and Colin Roberts for the sliding effect. Thanks Colin.) Made some alterations myself to suit Stacks-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Stack runner</title>
	<style>
	* {
	margin: 0px;
	padding: 0px;
	}
	body {
	font-family: "Trebuchet MS";
	background-color: #57667A;
	color: #E6E6E6;
	}
	h1 {
	color: #FAFAFA;
	padding: 20px;
	}
	p, ul {
	font-size: 16px;
	padding: 0px 20px;
	}
	ul {
	margin-left: 40px;
	}
	footer {
	width: 100%;
	background-color: #ADB9C9;
	margin-top: 50px;
	padding: 30px;
	text-align: center;
	}
	footer a, footer a:visited {
	color: #0E5880;
	}
	footer a:hover {
	text-decoration: none;
	}
	</style>
	<script type="text/javascript" src="Stack.js"></script>
	<script type="text/javascript" src="Node.js"></script>
	<script type="text/javascript">
	var myQ;
	function init() {
	myQ = new Stack();
	}
	function addToQueue() {
	// You should not need to change anything here: just implement the enqueue method
	var c = prompt("What is the content of this new node?");
	if (c != null) {
	var n = new Node(c);
	myQ.push(n);
	displayAll();
	}
	}
	function removeFromQueue() {
	// You should not need to change anything here: just implement the dequeue method
	var result = myQ.pop();
	alert(result.getContent());
	displayAll();
	}
	function viewTopElement() {
	// You should not need to change anything here: just implement the peek method
	var result = myQ.peek();
	alert(result.getContent());
	}
	function checkLength() {
	// You should not need to change anything here: just implement the getLength method
	var result = myQ.getLength();
	alert(result);
	}
	function displayAll() {
	// No need to edit this function. It should automagically update the list items in the <ul> to match what is in your Queue
	var n = myQ.peek();
	var ul = document.getElementById("list");
	var html = "";
	while (n != null) {
	html += "<li>"+n.getContent()+"</li>";
	n = n.getNextNode();
	}
	ul.innerHTML = html;
	}
	function empty() {
	// You should not need to change anything here: just implement the dequeue method
	alert(myQ.isEmpty());
	}
	</script>
	</head>
	<marquee>
	<body onload="init();">
	<h1>Stack runner...</h1>
	<p>This is a page all about Stacks in Computer Science. Stacks are one kind of LinkedList.</p>
	<p>Let's do some brainstorming about when Stacks are useful...</p>
	<p>
	<button onclick="addToQueue();">Push</button>
	<button onclick="removeFromQueue();">Pop</button>
	<button onclick="viewTopElement();">Peek</button>
	<button onclick="checkLength();">Get length</button>
	<button onclick="empty();">Is empty?</button>
	</p>
	<ul id="list">
	<li>e.g. </li>
	<li>e.g. </li>
	<li>e.g. </li>
	</ul>
	<footer>
	<p>
	<a href="http://blogs.friendscentral.org/cs1">CS1</a> \|
	<a href="http://blogs.friendscentral.org/cs2">CS2</a> \|
	<a href="http://www.friendscentral.org">FCS</a>
	</p>
	</footer>
	</body>
	</marquee>
	</html>