JSFiddle - React, Tailwind, and code Playground

by Sandra Caroline Hansen

HTML

<style>
    /*Always try to make style independent and self contained.*/
    .digitaliconcontrol .dates {
        font-size: 39px;
        clear: both;
        float: left;
        display: inline-block;
    }

    .digitaliconcontrol .current_date {
        font-size: 40px;
        font-weight: bolder;
        text-align: center;
    }

    .digitaliconcontrol .digital-date {
        font-size: 13px !important;
        font-weight: bolder;
        width: 100%;
        text-align: center;
    }
</style>

<div class="digitaliconcontrol">
    <div>
        <div id="timecurrent">
            <div class="dates digital-date"></div>
            <div class="current_date"></div>
        </div>
    </div>
</div>
<div id="digitalClockContainer" style="visibility:hidden;">
    <div class="digital" id="timecurrent" style="margin: 10px; height: 130px; display: block; line-height:normal;">
        <div class="dates digital-date"></div>
        <div class="year"></div>
    </div>
    <div class="digital" id="change_time" style="height: 165px; margin: 10px;">
        <div class="meet dotdot">TEAM MEETING</div>
        <div class="countdown">
            <span class="yr"></span>
            <span class="doted1">:</span>
            <span class="mnth"></span>
            <span class="doted2">:</span>
            <span class="dat"></span>
            <span class="doted3">:</span>
            <span class="hrs"></span>
            <span class="doted4">:</span>
            <span class="mnt"></span>
            <span class="doted5">:</span>
            <span class="scd"></span>
            <span class="left"></span>
        </div>
        <div class="digiformat">
            <span class="yeartext dotdot" style="width: 101px; display: inline-block; text-align: center; line-height:normal;"></span>
            <span class="doted1">&nbsp;&nbsp;&nbsp;</span>
            <span class="monthtext dotdot" style="width: 101px; display: inline-block; text-align: center;...

CSS

[id^="wt_digital_"] {
    width: auto !important;
    position: absolute !important;
    z-index: 99;
}

.clock {
    height: 200px;
    display: table;
}

.yr {
    margin-left: 0%;
    display: inline-block;
    min-width: 101px;
    text-align: center;
    float: left;
}

.mnth {
    margin-left: 0px;
    display: inline-block;
    min-width: 101px;
    text-align: center;
    float: left;
}

.dat {
    margin-left: 0px;
    display: inline-block;
    min-width: 101px;
    text-align: center;
    float: left;
}

.hrs {
    margin-left: 0px;
    display: inline-block;
    min-width: 101px;
    text-align: center;
    float: left;
}

.mnt {
    margin-left: 0px;
    display: inline-block;
    min-width: 101px;
    text-align: center;
    float: left;
}

.scd {
    margin-left: 0px;
    display: inline-block;
    min-width: 101px;
    text-align: center;
    float: left;
}

.doted1, .doted2, .doted3, .doted4, .doted5 {
    float: left;
}

.yeartext, .monthtext, .daytext, .hourtext, .minutetext, .secondtext {
    float: left;
}

.digital > .meet {
    font-size: 39px;
    float: left;
    /*margin-left: 137px;*/
    padding: 3px;
}

.digital > .digiformat {
    top: 148px;
    width: 970px;
    font-size: 22px;
    font-weight: bolder;
    float: left;
    position: absolute;
}

.digital {
    color: #fff;
}


    .digital > .countdown {
        font-size: 68px;
        font-weight: bolder;
        min-width: 970px;
        float: left;
        margin-top: 60px;
        position: absolute;
    }


    .digital > .timelapse {
        font-size: 68px;
        font-weight: bolder;
        width: 540px;
        float: left;
        margin-top: 44px;
        /*margin-left: 49px;*/
    }


.countdown > .left {
    font-size: 44px;
    font-weight: bolder;
    position: absolute;
    bottom: 0px;
}



.countdown > .ago {
    float: right;
    font-size: 33px;
}


.digital > .dates {
    font-size: 39px;
    clear: both;
    display: inline-block;
}


.digital > .year {
 ...

JavaScript

(function () {
    if (window.jQuery === undefined) {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src", "http://code.jquery.com/jquery-1.10.2.js");
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }

})();

var WidgetDigital = function () {
    var _this = {};
    _this.item = {};
    _this.item.wtDateTimeType = 0;
    _this.digitalTimer;
    _this.init = function () {
        console.log("init");
        if (_this.options) {
            _this.options.isFirstTime = false;
        }
        else {
            _this.options = _this.getParams();
            _this.options.isFirstTime = true;
        }

        console.log("get params");
        _this.injectStyleSheets();
        console.log("inject style");

        //Check if script called not from SD(by url). 
        if (_this.options.isRenderByURL == "true") {
            try {
                var widgetSelector = (_this.item.containerID) ? "#" + _this.item.containerID : "#" + _this.options.containerID;
                var el = $(widgetSelector).find("[id*=wt_digital]");
                var scriptObj = $('script[id*="widget_digital"]');  //find all script tag for this type of widget
                for (var i = 0; i < scriptObj.length; i++) {
                    if (scriptObj[i].dataset && scriptObj[i].dataset.containerID == el[0].id) {
                        //var widget = JSON.parse(scriptObj[i].dataset.sourceItem);
                        //_this.item = widget.item;
                        //_this.options = widget.options;

                        var dto = JSON.parse(scriptObj[i].dataset.sourceItem);

                        if (isEmpty(dto.otherSettings)) {//We will get otherSettings only if we save jsongString(New logic).
                            _this.item = dto.item;
                            _this.options = dto.options;

             ...