JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-car.css">
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<div id="odometer-away" class="odometer" data-value="22.5">0</div>

CSS

.odometer {
  font-size: 100px;
}

JavaScript

/* elements already on the page will animate */
setTimeout(function() {
  var odo = $('#odometer-away');
  odo.text(parseFloat(odo.data('value')));


  /* create new element */
  $('body').append('<div id="new-odo" class="new-odometer">200</div>');
}, 1000);




/* try and animate newly created elements but it just updates the value... */
setTimeout(function() {
  var el = document.getElementById('new-odo');
  var new_odo = new Odometer({
    el: el
  });
  new_odo.update(999);
}, 3000);