CODEWITHSUNDEEP
javascripthtml
withjamin
withjamin

Reputation: 47

How can I make this countdown reset every week after showing a message for 1 day? code included

So I have a countdown which counts down then displays a message which works well. The thing I have to manually edit the date to restart the countdown. I want it to display the message for that day only, then once that day has ended, reset and count down again automatically.

Thank you for your help.

This is the code so far:

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(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

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

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

    if (t.total <= 0) {
        document.getElementById("clockdiv").className = "hidden-div";
      document.getElementById("timeIsNow").className = "visible-div";
      clearInterval(timeinterval);
    }
  }

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


var deadline = 'April 28 2021 20:00:00 GMT+01';
//var deadline = new Date(Date.parse(new Date()) + 100 * 24 * 60 * 60 * 1000);  // sets 15 day countdown
initializeClock('clockdiv', deadline);

// getTimeRemaining(deadline).minutes;
<style>


.cent {
  margin: auto;
  width: 50%;
  padding: 10px;
    text-align: center;
}
h1{
  color: #396;
  font-weight: 500;
  font-size: 30px;
  margin: 0px 0px 0px;
}

#clockdiv{
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 20px;
 
}

#clockdiv > div{
  padding: 10px;
  border-radius: 8px;
  background: #121212;
  display:inline-block;
  margin: 1px;
}
 
#clockdiv div > span{
  padding: 08px;
  border-radius: 8px;
  background: #f12e70;;
  display: inline-block;
}

.smalltext{
  padding-top: 5px;
  font-size: 16px;
}
.hidden-div {
  visibility: hidden;
}
.visible-div {
  visibility: visible;
}

</style>

<div id="timeIsNow" class="hidden-div">
  <h1>Message is Live</h1>
</div>

<div id="clockdiv">
    
  <div>
    <span class="days"></span>
    <div class="smalltext">D</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">H</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">M</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">S</div>
  </div>
</div>

Upvotes: 0

Views: 130

Answers (1)

AndyJamesN
AndyJamesN

Reputation: 498

When

t.total <= 0

Set deadline to current time at time of completion.. something like

new Date().toISOString()

From your code you have deadline set to endtime inside initializeClock(id, endtime) so you would update endtime inside the function when time is 0

endtime = new Date().toISOString()

There will no doubt still be some further changes but this would be the essence of it.

Upvotes: 1

Related Questions