JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div>Status: <span class="status" id="status1">Not Dancing</span>
    <br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="dance" id="short">dancing letters</span>
</div>
<div>Status: <span class="status" id="status2">Not Dancing</span>
    <br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="dance" id="long">the quick brown fox jumps over the lazy dog</span>

CSS

body {
    font-family:"Lucida Console", Monaco, monospace;
}

JavaScript

(function ($) {
    'use strict';

    function LetterDance($element, intervalMilliSeconds, startNow) {
        this.index = 0;
        this.$element = $element;
        this.content = this.$element.text();
        this.intervalMilliSeconds = intervalMilliSeconds;
        if (startNow) { // if undefined or true, start immediately
            this.resume();
        }
    }

    /* static functions declaration */

    LetterDance.capitalize = function (str, index) {
        /**
         *  This function capitalize the character with at specific index of str 
         *  and returns the resulting string
         */
        return str.substring(0, index) + str.substring(index, index + 1).toUpperCase() + str.substring(index + 1, str.length);
    };

    LetterDance.getLetterDance = function ($element) {
        var letterDance = $element.data('letterDance');
        return letterDance instanceof LetterDance ? letterDance : undefined;
    };

    LetterDance.setLetterDance = function ($element, letterDance) {
        $element.data('letterDance', letterDance);
    };

    LetterDance.removeLetterDance = function ($element) {
        $element.removeData('letterDance');
    };

    LetterDance.init = function ($element, interval, startNow) {
        if (LetterDance.getLetterDance($element)) {
            return;
        }
        var letterDance = new LetterDance($element, interval, startNow);
        LetterDance.setLetterDance($element, letterDance);
    };

    LetterDance.cancel = function ($element) {
        var letterDance = LetterDance.getLetterDance($element);
        if (letterDance) {
            letterDance.destroy();
            LetterDance.removeLetterDance($element);
        }
    };

    LetterDance.pause = function ($element) {
        var letterDance = LetterDance.getLetterDance($element);
        if (letterDance) {
            letterDance.pause();
        }
    };

    LetterDance.resume = function ($element) {
        var letterDance =...