Agony's Awesome Spot

by Agony

HTML

<title>Agony's Awesome Spot</title>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 	

<body>
	<section id="page">
		<h1>Welcome to Agony's House</h1>
		<h2>Notes</h2>
		<div>
			<p>Type your notes here! You can save your current notes and type new ones, then show all your currently saved notes! Please note that your saved submissions are displayed horizontally and <strong>ARE</strong> numbered. 
			Use the "SAVE" button to save current notes and the "SHOW" button to display those notes. (Clear button in progress)
			<br></br>
				<textarea rows="5" cols="80" id="notes"></textarea>
			<br></br>
				<button id="save" onclick="save()">SAVE</button>
			<br></br>
				<button onclick="show()">SHOW</button>
			<br></br>
				<span id="display" style="display:inline"></span>
			</p>
		</div>
		<h2>Contact Me</h2>
		<div>
			<p>You can either:</p>
			<ul>
				<li>Text or Call me at MAH NUMBUR</li>
				<li>or <a href="#">Email me</a></li>
			</ul>
		</div>
		<h2>Feats and/or Strengths</h2>
		<div>
			<p>Here is my StackOverflow Profile:<br></br>
				<a href="http://stackoverflow.com/users/2886993/agony">
				<img src="http://stackoverflow.com/users/flair/2886993.png" width="208" height="58" alt="profile for Agony at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Agony at Stack Overflow, Q&amp;A for professional and enthusiast programmers"></a>
			<br></br>Get my resumé here:
			<br></br>
			<embed height="900" width="900" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/007/cache/spider-monkey_719_600x450.jpg">
			</p>
		</div>
	</section>
</body>
</html>

CSS

/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}
* {
	margin: 0;
	padding: 0;
}
body {
	background-color: lightgray;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 99%;
	margin: 0 auto;
	border: 3px solid blue;
}
section {
	padding: 15px 25px;
}
#page h1 { 
	margin-left:35%;
	position: relative;
	font-size: 125%;
	opacity: .2;
	color: blue;
}
h2 {
	border: 1px solid blue;
	color: black;
	font-size: 120%;
	padding: .25em 0 .25em 25px;
	cursor: pointer;
	background: gray url(images/plus.png) no-repeat left center;
}
h2.minus {
	background: gray url(images/minus.png) no-repeat left center;
}
div {
	display: none;
}
div.open {
	display: block;
}
ul {
	padding-left: 45px;
}
li {
	padding-bottom: .25em;
}
p {
	padding-bottom: .25em;
	padding-left: 25px;
}

JavaScript

$(document).ready(function() {
	$("#page h1").animate(
			{ fontSize: "175%", opacity: 1, right: "+=275", color: "red" }, 1000 )  
		.animate(
			{ fontSize: "175%", right: "-=275", color: "blue" }, 1000 )
		.animate(
			{ fontSize: "175%", left: "+=275", color: "red" }, 1000 )
		.animate(
			{ fontSize: "175%", left: "-=275", color: "blue" }, 1000 );
	
	$("#page h2").toggle(
		function() {
			$(this).toggleClass("minus");
		    $(this).next().slideDown(500);
	    },
	    function() {
	        $(this).toggleClass("minus");
	        $(this).next().slideUp(500);
	    }
    ); // end toggle
});  // end ready
var notes=new Array();
function save(){
	var notesValue = document.getElementById('notes').value;
	if(document.getElementById('notes').value != ''){
		notes[notes.length]=notesValue;
		document.getElementById('notes').value='';
	}
}
function show(){
	var content="<b>Your Notes:</b><br>";
	for(var i = 0; i < notes.length; i++) {
		content += (i+1) + ". " + notes[i] + " ";
	}
	if(content!="<b>Your Notes:</b><br>"){
		document.getElementById('display').innerHTML = content;
	}
}