Borgaard/sochatty_firebase.html

## sochatty_firebase.html
<html>
  <style>
    .timeColor {
      color: gray;
      margin-right: 5px;
    }
    .userColor {
      color: orange;
      margin-right: 5px;
    }
    .msgColor {
      color: purple;
      margin-right: 5px;
    }
  </style>
  <body>
    <div id="chat-window"></div>
    <div id="chat-form">
      <form id="formy">
        <textarea name="chat-entry" id="chat-entry" cols="30" rows="1"></textarea>
        <input type="submit" value="ChatzOr"></input>
      </form>
    </div>
    <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
    <script>
    var firebase = new Firebase("https://sochatty.firebaseio.com/");

    function addNewPost(post){
      var timeSpan = document.createElement("span");
      var userSpan =  document.createElement("span");
      var msgSpan = document.createElement("span");

      timeSpan.textContent = (new Date(post["time"])).toUTCString();
      timeSpan.className = "timeColor";

      userSpan.textContent = post["username"] + " says: ";
      userSpan.className = "userColor";

      msgSpan.textContent = post["messageBody"];
      msgSpan.className = "msgColor";

      var li = chatWindow.appendChild(document.createElement("li"));
      li.appendChild(timeSpan);
      li.appendChild(userSpan);
      li.appendChild(msgSpan);
      // li.textContent = (new Date(post["time"])).toUTCString() + " | " + "</span>" + post["username"] + " says: " + post["messageBody"];
    }

    firebase.limitToLast(1).on('child_added', function (snapshot) {
      var post = snapshot.val();
      addNewPost(post);
    });

    var chatWindow = document.querySelector("#chat-window");
    firebase.once("value", function(snapshot){
      // var funnyExists = snapshot.exists();
      // console.log(snapshot.val());
      var snappy = snapshot.val();
      for (var key in snappy){
        var post = snappy[key];
        addNewPost(post);
      }
    });

    //on page load, check Local Storage to see if there's already a username
    var username = localStorage.getItem("username");
    //if there is no username, ask the user and set value in local storage
    if (username == null) {
      username = prompt("What is your username?");
      localStorage.setItem("username", username);
    }
    var chatVal = document.querySelector("#chat-entry");
    var form = document.querySelectorAll("#formy")[0];
    form.addEventListener("submit", function(event){
      event.preventDefault()
      // console.log(event.timeStamp);
      console.log(arguments);
      firebase.push({
        username: username,
        messageBody: chatVal.value,
        time: event.timeStamp
      })
      // var li = chatWindow.appendChild(document.createElement("li"));
      // li.textContent = (new Date(event.timeStamp)).toUTCString() + " | " + username + " says: " + chatVal.value;
      chatVal.value = "";
    });
    </script>
  </body>
</html>
	<html>
	<style>
	.timeColor {
	color: gray;
	margin-right: 5px;
	}
	.userColor {
	color: orange;
	margin-right: 5px;
	}
	.msgColor {
	color: purple;
	margin-right: 5px;
	}
	</style>
	<body>
	<div id="chat-window"></div>
	<div id="chat-form">
	<form id="formy">
	<textarea name="chat-entry" id="chat-entry" cols="30" rows="1"></textarea>
	<input type="submit" value="ChatzOr"></input>
	</form>
	</div>
	<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
	<script>
	var firebase = new Firebase("https://sochatty.firebaseio.com/");

	function addNewPost(post){
	var timeSpan = document.createElement("span");
	var userSpan = document.createElement("span");
	var msgSpan = document.createElement("span");

	timeSpan.textContent = (new Date(post["time"])).toUTCString();
	timeSpan.className = "timeColor";

	userSpan.textContent = post["username"] + " says: ";
	userSpan.className = "userColor";

	msgSpan.textContent = post["messageBody"];
	msgSpan.className = "msgColor";

	var li = chatWindow.appendChild(document.createElement("li"));
	li.appendChild(timeSpan);
	li.appendChild(userSpan);
	li.appendChild(msgSpan);
	// li.textContent = (new Date(post["time"])).toUTCString() + " \| " + "</span>" + post["username"] + " says: " + post["messageBody"];
	}

	firebase.limitToLast(1).on('child_added', function (snapshot) {
	var post = snapshot.val();
	addNewPost(post);
	});

	var chatWindow = document.querySelector("#chat-window");
	firebase.once("value", function(snapshot){
	// var funnyExists = snapshot.exists();
	// console.log(snapshot.val());
	var snappy = snapshot.val();
	for (var key in snappy){
	var post = snappy[key];
	addNewPost(post);
	}
	});

	//on page load, check Local Storage to see if there's already a username
	var username = localStorage.getItem("username");
	//if there is no username, ask the user and set value in local storage
	if (username == null) {
	username = prompt("What is your username?");
	localStorage.setItem("username", username);
	}
	var chatVal = document.querySelector("#chat-entry");
	var form = document.querySelectorAll("#formy")[0];
	form.addEventListener("submit", function(event){
	event.preventDefault()
	// console.log(event.timeStamp);
	console.log(arguments);
	firebase.push({
	username: username,
	messageBody: chatVal.value,
	time: event.timeStamp
	})
	// var li = chatWindow.appendChild(document.createElement("li"));
	// li.textContent = (new Date(event.timeStamp)).toUTCString() + " \| " + username + " says: " + chatVal.value;
	chatVal.value = "";
	});
	</script>
	</body>
	</html>