JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<div id='messagesDiv' class="quotes"></div>

CSS

.quotes {
    display: none;
}
input#name, input #email {
    float: left;
}
#lp-pom-root {
    margin: 0px;
}
#ideaInput {
    width: 652px;
    height: 27px;
    border-radius: 5px;
}
.quotes {
    color: #FFFFFF;
}
#nav-bar-links {
    text-decoration: none !important;
    color: black;
}

JavaScript

var myDataRef = new Firebase('https://crowdfluttr.firebaseio.com');
var started = false;
myDataRef.on('child_added', function (snapshot) {
    var message = snapshot.val();
    displayChatMessage(message.name, message.text);
});

function displayChatMessage(name, text) {
    console.log("before", $(".quotes"));
    $('<div/>').text(text).appendTo($('#messagesDiv'));
    console.log("after", $(".quotes"));
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
    if (!started) {
        showNextQuote();
        started = true;
    }
};


//(function() {
var quoteIndex = -1;

function showNextQuote() {
    var quotes = $(".quotes div");
    ++quoteIndex;
    console.log("Showing next quote", quoteIndex, quotes);
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
}
//})();