lorenanicole/board.html

## board.html
<html>
<head>
  <title>Post-It Board</title>

  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body id="board">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script src="post-it.js"></script>
</body>
</html>

## post-it.js
$(function() {
  // This code will run when the DOM has finished loading
  board = new Board($("#board"));

});

function Board(element) {

  this.$elem = element;
  var self = this;
  this.$elem.click(function(e){
    var post = new PostIt();
    post.place(e.pageY,e.pageX, self.$elem);
  });

}


function PostIt (){
  this.template = $("<div class='post-it'><div class='header'><a href='#'>X</a></div><div class='content' contenteditable='true'></div></div>");
  this.template.draggable({handle: ".header"});
  var self = this;

  this.template.find(".content").click(function(e){
    e.stopPropagation();
    self.template.find(".content").focus();
  });

  this.template.find("a").click(function(e){
    e.stopPropagation();
    self.destroy();
  });
}

PostIt.prototype.destroy = function() {
  this.template.remove();
}

PostIt.prototype.place = function(y,x,parent_el){
  this.template.hide();
  parent_el.append(this.template);
  this.template.show();
  this.template.offset({top: y, left: x});
}


## style.css
#board {
  font-family: monospace;
  background-color: #9e8d68;
  margin: 0;
  padding: 0;
  position: relative;
}

.post-it {
  position: absolute !important;
  width: 160px;
  background-color: yellow;
  box-shadow: -2px 2px 5px #555;
  overflow: hidden;
}

.post-it .header {
  background-color: #c2c25b;
  text-align: right;
  padding: 2px;
}

.post-it .header:hover {
  background-color: #a8a860;
}

.post-it .header a, .post-it .header a:visited {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.post-it .header a:hover {
  color: #eee;
}

.post-it .content {
  padding: 10px;
  min-height: 70px;
  outline: none;
}
	<html>
	<head>
	<title>Post-It Board</title>

	<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body id="board">
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
	<script src="post-it.js"></script>
	</body>
	</html>
	$(function() {
	// This code will run when the DOM has finished loading
	board = new Board($("#board"));

	});

	function Board(element) {

	this.$elem = element;
	var self = this;
	this.$elem.click(function(e){
	var post = new PostIt();
	post.place(e.pageY,e.pageX, self.$elem);
	});

	}



	function PostIt (){
	this.template = $("<div class='post-it'><div class='header'><a href='#'>X</a></div><div class='content' contenteditable='true'></div></div>");
	this.template.draggable({handle: ".header"});
	var self = this;

	this.template.find(".content").click(function(e){
	e.stopPropagation();
	self.template.find(".content").focus();
	});

	this.template.find("a").click(function(e){
	e.stopPropagation();
	self.destroy();
	});
	}

	PostIt.prototype.destroy = function() {
	this.template.remove();
	}

	PostIt.prototype.place = function(y,x,parent_el){
	this.template.hide();
	parent_el.append(this.template);
	this.template.show();
	this.template.offset({top: y, left: x});
	}
	#board {
	font-family: monospace;
	background-color: #9e8d68;
	margin: 0;
	padding: 0;
	position: relative;
	}

	.post-it {
	position: absolute !important;
	width: 160px;
	background-color: yellow;
	box-shadow: -2px 2px 5px #555;
	overflow: hidden;
	}

	.post-it .header {
	background-color: #c2c25b;
	text-align: right;
	padding: 2px;
	}

	.post-it .header:hover {
	background-color: #a8a860;
	}

	.post-it .header a, .post-it .header a:visited {
	text-decoration: none;
	color: black;
	font-weight: bold;
	}

	.post-it .header a:hover {
	color: #eee;
	}

	.post-it .content {
	padding: 10px;
	min-height: 70px;
	outline: none;
	}