sartaj/gist:e567966960fee5af1a1f

## gistfile1.txt
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
        font-size: 36px;
    }
    </style>
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>

<body>

    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <button id="submitInfo">Submit Info</button>

    <h1>Comments so far</h1>
    <div id="theComments">

    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>

    <script>
    // Get Firebase
    var slimShadyRef = new Firebase('https://burning-fire-6350.firebaseio.com/comments');

    // Check when submit info button is clicked
    $("#submitInfo").on('click', function() {
        // Get value of name input
        var name = $("#nameInput").val();
        var message = $("#messageInput").val();

        // Console log inputs
        console.log("name", name, "message", message);

        // Create object to send
        var objectToSubmitToFirebase = {
            'name': name,
            'message': message
        };

        // push object to firebase
        slimShadyRef.push().set(objectToSubmitToFirebase);

    });

    // Boilerplate code to retrieve comment data
    //	.on('value',function) is how you retrieve data on firebase
    slimShadyRef.on("value", function(data) {

        // .val() is the firebase way to get the data
        var commentData = data.val();

        console.log("commentdata", commentData)
        // Create empty string
        var htmlString = '';

        // loop through the object
        for (var key in commentData) {
            // add div with comment name and message as a strong
            htmlString = htmlString + '<div><strong>' + commentData[key].name + ':</strong> ' + commentData[key].message
        }

        console.log("string being added", htmlString);
        // Add completed string to theComments div
        $("#theComments").html(htmlString);
    });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!-->
	<html class="no-js">
	<!--<![endif]-->

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
	font-size: 36px;
	}
	</style>
	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	</head>

	<body>

	<input type='text' id='nameInput' placeholder='Name'>
	<input type='text' id='messageInput' placeholder='Message'>
	<button id="submitInfo">Submit Info</button>

	<h1>Comments so far</h1>
	<div id="theComments">

	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

	<script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>

	<script>
	// Get Firebase
	var slimShadyRef = new Firebase('https://burning-fire-6350.firebaseio.com/comments');

	// Check when submit info button is clicked
	$("#submitInfo").on('click', function() {
	// Get value of name input
	var name = $("#nameInput").val();
	var message = $("#messageInput").val();

	// Console log inputs
	console.log("name", name, "message", message);

	// Create object to send
	var objectToSubmitToFirebase = {
	'name': name,
	'message': message
	};

	// push object to firebase
	slimShadyRef.push().set(objectToSubmitToFirebase);

	});

	// Boilerplate code to retrieve comment data
	// .on('value',function) is how you retrieve data on firebase
	slimShadyRef.on("value", function(data) {

	// .val() is the firebase way to get the data
	var commentData = data.val();

	console.log("commentdata", commentData)
	// Create empty string
	var htmlString = '';

	// loop through the object
	for (var key in commentData) {
	// add div with comment name and message as a strong
	htmlString = htmlString + '<div><strong>' + commentData[key].name + ':</strong> ' + commentData[key].message
	}

	console.log("string being added", htmlString);
	// Add completed string to theComments div
	$("#theComments").html(htmlString);
	});
	</script>
	</body>

	</html>