add some code

patrickdevivo · Mar 2, 2014 · 1eaaf33 · 1eaaf33
1 parent 9419395
commit 1eaaf33
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Firebase Demo</title>
+    <link rel="stylesheet" href="/main.css">
+</head>
+
+<body>
+     <h1>Firebase Demo</h1>
+
+     <h3>Building a message board</h3>
+
+    <div id='chatroom'>
+        <div id='messages'></div>
+        <form>
+            <input id='message' type='text' />
+            <button id='send'>Send</button>
+        </form>
+    </div>
+</body>
+
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,6 @@
+#chatroom {
+    max-height: 500px;
+}
+#chatroom .message {
+    padding: 5px;
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,19 @@
+$(document).ready(function() {
+    var firebaseRef = new Firebase('https://fb-amherst.firebaseio.com/'),
+        chatRoom = firebaseRef.child('chatroom');
+
+    chatRoom.limit(10).on('value', function (dataSnap) {
+        $('#messages').html('');
+        dataSnap.forEach(function (messageSnap) {
+            html = "<div class='message'>" + messageSnap.val() + "</div>";
+            $('#messages').append(html);
+        });
+    });
+
+    $('#send').on('click', function (e) {
+        e.preventDefault();
+        var message = $('#message').val();
+        chatRoom.push(message);
+        $('#message').val('');
+    });
+})