<html>
<head>
	<title>
		To-Do List
	</title>
	<script type="text/javascript">
		function saveEdits() {
		//get the editable element
		var editElem = document.getElementById("edit");
		//get the edited element content
		var userVersion = editElem.innerHTML;
		//save the content to local storage
		localStorage.userEdits = userVersion;
		}
		function checkEdits() {
		//find out if the user has previously saved edits
		if(localStorage.userEdits!=null)
			document.getElementById("edit").innerHTML=localStorage.userEdits;
		}
		window.onbeforeunload = function() {saveEdits()}
		setInterval(function(){saveEdits()},30000);
	</script>
	<style>
		body {
		background-color:floralwhite;
		}
		#edit {
		border-style:dotted;
		border-width:1px;
		position:absolute;
		top:40px;
		width: 80%;
		font-family:"Andale Mono", Helvetica, sans-serif;
		font-size:200%;
		background-color:white;
		}
		#stuff {
		width: 80%;
		margin-left:auto;
		margin-right:auto;
		}
	</style>
</head>
<body onload="checkEdits()">
	<div id="stuff">
		<div id="edit" contenteditable="true">

		</div>
	</div>
</body>
</html>