beeline-explorometer.html

<div class="explorometer">
<h2 style="text-align: center; color: #000000; font-weight: bold;">Beeline Explorometer™</h2>
<h2 style="text-align: center; color: #ffffff; font-weight: bold;"><span class="journeys">34,994</span> rides</h2>
<h2 style="text-align: center; color: #ffffff; font-weight: bold;"><span class="distance">313,362</span> km</h2>
</div>
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
<script>
  firebase.initializeApp({
    databaseURL: "https://beeline-e46ed.firebaseio.com"
  });
</script>
<script>
  (function() {
    var explorometerEl = document.querySelector('.explorometer');
    var journeysEl = document.querySelector('.explorometer .journeys');
    var distanceEl = document.querySelector('.explorometer .distance');
    function numberWithCommas(x) {
      // Integer version of https://stackoverflow.com/a/2901298/244640
      return Math.round(x).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
    function flash(el, newBgColor) {
      var flashDuration = 50;
      var fadeDuration = 1000;
      var bgColor = el.style.backgroundColor;
      var transition = el.style.transition;
      el.style.backgroundColor = newBgColor;
      setTimeout(function() {
        el.style.transition = (transition ? (transition + ', ') : '') + 'background-color ' + fadeDuration + 'ms ease-out';
        el.style.backgroundColor = bgColor;
      }, flashDuration);
      setTimeout(function() {
        el.style.transition = transition;
      }, fadeDuration + flashDuration);
    }
    function updateExplorometer(stats) {
      stats = stats || {};
      journeysEl.innerText = numberWithCommas(stats.journeys || 0);
      distanceEl.innerText = numberWithCommas((stats.distance || 0) / 1000);
    }
    firebase.database().ref('/stats/total/all-time').on('value', function(snapshot) {
      updateExplorometer(snapshot.val());
      flash(explorometerEl, 'rgba(255,207,0,0.5)');
    });
  })();
</script>