Countdown time refreshes in html website

Question

I am designing a website which have a countdown timer but every time I refresh countdown time resets. Any idea what's happening wrong.

I want it to set it to 36 days but it works fine until we refresh the webite but it resets the countdown time on refreshing.

A help would be a great in my learning process

My github repo - https://www.github.com/vivanks/hackoffproject

My website - https://vivanks.github.io/hackoffproject

(function ($) {
    "use strict";

    $.fn.extend({ 

      countdown100: function(options) {
        var defaults = {
          timeZone: "",
          endtimeYear: 0,
          endtimeMonth: 0,
          endtimeDate: 0,
          endtimeHours: 0,
          endtimeMinutes: 0,
          endtimeSeconds: 0,
        }

        var options =  $.extend(defaults, options);

        return this.each(function() {
          var obj = $(this);
          var timeNow = new Date();

          var tZ = options.timeZone; console.log(tZ);
          var endYear = options.endtimeYear;
          var endMonth = options.endtimeMonth;
          var endDate = options.endtimeDate;
          var endHours = options.endtimeHours;
          var endMinutes = options.endtimeMinutes;
          var endSeconds = options.endtimeSeconds;

          if(tZ == "") {
            var deadline = new Date(endYear, endMonth - 1, endDate, endHours, endMinutes, endSeconds);
          } 
          else {
            var deadline = moment.tz([endYear, endMonth - 1, endDate, endHours, endMinutes, endSeconds], tZ).format();
          }

          if(Date.parse(deadline) < Date.parse(timeNow)) {
            var deadline = new Date(Date.parse(new Date()) + endDate * 24 * 60 * 60 * 1000 + endHours * 60 * 60 * 1000); 
          }


          initializeClock(deadline);

          function getTimeRemaining(endtime) { 
            var t = Date.parse(endtime) - Date.parse(new Date());
            var seconds = Math.floor((t / 1000) % 60);
            var minutes = Math.floor((t / 1000 / 60) % 60);
            var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
            var days = Math.floor(t / (1000 * 60 * 60 * 24));
            return {
              'total': t,
              'days': days,
              'hours': hours,
              'minutes': minutes,
              'seconds': seconds
            };
          }

          function initializeClock(endtime) { 
            var daysSpan = $(obj).find('.days');
            var hoursSpan = $(obj).find('.hours');
            var minutesSpan = $(obj).find('.minutes');
            var secondsSpan = $(obj).find('.seconds');

            function updateClock() { 
              var t = getTimeRemaining(endtime);

              daysSpan.html(t.days);
              hoursSpan.html(('0' + t.hours).slice(-2));
              minutesSpan.html(('0' + t.minutes).slice(-2));
              secondsSpan.html(('0' + t.seconds).slice(-2))

              if (t.total <= 0) {
                clearInterval(timeinterval);
              }
            }

            updateClock();
            var timeinterval = setInterval(updateClock, 1000);
          }




        });
      }
    });



})(jQuery);

What is your intended trigger to start the 36 day countdown? — JonSG, Jul 25 '18 at 17:45
Are you counting down **to** a specific time, or are you trying to create a timer that will countdown for a specific amount **of** time? — zero298, Jul 25 '18 at 17:45
Possible duplicate of [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — zero298, Jul 25 '18 at 17:58
Is 36 days from the time the page is first viewed, the time a button is clicked, the time the page was last viewed, a specific time of the day, the time of some server based variable, the time of a specific world event.... What triggers the "start" your countdown of 36 days? — JonSG, Jul 25 '18 at 18:13
36 days countdown means the countdown begins from today till 36 days. — Mansi Shukla, Jul 25 '18 at 18:41
Very poor form to have your "other" account ask the same question: https://stackoverflow.com/questions/51526204/javascript-countdown-time-resets-every-time-i-refreshes-my-website — JonSG, Jul 25 '18 at 19:23

Felipe Augusto · Accepted Answer · 2018-07-25T21:21:42.993

To do this you can use localStorage, save the value there and get the value from there, this way even if the user refreshes the page you would be able to get the value and continue the counting.

You should save the time:

function updateClock() { 
    var t = getTimeRemaining(endtime);

    daysSpan.html(t.days);
    hoursSpan.html(('0' + t.hours).slice(-2));
    minutesSpan.html(('0' + t.minutes).slice(-2));
    secondsSpan.html(('0' + t.seconds).slice(-2))

    if (t.total <= 0) {
         clearInterval(timeinterval);
    }

    let myTime = {
        daysSpan: savedTime.days,
        hoursSpan: savedTime.hours,
        minutesSpan: savedTime.minutes,
        secondsSpan: savedTime.seconds
    }

    localStorage.setItem('myTime', myTime)
}

and get the saved time:

function initializeClock(endtime) { 
    let localSave= localStorage.getItem('myTime')

    var daysSpan;
    var hoursSpan;
    var minutesSpan;
    var secondsSpan;

    if(localSave.myTime){
        daysSpan = savedTime.days;
        hoursSpan = savedTime.hours;
        minutesSpan = savedTime.minutes;
        secondsSpan = savedTime.seconds;
    }else{
        daysSpan = $(obj).find('.days');
        hoursSpan = $(obj).find('.hours');
        minutesSpan = $(obj).find('.minutes');
        secondsSpan = $(obj).find('.seconds');
    }

    function updateClock() { 
        var t = getTimeRemaining(endtime);

        daysSpan.html(t.days);
        hoursSpan.html(('0' + t.hours).slice(-2));
        minutesSpan.html(('0' + t.minutes).slice(-2));
          secondsSpan.html(('0' + t.seconds).slice(-2))

        if (t.total <= 0) {
            clearInterval(timeinterval);
        }
    }
    updateClock();
    var timeinterval = setInterval(updateClock, 1000);
}

You can see how to set localStorage and get localStorage.

Why the downvote? This seems like a very reasonable suggestion to me. — JonSG, Jul 25 '18 at 18:15
@MansiShukla I've updated the answer, with a code, I didn't tested, maybe some adjusts will be needed, you can put a `console.log` to investigate that, when getting and setting the values. — Felipe Augusto, Jul 25 '18 at 21:22

Countdown time refreshes in html website

1 Answers1