etsai/board.html Secret

## 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
var Board = function( selector ) {

  this.elem = $( selector );
  var self = this

  function initialize() {
    self.elem.on('click', function(event){
      event.stopPropagation();
      self.boardclick(event);
  });
  };

  initialize();

};

Board.prototype.boardclick = function(e){
  var post = new PostIt(e.offsetX, e.offsetY);
  this.elem.append(post.$postElem);
};


var PostIt = function(x, y) {
  this.$postElem = $(PostIt.note);
  this.x = x;
  this.y = y;

  var individualPost = this.$postElem.find('.header');
  this.$postElem.draggable({
    handle:individualPost
  });

  var self = this

  this.location(this.x, this.y);

  $(this.$postElem).find("div.content").on("click", function(e) {
    e.stopPropagation();
  });

  $(individualPost).find("a").on("click", function(e) {
    e.stopPropagation();
    self.deletePost();
  });

};

PostIt.prototype.location = function(x, y) {
  this.$postElem.css({"top": y, "left": x});
};

PostIt.prototype.deletePost = function() {
  this.$postElem.remove();
  delete this
};

PostIt.note = "<div class='post-it'><div class='header'><a class='delete'> x </a></div><div class='content' contenteditable='true'></div>"


$(function() {
  board = new Board('#board');
});


## styles.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>
	var Board = function( selector ) {

	this.elem = $( selector );
	var self = this

	function initialize() {
	self.elem.on('click', function(event){
	event.stopPropagation();
	self.boardclick(event);
	});
	};

	initialize();

	};

	Board.prototype.boardclick = function(e){
	var post = new PostIt(e.offsetX, e.offsetY);
	this.elem.append(post.$postElem);
	};


	var PostIt = function(x, y) {
	this.$postElem = $(PostIt.note);
	this.x = x;
	this.y = y;

	var individualPost = this.$postElem.find('.header');
	this.$postElem.draggable({
	handle:individualPost
	});

	var self = this

	this.location(this.x, this.y);

	$(this.$postElem).find("div.content").on("click", function(e) {
	e.stopPropagation();
	});

	$(individualPost).find("a").on("click", function(e) {
	e.stopPropagation();
	self.deletePost();
	});

	};

	PostIt.prototype.location = function(x, y) {
	this.$postElem.css({"top": y, "left": x});
	};

	PostIt.prototype.deletePost = function() {
	this.$postElem.remove();
	delete this
	};

	PostIt.note = "<div class='post-it'><div class='header'><a class='delete'> x </a></div><div class='content' contenteditable='true'></div>"


	$(function() {
	board = new Board('#board');
	});
	#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;
	}