WebWonders-Developer-Chat/chat.html at master · WebWonders/WebWonders-Developer-Chat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html>
<html>
  <head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src='https://cdn.firebase.com/v0/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='chat.css'/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
  </head>
  <body>
    <div id='messages'></div>
    <input type='text' id='name' placeholder='Your Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var dataRef = new Firebase('https://webwonders-chat.firebaseio.com');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var userName = $('#name').val();
          var userText = $('#messageInput').val();
          dataRef.push({name: userName, text: userText});
          $('#messageInput').val('');
        }
      });
      dataRef.on('child_added', function(snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.text);
      });
      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messages'));
        $('#messages')[0].scrollTop = $('#messages')[0].scrollHeight;
      };
    </script>
    <script>
      var nameBox = document.getElementById('#name')
      localStorage.setItem("user_name", JSON.stringify(message.name));
      var nameStored = localStorage.getItem("user_name")
      if (nameBox.val() === "before") {
        message.name = nameStored;
      }
    </script>
  </body>
</html>