JSFiddle - React, Tailwind, and code Playground

by psyne

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div ng-app="notesApp">
    <div class="container" ng-controller="NotesCtrl">
        <div class="row">
            <h1 id="note_title">Notes Counter</h1>
            <p id="note_count">{{notes.length}}</p>
        </div>
    </div>
</div>

CSS

#note_count {
font-size: 10em;
height: 200px;
width: 200px;
margin: 0 auto;
background: black;
text-align: center;
color: yellowgreen;
}
#note_title {
margin: 20px auto 0;
width: 200px;
font-size: 2em;
background: black;
padding: 10px 0;
text-align: center;
color: #efefef;
}

JavaScript

var notesApp = angular.module('notesApp', ['firebase']);

function NotesCtrl($scope, angularFire) {
    var fireBaseUrl = new Firebase('https://notes9000.firebaseio.com/notes');
    angularFire(fireBaseUrl, $scope, 'notes');
}