JSFiddle - React, Tailwind, and code Playground

by BinaryAcid

HTML

<script src="http://static.firebase.com/v0/firebase.js"></script>
<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<div ng-app ng-controller="chatController">
  <div id='messagesDiv'>
    <div ng-repeat="message in messages">
      <em>{{message.name}}: {{message.text}}</em>
    </div>
  </div>
  <form ng-submit="addMessage()">
    <input id='nameInput' type='text' placeholder='Name' ng-model="name"/>
    <input id='messageInput' type='text' placeholder='Message' ng-model="text"/>
    <input type="submit" id="submit" value="Send"/>
  </form>
</div>

CSS

input {
  font-size: 24px;
}

input[type=text] {
  color: #424547;
  border: 1px solid #c2c2c2;
  background-color: white;
}

em {
  font-style: normal;
  font-weight: bold;
  color: black;
}

#messagesDiv {
  background-color: white;
  overflow: auto;
  height: 230px;
  width: 95%;
  padding: 10px;
  border: 8px solid #424547;
  margin-bottom: 5px;
  text-align: left;
}

#nameInput {
  width: 25%;
}

#messageInput {
  width: 70%;
}

JavaScript

function chatController($scope, $defer) {
  $scope.firebaseRef = new Firebase('alpha-db.firebaseIO.com');
  $scope.name = '';
  $scope.text = '';
  $scope.messages = [];
  $scope.addMessage = function() {
    $scope.firebaseRef.push({name:$scope.name, text:$scope.text});
    $scope.text = '';
  };
  $scope.firebaseRef.on('child_added', function(snapshot){
    var message = snapshot.val();
    $defer(function(){$scope.messages.push({name:message.name, text:message.text});},0);
  });
}
chatController.$inject = ['$scope','$defer'];