JSFiddle - React, Tailwind, and code Playground

by adrienne

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Gavin Brock's CSS/JavaScript Animated Odometer</title>
    </head>


    <body>
    <h1>Gavin Brock's CSS/JavaScript Animated Odometer</h1>
    <h3>Version 1.0 - April 7th 2008</h3>

    <p>If your browser is compatible, you should see an incrementing counter below:</p>
    <div id="odometerDiv" style="width:100%;"></div>

    <h2>&nbsp;</h2>
    <h2>&nbsp;</h2>

    <p>
    The latest version of this code should be at:<br>
    <a href="http://www.brock-family.org/gavin/software/web/">http://www.brock-family.org/gavin/software/web/</a>
    </p>

    <h2>Usage:</h2>
    <p>Create an odometer widget:<br><tt>myOdometer = new Odometer(htmlElem, opts);</tt></p>
    <ul>
        <li><tt>htmlElem</tt> is a HTML element in which to draw the odometer widget.
        <li><tt>opts</tt> is an associative array of options for the widget. Valid options are:
        <ul>
            <li><tt>digits</tt> Number of digit boxes to display<br>
            Default value: <tt>6</tt>
            <li><tt>tenths</tt> If one of the digit boxes should show tenths (this will be white)<br>
            Default value: <tt>false</tt>
            <li><tt>digitHeight</tt> The height of the digit box<br>
            Default value: <tt>40</tt>
            <li><tt>digitWidth</tt> The width of the digit box<br>
            Default value: <tt>30</tt>
            <li><tt>digitPadding </tt> The padding inside the digit box<br>
            Default value: <tt>0</tt>
            <li><tt>fontStyle</tt> The font for the digits (size will be calculated from digitHeight)<br>
            Default value: <tt>"font-family: Courier New, Courier, monospace; font-weight: 900;"</tt>
            <li><tt>bustedness</tt> The wobblieness of the numbers<br>
            Default value: <tt>2</tt>
        </ul>
    </ul>
    <p>Set the value on the odometer:<br><tt>myOdometer->set(val);</tt></p>
    <ul>
        <li><tt>val</tt>...

JavaScript

//============================================================================//
//  Gavin Brock's CSS/JavaScript Animated Odometer
//  Version 1.0 - April 7th 2008
//============================================================================//
//  Copyright (C) 2008 Gavin Brock
//
//  This program is free software: you can redistribute it and/or modify
//  it under the terms of the GNU General Public License as published by
//  the Free Software Foundation, either version 3 of the License, or
//  (at your option) any later version.
//
//  This program is distributed in the hope that it will be useful,
//  but WITHOUT ANY WARRANTY; without even the implied warranty of
//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//  GNU General Public License for more details.
//
//  You should have received a copy of the GNU General Public License
//  along with this program.  If not, see <http://www.gnu.org/licenses/>.
//============================================================================//

function Odometer (parentDiv,opts) {
    if (!parentDiv) throw "ERROR: Odometer object must be past a document element.";

    this.digits       = 6;
    this.tenths       = 0;
    this.digitHeight  = 40;
    this.digitPadding = 0;
    this.digitWidth   = 30;
    this.bustedness   = 2;
    this.fontStyle    = "font-family: Courier New, Courier, monospace; font-weight: 900;";
    this.value        = -1;

    for (var key in opts) { this[key] = opts[key]; }

    var style = {
        digits:        "position:absolute; height:"+this.digitHeight+"px; width:"+(this.digitWidth-(2*this.digitPadding))+"px; "+
                       "padding:"+this.digitPadding+"px; font-size:"+(this.digitHeight-(2*this.digitPadding))+"px; "+
                       "background:black; color:white; text-align:center; "+this.fontStyle,
        columns:       "position:relative; float:left; overflow:hidden;"+
                       "height:"+this.digitHeight+"px;...