JSFiddle - React, Tailwind, and code Playground
by GMK Hussain
HTML
<h1>count down timer</h1>
<div id="countdowntimer"><span id="future_date"><span></div>
CSS
#countdowntimer {
font-family: "open sans";
font-size: 2.1em;
position: relative;
text-align: center;
}
#countdowntimer sup {
font-size: 0.4em;
margin: 0 20px 0 10px;
}
JavaScript
/*MAKE JS FILE
* Author - Harshen Amarnath Pandey
* Version - 1.0.8
* Release - 18th April 2015
* Copyright (c) 2014 - 2018 Harshen Pandey
*/
(function ($) {
$.fn.countdowntimer = function (options) {
return this.each(function () {
countdown($(this), options);
});
};
//Definition of private function countdown.
function countdown($this, options) {
var opts = $.extend({}, $.fn.countdowntimer.defaults, options);
var $this = $this;
$this.addClass("style");
var size = "";
var borderColor = "";
var fontColor = "";
var backgroundColor = "";
var regexpMatchFormat = "";
var regexpReplaceWith = "";
size = opts.size;
borderColor = opts.borderColor;
fontColor = opts.fontColor;
backgroundColor = opts.backgroundColor;
if (options.regexpMatchFormat != undefined && options.regexpReplaceWith != undefined && options.timeSeparator == undefined) {
window['regexpMatchFormat_' + $this.attr('id')] = options.regexpMatchFormat;
window['regexpReplaceWith_' + $this.attr('id')] = options.regexpReplaceWith;
}
if (options.borderColor != undefined || options.fontColor != undefined || options.backgroundColor != undefined) {
var customStyle = {
"background": backgroundColor,
"color": fontColor,
"border-color": borderColor
}
$this.css(customStyle);
} else {
$this.addClass("colorDefinition");
}
if (options.size != undefined) {
switch (size) {
case "xl" :
$this.addClass("size_xl");
break;
case "lg" :
$this.addClass("size_lg");
break;
case "md" :
$this.addClass("size_md");
break;
case...