rchrand/index.html

## index.html
<!doctype html>
<html>
    <head>
        <title>Rettiwt</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="css/stylecss.css">
    </head>
    <body>
        <h1>Rettiwit</h1>
    <div id="content">
      <h3>Welcome, please write a message!</h3>
      <div class="header">
	  <input type="text" name="message_head" placeholder="Title" id="ctnHeader" required> </input>
	  <textarea rows="2" cols="65" placeholder="Your message here!" id="ctnText" required></textarea>
	  <br \>
	  <button type="button" id="btnSubmit">Send!</button>
      </div>

      <div id="mainBody">
    <div class="message">
  <script id="tm" type="text/x-handlebars-template">
    {{#each message}}
        <div id="msg-header"> {{header}} </div>
        <div id="msg-body"> {{body}} </div>
        <div id="msg-header"> {{footer}} </div>
        <div class="subMsgMenu">
            <button class="btnDelete" name="deleteButton">Delete</button>
            <button class="btnShare" name="shareButton">Share</button>
        </div>
    {{/each}}
  </script>
</div>
  </div> <!-- mainBody closer -->
</div>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src=js/handlebars.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

## main.js
$(function() {
var data = {message : []};

$("#btnSubmit").click(function (){

        console.log("onClick from btnSubmit");
        createMessage();

        var subMenu = $(".subMsgMenu");
        $(".message").css("display", "none");
        subMenu.on("mouseover", function(){ $(this).css("display", "''"); });
        subMenu.on("mouseout", function(){ $(this).css("display", "none"); });

        $(".btnDelete").click(function() {
            var subMenus = this.parentNode;
            var realTarget = subMenus.parentNode;
            $(realTarget).remove();
        });
        console.log("I've come beyond subMenu's");

        var source = $("#tm").html();
        var template = Handlebars.compile(source);
        $(".message").html(template(data));

        console.log("I've come beyond handlebars");
});

function createMessage(){
    var ctnHeader, ctnMessage;
    var date = new Date();

    ctnHeader = document.getElementById("ctnHeader").value; // I get the value instead of the element
    ctnMessage = document.getElementById("ctnText").value;

    data.message.push({header : ctnHeader, body : ctnMessage, footer : date.toString()});
    console.log("Data: " + data.message);
}});
	<!doctype html>
	<html>
	<head>
	<title>Rettiwt</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="css/stylecss.css">
	</head>
	<body>
	<h1>Rettiwit</h1>
	<div id="content">
	<h3>Welcome, please write a message!</h3>
	<div class="header">
	<input type="text" name="message_head" placeholder="Title" id="ctnHeader" required> </input>
	<textarea rows="2" cols="65" placeholder="Your message here!" id="ctnText" required></textarea>
	<br \>
	<button type="button" id="btnSubmit">Send!</button>
	</div>

	<div id="mainBody">
	<div class="message">
	<script id="tm" type="text/x-handlebars-template">
	{{#each message}}
	<div id="msg-header"> {{header}} </div>
	<div id="msg-body"> {{body}} </div>
	<div id="msg-header"> {{footer}} </div>
	<div class="subMsgMenu">
	<button class="btnDelete" name="deleteButton">Delete</button>
	<button class="btnShare" name="shareButton">Share</button>
	</div>
	{{/each}}
	</script>
	</div>
	</div> <!-- mainBody closer -->
	</div>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript" src=js/handlebars.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	</body>
	</html>
	$(function() {
	var data = {message : []};

	$("#btnSubmit").click(function (){

	console.log("onClick from btnSubmit");
	createMessage();

	var subMenu = $(".subMsgMenu");
	$(".message").css("display", "none");
	subMenu.on("mouseover", function(){ $(this).css("display", "''"); });
	subMenu.on("mouseout", function(){ $(this).css("display", "none"); });

	$(".btnDelete").click(function() {
	var subMenus = this.parentNode;
	var realTarget = subMenus.parentNode;
	$(realTarget).remove();
	});
	console.log("I've come beyond subMenu's");

	var source = $("#tm").html();
	var template = Handlebars.compile(source);
	$(".message").html(template(data));

	console.log("I've come beyond handlebars");
	});

	function createMessage(){
	var ctnHeader, ctnMessage;
	var date = new Date();

	ctnHeader = document.getElementById("ctnHeader").value; // I get the value instead of the element
	ctnMessage = document.getElementById("ctnText").value;

	data.message.push({header : ctnHeader, body : ctnMessage, footer : date.toString()});
	console.log("Data: " + data.message);
	}});