JSFiddle - React, Tailwind, and code Playground

Simple reverse ordered list

by Kato Richardson

HTML

<script src="http://cdn.firebase.com/js/client/1.0.11/firebase.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.3.2/firebase-simple-login.js"></script>
<script src="https://rawgit.com/firebase/angularFire/release_0.8/dist/angularfire.js"></script>
<pre></pre>

CSS

pre {
    padding: 20px;
    font-size: 16px;
    line-height: 20px;
    background-color: #fafafa;
    border: 1px solid #999;
    display: block;
    border-radius: 10px;
    white-space: pre-wrap;
    /* css-3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}
.error {
    color: red;
}

JavaScript

var fb = new Firebase('https://kato-sandbox-priorities.firebaseio-demo.com/');
var ref = fb.endAt().limit(100);
populateData();

// listen for all relevant events and update our list
ref.on('value', update);

// print the output of our array
function update(snap) {
   var list = [];
    snap.forEach(function(ss) {
       var data = ss.val();
       data['.priority'] = ss.getPriority();
       data['.name'] = ss.name();
       list.unshift(data); 
    });
   $('pre').text(JSON.stringify(list, null, 2));
}

// some demo magic to load test data
function populateData() {
    var data = {};
    for(var i=1; i<=500; i++) {
        data['item'+i] = {val: i, '.priority': i}; 
    }
    fb.set(data);
}