JSFiddle - React, Tailwind, and code Playground

by karim79

HTML

<div class="odometerWrap" style="width:100%">

    <div id="odometer" class="odometer">123</div>
    <div class="text">Minutes remaining</div>
</div>

CSS

</style><!-- This closes the open style tag above. Just a jsFiddle thing. Please ignore. -->


<!-- Odometr includes -->
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-digital.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

<!-- Extra styles for this example -->
<style>

body {
    background-color: black;
}

.odometer-formatting-mark {
    display: none;
}

.odometerWrap {
    text-align: center;
    padding-top: 200px;
}
.odometer {
    width: 94%;
    height: 256px;
    font-size: 201px;
}

.text {
    margin-top: 10px;
    font-family: arial;
}

JavaScript

setInterval(function () {
    var target_date = new Date("Feb 11, 2014").getTime();
    var days, hours, minutes, seconds;
    
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
     
    //hours = parseInt(seconds_left / 3600);
    //seconds_left = seconds_left % 3600;
      
    minutes = parseInt(seconds_left / 60);
    //seconds = parseInt(seconds_left % 60);    
    
    odometer.innerHTML = minutes;
}, 1000);


$("#odometer").css("height", $("body").css("height"));