John Davidson

Message:

Am creating a coming soon website

<div class="countdown styled"></div>

From this div, I need a countdown timer. So I used the default countdown timer from jquery.countdown.js.

UI coming correctly and shows seconds at 0 only.

What do I have to do to run a counter?

Am getting Js code at jquery.countdown.js file

(function() {



  (function($) {

    $.countdown = function(el, options) {

      var getDateData,

        _this = this;

      this.el = el;

      this.$el = $(el);

      this.$el.data("countdown", this);

      this.init = function() {

        _this.options = $.extend({}, $.countdown.defaultOptions, options);

        if (_this.options.refresh) {

          _this.interval = setInterval(function() {

            return _this.render();

          }, _this.options.refresh);

        }

        _this.render();

        return _this;

      };

      getDateData = function(endDate) {

        var dateData, diff;

        endDate = Date.parse($.isPlainObject(_this.options.date) ? _this.options.date : new Date(_this.options.date));

        diff = (endDate - Date.parse(new Date)) / 1000;

        if (diff <= 0) {

          diff = 0;

          if (_this.interval) {

            _this.stop();

          }

          _this.options.onEnd.apply(_this);

        }

        dateData = {

          years: 0,

          days: 10,

          hours: 10,

          min: 20,

          sec: 14,

          millisec: 10

        };

    

    $.countdown.defaultOptions = {

      date: "Dec 25, 2021 15:03:25",

      refresh: 1000,

      onEnd: $.noop,

      render: function(date) {

        return $(this.el).html("" + date.years + " years, " + date.days + " days, " + (this.leadingZeros(date.hours)) + " hours, " + (this.leadingZeros(date.min)) + " min and " + (this.leadingZeros(date.sec)) + " sec");

      }

    };

    $.fn.countdown = function(options) {

      return $.each(this, function(i, el) {

        var $el;

        $el = $(el);

        if (!$el.data('countdown')) {

          return $el.data('countdown', new $.countdown(el, options));

        }

      });

    };

    return void 0;

  })(jQuery);



}).call(this);

 

But counter not running . Only UI coming . Thanks in advance

---

My Answer:
It looks like there may be a couple of issues with your code.

First, in the `getDateData` function, you are hardcoding the values for years, days, hours, min, sec, and millisec. You should calculate these values based on the `diff` variable which represents the difference in seconds between the end date and the current date.

Second, in the `render` function of `defaultOptions`, you are using `this.leadingZeros` which is not defined in your code. You should define this function or use a different method to format the numbers with leading zeros.

Here is an updated version of your code with these changes:

javascript
(function() {

(function($) {
$.countdown = function(el, options) {
var getDateData,
_this = this;
this.el = el;
this.$el = $(el);
this.$el.data("countdown", this);
this.init = function() {
_this.options = $.extend({}, $.countdown.defaultOptions, options);
if (_this.options.refresh) {
_this.interval = setInterval(function() {
return _this.render();
}, _this.options.refresh);
}
_this.render();
return _this;
};
getDateData = function(endDate) {
var dateData, diff;
endDate = Date.parse($.isPlainObject(_this.options.date) ? _this.options.date : new Date(_this.options.date));
diff = (endDate - Date.parse(new Date)) / 1000;
if (diff <= 0) {
diff = 0;
if (_this.interval) {
_this.stop();
}
_this.options.onEnd.apply(_this);
}
dateData = {
years: Math.floor(diff / (365 * 24 * 60 * 60)),
days: Math.floor(diff / (24 * 60 * 60) % 365),
hours: Math.floor(diff / (60 * 60) % 24),
min: Math.floor(diff / 60 % 60),
sec: Math.floor(diff % 60),
millisec: Math.floor((diff % 1) * 1000)
};
return dateData;
};

$.countdown.defaultOptions = {
date: "Dec 25, 2021 15:03:25",
refresh: 1000,
onEnd: $.noop,
render: function(date) {
return $(this.el).html("" + date.years + " years, " + date.days + " days, " + date.hours + " hours, " + date.min + " min and " + date.sec + " sec");
}
};

$.fn.countdown = function(options) {
return $.each(this, function(i, el) {
var $el;
$el = $(el);
if (!$el.data('countdown')) {
return $el.data('countdown', new $.countdown(el, options));
}
});
};
return void 0;
})(jQuery);

}).call(this);


With these changes, the countdown timer should now work properly.