JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div id="out1">empty</div>

CSS

.test1 {
    color: #333333;
    font: bold 18px/28px Arial, sans-serif;
}
.test2 {
    color: #ff0000;
    font: bold 23px/33px Arial, sans-serif;
}
.test3 {
    font: italic bold 18px/28px Arial, sans-serif;
}
#out1 {
    display: none;
}

JavaScript

var timerid;
var container;
var myMessages = {
    animateDelay: 1,
    countdownDelay: 11,
    restartDelay: 2,
    startDelay: 3,
    initialMessage: "<span class='test1'>This <span class='test3'>will</span> start in $1 seconds</span>",
    // the $1 will contain the initial delay
    countdownMessage: "<span class='test1'>In $1 this message is gone</span>",
    // the $1 will contain the counter
    restartMessage: "<span class='test1'>This will restart in <span class='test3'>$1</span> seconds</span>"
};
var cnt;

function formatString(haystack, needle) {
    return haystack.replace("$1", needle);
}

function reset() {
    cnt = myMessages.countdownDelay;
    container.html(formatString(myMessages.restartMessage, 2)).effect('slide', {
        direction: 'down'
    }, myMessages.animateDelay * 1000).delay(myMessages.restartDelay * 1000).effect('slide', {
        direction: 'down',
        mode: 'hide'
    }, myMessages.animateDelay * 1000, function() {
        countdown(true);
    });
}

function countdown(animate) {
    clearTimeout(timerid);
    --cnt;
    container.html(formatString(myMessages.countdownMessage, "<span class='test2'>" + ((cnt < 0) ? 0 : cnt) + "</span>" + " second" + (cnt == 1 ? "" : "s")));
    if (animate) {
        container.effect('slide', {
            direction: 'down'
        }, myMessages.animateDelay * 1000, function() {
            timerid = setTimeout(countdown, 1000);
        });
    }
    else if (cnt < 0) {
        container.effect('slide', {
            direction: 'down',
            mode: 'hide'
        }, myMessages.animateDelay * 1000, function() {
            reset();
        });
    }
    else {
        timerid = setTimeout(countdown, 1000);
    }
}

$(function() {
    cnt = myMessages.countdownDelay;
    container = $('#out1');
    //$( "#effect" ).effect( selectedEffect, options, 500, callback );
    container.html(formatString(myMessages.initialMessage, myMessages.startDelay)).delay(500).effect('slide', {
       ...