dashinfall3/postIt.css

## postIt.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;
}

## postit.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>

## postIt.js
var Board = function(selector) {
  // Your board related code goes here
  this.postIts = [];
  // Use $elem to access the DOM element for this board
  var $elem = $(selector);

  this.initialize = function() {
    var self = this;
    // $('.delete').on('click', function(){
    //   self.deletePostit();
    // });
    $elem.on('click', function(e) {
      self.addPostIt(e);
      self.deletePostIt();
    });
  };

  this.initialize();
};

Board.prototype.addPostIt = function(e) {
  this.postIts.push(new PostIt(e));

}

Board.prototype.deletePostIt = function(){
  $('.delete').on('click', function(event) {
    $(this).closest('.post-it').remove();
    event.stopPropagation();
  });
}

var PostIt = function(e) {
  this.xPosition = e.pageX
  this.yPosition = e.pageY
  // Your post-it related code goes here
  this.initialize = function() {
    new_post_it = "<div class='post-it'><div class='header'>Header <span class='delete'>x</span></div><div class='content' contenteditable='true'>"
    $('#board').append($(new_post_it).offset({ top: this.yPosition - 80 , left: this.xPosition - 80 }));
    $('.post-it').draggable({ handle: '.header'});
    $('.post-it').on('click', function() {
      return false;
    });
  }

  this.initialize();
};


$(function() {
  // This code will run when the DOM has finished loading
  // Board.new();
  board = new Board('#board');
});


// var B = function() {
//   (function(){
//     console.log('initialized')
//   })()
// }
	#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>
	var Board = function(selector) {
	// Your board related code goes here
	this.postIts = [];
	// Use $elem to access the DOM element for this board
	var $elem = $(selector);

	this.initialize = function() {
	var self = this;
	// $('.delete').on('click', function(){
	// self.deletePostit();
	// });
	$elem.on('click', function(e) {
	self.addPostIt(e);
	self.deletePostIt();
	});
	};

	this.initialize();
	};

	Board.prototype.addPostIt = function(e) {
	this.postIts.push(new PostIt(e));

	}

	Board.prototype.deletePostIt = function(){
	$('.delete').on('click', function(event) {
	$(this).closest('.post-it').remove();
	event.stopPropagation();
	});
	}

	var PostIt = function(e) {
	this.xPosition = e.pageX
	this.yPosition = e.pageY
	// Your post-it related code goes here
	this.initialize = function() {
	new_post_it = "<div class='post-it'><div class='header'>Header <span class='delete'>x</span></div><div class='content' contenteditable='true'>"
	$('#board').append($(new_post_it).offset({ top: this.yPosition - 80 , left: this.xPosition - 80 }));
	$('.post-it').draggable({ handle: '.header'});
	$('.post-it').on('click', function() {
	return false;
	});
	}

	this.initialize();
	};


	$(function() {
	// This code will run when the DOM has finished loading
	// Board.new();
	board = new Board('#board');
	});


	// var B = function() {
	// (function(){
	// console.log('initialized')
	// })()
	// }