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')));
}, 1000);


/* create new element */
var div = document.createElement("DIV");    
div.classList.add("odometer");
div.classList.add("new-odometer");
var t = document.createTextNode(0);      
div.appendChild(t);                              
document.body.appendChild(div); 


/* try and animate newly created elements but it just updates the value... */
setTimeout(function(){
  var new_odo = $('.new-odometer');
  new_odo.text(200);
}, 3000);